;

DevExtreme React - What’s New in v20.2

Data Grid

Export to PDF (CTP)

You can now export DataGrid content to a PDF document. Our new Export to PDF API offers the following:

  • Cell content and appearance customization.
  • Image export support.
  • Add custom content alongside the grid (such as a header or footer).
  • Export multiple grids into a single PDF document.
Export to PDF - Data Grid | DevExpress

Data Grid and Tree List

Data Editing API Enhancements

We have extended the DataGrid and TreeList data editing API to better support declarative data bindings and to address new data editing scenarios. You can now:

Pivot Grid

Export to Excel API

With our new PivotGrid API you can:

  • Customize cell data and appearance as needed.
  • Export PivotGird Field Panel configuration data.
  • Add additional worksheets with custom data.
  • Display PivotGrid export progress/status.
  • Protect Excel cells and worksheets with passwords.
Export to Excel - Pivot Grid | DevExpress

Scheduler

Virtual Scrolling

We've enhanced both the performance and usability of the DevExtreme Scheduler. A new Virtual Scrolling mode is available for Day and Week views. When virtual scrolling is enabled, the Scheduler renders only visible grid cells and appointments.

Scheduler - Virtual Scrolling | DevExpress

Scheduler – TimeZone Editor Enhancements

We improved the usability of our TimeZone Editor. Now it is represented as a single drop-down list that contains all time zones from IANA database sorted by UTC offset. We also added a search box and enabled “lazy loading” to improve the overall user experience.

Scheduler - TimeZone Editor Enhancement | DevExpress

Recurrence Rule Enhancements

We replaced our custom Recurrence Engine with the RRule open source library. DevExtreme Scheduler now supports the iCalendar RFC 2445 specification.

Diagram

Partial Updates

Our Diagram for ASP.NET Core can now partially update its UI in response to external changes to its data source. As you might expect, data editing will no longer require a full reload on data change.

Data Binding Enhancements

Our new nodes.customDataExpr and edges.customDataExpr options allow you to link additional data source fields to Diagram elements. Linked data is replicated in the Diagram's change history. As such, the Diagram control can undo/redo changes made to additional data fields.

Toolbox Customization Options

Toolbox Shape Templates

New Diagram templates include:

Autosize Shapes

When used in data-bound mode, our Diagram control now automatically resize shapes to fit shape text.

Enable our new keepRatioOnAutoSize option to retain the aspect ratio for a custom shape after resize operations.

To prevent auto-size operations, disable the autoSizeEnabled option.

User Restrictions

New Diagram options allow you to control modifications made to Diagram shapes and connectors. These new options include:

  • Add Shape
  • Change Connection
  • Change Connector Points
  • Change Connector Text
  • Change Shape Text
  • Delete Connector
  • Delete Shape
  • Resize Shape

We created a new requestEditOperation event to facilitate custom implementations. Handle this event to restrict user actions as needed.

Improved Connector Routing

We improved the algorithm used to compute orthogonal connector routing (to prevent crossing shapes).

Gantt

Context Menu Customization API

Our new Gantt API allows you to create and customize its context menu. You can add predefined menu items or create custom items as needed.

Custom Task Tooltips

This release includes a new taskTooltipContentTemplate option. Use this option to display custom content within task tooltips.

Task Edit Dialog Customization

The new TaskEditDialogShowing event fires before the Task Edit dialog is displayed. Handle this event to hide or turn desired fields to read-only.

New Client-Side API

We implemented 20+ new client-side events (dependencyDeleting, focusedTaskChanging, focusedTaskChanged, taskMoving, resourceInserting/Deleting/Updating, etc.) and over 15 new methods (insertDependency, insertTask, etc.).

File Manager

File Upload via Drag & Drop

DevExtreme File Manager widget supports file upload operations using drag & drop.

File Upload via Drag & Drop | DevExpress

File Upload - Custom Drop Zone

A new dropZone option allows you to specify a custom drop zone.

File Upload - Custom Drop Zone | DevExpress

API Enhancements

HTML/Markdown Editor (CTP)

Tables

Our HTML/Markdown Editor can now render tables. New API and UI options allow you to execute multiple table-related tasks (create/delete a table, insert/delete a row, column, or cell) with ease.

HTML/Markdown Editor - Tables | DevExpress

Data Visualization

Map and Pie Chart Annotations

Both our Vector Maps and Pie Chart now support Data Annotations.

Map and Pie Chart Annotations - DevExtreme | DevExpress

Axis Label Templates

With this release, you can use templates to render images or custom content within chart axis labels.

Axis Label Templates - DevExtreme | DevExpress

Themes

SCSS Support

We migrated existing DevExtreme LESS styles to SCSS and made them modular. You can now integrate DevExtreme SCSS styles into your application build process. This change also allows you to precisely customize CSS styles and minimize resulting CSS bundles.

DevExtreme SCSS styles fully support the SCSS module system.

Angular Components

Authentication UI Template

We extended our Angular Application Template with new Sign Up and Reset/Change Password form templates. We also implemented corresponding client-side user workflows so you can integrate our new Angular Authentication Forms with your backend authentication API.

Authentication UI Template - Angular Components | DevExpress

Vue Components

Vue 3 Support

Authentication UI Template

We extended our Vue Application Template with new Sign Up and Reset/Change Password form templates. We also implemented corresponding client-side user workflows so you can integrate our new Vue Authentication Forms with your backend authentication API.

Authentication UI Template - Vue Components | DevExpress

React Components

API Enhancements

We accompanied our React component state properties with corresponding onXXXChange events. For instance, a ‘value’ property has a corresponding ‘onValueChange’ event. As a result, you can now handle state changes easier.

Native React Grid

Inline Edit Form - Editing in Detail Row

With this release, you can use our TableRowDetail and EditingState plugins and integrate the Inline Edit Form to modify cell values.

Native React Grid - Inline Edit Form - Editing in Detail Row | DevExpress

Native React Scheduler

Enhanced Rendering for Overlapped Events/Appointments

We improved the readability of our React Scheduler by using available screen space more efficiently. In Week and Day views, overlapped appointments are distributed evenly across cell width and consume as much space as possible. If enough room exists to display appointment title and dates, appointments are layered one above another.

Native React Scheduler - Enhanced Rendering for Overlapped Events/Appointments | DevExpress