We are two months away from our next major update (v20.1). The purpose of this post is to preview upcoming features and give you the opportunity to test new functionality before we wrap up our current dev cycle.
Please, use the
DevExpress Support Center (or the links to individual GitHub
discussion pages) to share feedback with us. You can install the ‘devextreme@20.1-next’ NPM package or use the online demo links below to explore our newest features.
Early Access and CTP builds are provided solely for early testing purposes and are not ready for production use. This build can be installed side by side with other major versions of DevExpress products. Please backup your project and other important data before installing Early Access and CTP builds.
This EAP may not include all features/products we expect to ship in our v20.1 release cycle. As its name implies, the EAP offers an early preview of what we expect to ship in two months.
DevExtreme DataGrid/TreeList
Remote Validation Support
We have extended Asynchronous Validation Rule support in DataGrid/TreeList cells when using row and batch edit modes.
Please, refer to the discussion page for more information.
New Export to Excel API (RTM)
v20.1 will be the official release of our new Export to Excel API based on the ExcelJS library. Use our Early Access Preview (EAP) build on NPM to explore our newest features (via our demos or your own project). The EAP build includes the features listed below.
CustomizeCell Callback
The new 'exportDataGrid' API allows you to use the 'customizeCell' callback and fully control exported cell value and format. Within the callback, you can access the original DataGrid Cell object to implement WYSIWYG or custom Excel Cell appearance.
Column Bands Export Support
DataGrid can now export banded header cells.
Cell Text Alignment, Wrapping and Font Settings
The ‘alignment’ and ‘wrapText’ settings of DataGrid source cells are now applied to exported Excel cells. 'Group', 'header', 'groupFooter', and 'totalFooter' cells are exported using bold highlighting:
DataGrid’s Column Format Support
DataGrid cell format is now applied to exported Excel cells. You can specify a custom format when necessary.
DevExpress.excelExporter.exportDataGrid({
customizeCell: function(options) {
const { gridCell, excelCell } = options;
if(gridCell.rowType === ‘data’) {
if(gridCell.column.dataField === 'Phone') {
excelCell.numFmt = '[<=9999999]###-####;(###) ###-####';
}
}
Cell Image Export Support
You can now export DataGrid cell images into your Excel worksheet.
Integrated Excel Filtering Support
You can now enable built-in Excel column filters using the new ‘autoFilterEnabled’ option:
DevExpress.excelExporter.exportDataGrid({
autoFilterEnabled: true,
...
})
Integrated Export Status Panel
The new status panel is automatically displayed until DataGrid export operations are completed.
DevExteme 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).
Adaptivity Enhancements
We updated our Scheduler Appointment Form to better match screen size.
NOTE: If you run UI screenshot tests or if you customize the form via CSS, you might need to update your sample screenshots and custom CSS rules.
API Enhancements
We have introduced a new ‘allowEditingTimeZones’ option. You no longer need to implement a custom ‘
onAppointmentFormOpening’ event handler.
DevExtreme Diagram
Template-Enabled Custom Shapes
With this release, you can introduce custom shape content using an SVG element. The SVG element can contain images, text, and hyperlinks
The customShapeTemplate option defines a common template for all shapes in the widget. The template option defines a template for an individual shape.
API Enhancements
The release version of our JavaScript Diagram control includes new API to handle user actions. You can use the onItemClick, onItemDblClick, and onSelectionChanged events to handle user interactions within the Diagram.
New Shape and Connector Lines
We have added dash and dot line types that can be used for shapes and connectors.
Context Toolbox
The DevExtreme JavaScript Diagram displays a context toolbox when you draw a connector from a shape and release it without connecting it to another shape. The toolbox allows you to create a shape at the end of the connector. This makes diagram generation faster and easier. Use the contextToolbox option to customize the context toolbox content.
Support for Mobile Devices
Our Diagram’s layout and UI is adapted for use on mobile devices. The new interface helps users work with a diagram on devices with a small touch screen more effectively.
Enhanced Drawing Performance
We optimized our Diagram’s inner shape drawing algorithms to improve performance when using a large number of shapes.
DevExtreme File Manager
Upload and Download for In-memory JSON data
DevExtreme FileManager gives you the ability to upload and download files into in-memory storage without requests to your server. To enable this feature:
1) Register the JSZip library in your project.
2) Connect the FileManager to the ObjectFileSystemProvider.
3) Enable “upload” and “download” permissions within the FileManager.
File Manager API enhancements
We reworked the current FileManager API to make it clear and consistent.
File System Providers modularity
We extracted our file system providers to separate modules. You do not need to have the entire FileManager code on a page if you want to use a stand-alone file system provider. Import the corresponding “devextreme/file_management” module and use the provider without the FileManager. Note that extracted file system providers have new names.
DevExtreme TreeView
Selection API Enhancements
We have extended our TreeView node selection API based on your feedback. The new ‘
getSelectedNodes’ and ‘
getSelectedNodeKeys’ methods allow you to obtain selected nodes easily.
HTML/Markdown Editor
Adaptivity Enhancements
The toolbar used for our
HTML/Markdown Editor can now wrap to the second line if sufficient rendering space does not exist for individual items.
Data Visualization
Polar Chart Annotations
We have added chart annotation support to Polar Charts.
Custom Position of Chart Axes
You can now specify a custom position for your chart axes.
Native React Components
Native React Grid - Export to Excel
DevExtreme
React Grid now supports export to Excel. Extensive export customization options are available.
Native React Scheduler - Resources & Grouping
We added resources support to our DevExtreme React Scheduler. Assign resources to appointments and visualize appointments grouped by resources or by dates.
Free DevExpress Products – Get Your Copy Today
The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the
DevExpress Support Center at your convenience. We’ll be happy to follow-up.