;

DevExtreme React - What’s New in v20.1

New Diagram

The Diagram control was first introduced in May 2019 as a community technology preview (CTP). This update marks its official release. Its features include:

  • 40+ Predefined Shapes (including collapsible shape containers and OrgChart shapes)
  • Custom Shapes
  • Bind to External Data
  • Load / Save Diagram in the JSON Format
  • Export to SVG, PNG and JPEG
  • Auto Layout
  • Templates
  • Full Screen and Simple View Modes
  • Read-Only Mode
  • Configurable Page Settings
  • UI Customization
  • Support for Mobile Devices
  • Localization
Diagram Control | DevExpress

New File Manager

The File Manager was first introduced in May 2019 as a community technology preview (CTP). This update marks its official release.

Its features include:

  • Configurable and Modular File System Providers
  • File and Folder Editing
  • Upload / Download Files
  • Thumbnail and Details view modes
  • Selection
  • Progress and Status UI
  • Toolbar and Context Menu
  • File Upload Validation
  • Responsive UI
  • Touch Support
  • Localization
File Manager - DevExtreme | DevExpress

New Gantt

The Gantt control was first introduced in October 2019 as a community technology preview (CTP). This update marks its official release.

Its features include:

  • Data Binding
  • Task, Dependency and Resource Management
  • Change History
  • Task Dependency and Parent/Child Relationship Validation
  • Time Highlighting
  • Context Menu and Toolbar
  • Scroll and Zoom
  • Configurable Task Appearance
  • Localization
Gantt - DevExtreme| DevExpress

Data Grid

New Export to Excel API

This update marks the official release of our new Export to Excel API (based on the ExcelJS library). Features include:

  • Customize Individual Cells via customizeCell Callback
  • Column Band Export
  • Cell Text Alignment, Wrapping and Font Settings
  • DataGrid's Column Format Support
  • Cell Image Export
  • Excel-Inspired Column Filter
  • Export Status Panel
Export to Excel - Data Grid | DevExpress

Data Grid and Tree List

Remote Validation Support

We have extended Asynchronous Validation Rule support in DataGrid/TreeList cells when using row and batch edit modes.

Remote Validation Support - DevExtreme | DevExpress

Data Visualization

Custom Position of Chart Axes

You can now specify the X/Y offset for axes origin.

Custom Position of Chart Axes - DevExtreme | DevExpress

Polar Chart Annotations

Our Polar Chart now includes annotation support.

Polar Chart Annotations - DevExtreme | DevExpress

Scheduler

Hourly Repeating Events

DevExtreme Scheduler can now use hours to specify repeat intervals for an event (such as an event that repeats every 4 hours).

Hourly Repeating Events - DevExtreme | DevExpress

Adaptivity Enhancements

The DevExtreme Scheduler's Appointment Form was redesigned to better match screen size.

Adaptivity Enhancements - DevExtreme | DevExpress

API Enhancements

This release includes a new 'allowEditingTimeZones' option. You no longer need to implement a custom 'onAppointmentFormOpening' event handler.

HTML/Markdown Editor

Multi-line Toolbar

You can now display HTMLEditor toolbar items across multiple lines. Turn-off the 'toolbar.multiline' option to disable this new option.

HTML/Markdown Editor - Multi-line Toolbar | DevExpress

UI Widgets

TreeView - Selection API Enhancements

TreeView - Scrolling API Enhancements

The new 'scrollToItem' method allows you to scroll to a specified TreeView node.

React Components

Authentication UI Template

We've extended our Login Form template with a new Sign Up, Reset/Change Password form template. We've also implemented corresponding client-side API so you can integrate our forms with your backend authentication API.

Authentication UI Template - React Components | DevExpress

Native React Scheduler - Resources and Grouping

We added resource support to our DevExtreme React Scheduler. Assign resources to appointments and visualize appointments grouped by resources or by dates.

Native React Scheduler - Resources and Grouping | DevExpress
Native React Scheduler - Resources and Grouping | DevExpress

Native React Grid - Export to Excel

You can now export the contents of the DevExtreme React Grid to Excel (including options to configure formatting).

Native React Grid -  Export to Excel | DevExpress

Native React Grid - Scroll To Row

We introduced a new API that allows you to scroll DevExtreme React Grid content to a specific row.