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.
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:
- Save all modified rows in a single request - batch edit mode.
- Get notified when data editing is completed or canceled.
- Access updated/inserted/deleted rows via declarative bindings (CTP).
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.
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 – 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.
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.width - Specifies Toolbox width.
- toolbox.shapeIconsPerRow - Specifies the number of shapes in a toolbox row.
- toolbox.showSearch - Displays/hides the Diagram's Toolbox search box.
- toolboxWidthToHeightRatio - Specifies the aspect ratio of toolbox shape items.
Toolbox Shape Templates
New Diagram templates include:
- customShapeToolboxTemplate - a common template for all shapes in the Toolbox;
- toolboxTemplate - a template for an individual shape in the Toolbox.
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.
API Enhancements
- dialogTrigger - specifies the HTML element that invokes the file upload dialog.
- upload - uploads a file(s).
- abortUpload - cancels file upload.
- removeFile - removes a file.
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.
Data Visualization
Map and Pie Chart Annotations
Both our Vector Maps and Pie Chart now support Data Annotations.
Axis Label Templates
With this release, you can use templates to render images or custom content within chart axis labels.
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.
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.
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 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.
