DevExtreme JavaScript - Early Access Preview (v20.1)

DevExtreme Team Blog
10 March 2020
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 onItemClickonItemDblClick, 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.
Please, refer to the discussion page for more information.

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.
Please, refer to the discussion page for more information.

Data Visualization

Polar Chart Annotations

We have added chart annotation support to Polar Charts.
Please refer to the following discussion page for more information.

Custom Position of Chart Axes

You can now specify a custom position for your chart axes.
Please refer to the following discussion page for more information.

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.
Matt Holliday
Matt Holliday
wewew
12 March 2020
Vladislav Kiselev
Vladislav Kiselev

Will ExcelJS imported by DevExtreme be available for use outside DevExtreme?

12 March 2020
Alex B (DevExpress)
Alex Bykov (DevExpress)

@Vladislav Kiselev 

Sure, you can use ExcelJS outside of DevExtreme components to create Excel worksheets.

13 March 2020
MSh
M Scott

Please consider Folder Upload (entire directory upload with all files and sub-directories) and also a PDF Viewer in your component collection.

Thank you

16 March 2020
Tomas Rimkus
Tomas Rimkus

@M Scott

You can just use browser's built-in pdf viewer in an iframe on desktop browsers and you can use Mozilla's PDF.js for showing pdf for mobile browsers (or simply download the PDF on mobile browser instead of showing it in-line). I don't think there is any need for pdf viewer component. 

16 March 2020
Vladislav Kiselev
Vladislav Kiselev
@Alex B, I mean should I import ExcelJS package by myself, or it will be possible to use one imported by DevExtreme?
17 March 2020
Alex B (DevExpress)
Alex Bykov (DevExpress)
@Vladislav, DevExtreme doesn't import ExcelJS automatically. If you want to enable export to Excel in our DataGrid, you need to import ExcelJS manually. So, the same instance of the library is used by your custom code and by DevExtreme components.
19 March 2020

Please login or register to post comments.