DevExtreme (Angular, React, Vue, jQuery) Roadmap 2020 - Your Vote Counts

DevExtreme Team Blog
10 December 2019
2020 is right around the corner and we need your help to both shape and define next year’s roadmap and want to hear from you. Please take a moment to review the features below and cast your vote for the capabilities you consider most important for your development needs.
Note: The features below should be available for Angular, React, Vue, and jQuery simultaneously. Several features are framework-related and described in separate sections within this blog post.

Official Product Release Schedule

We previewed (CTP) several major components in 2019. We expect to officially ship these products in 2020 and need your help to finalize our feature list.

DevExtreme Gantt Control for Angular, React, Vue and jQuery

We will officially ship our JavaScript Gantt component in 2020. We hope to extend its capabilities with the following features:
  • Localization support
  • Touch device support
  • Integrated toolbar
  • Current Time Maker that indicates the current date and time within the Gantt region
  • Custom colors for Task nodes within the Gantt area
  • Customizable Context Menu
  • Customizable Task Details dialog (used to edit tasks)
  • Data validation support

DevExtreme Diagram for Angular, React, Vue and jQuery

Like our Gantt component, we expect to officially release our JavaScript Diagram components in 2020. New features will include:
  • Localization support
  • API to manage changes to the Diagram’s data model
  • Template-enabled custom shapes
  • Improved Diagram UI with an additional workspace inside the control
  • Support for dash, dot, and other types of lines for shapes and connectors
  • Auto-creation and shape connection once a connector is generated
  • Drawing-related performance enhancements
  • Support for touch-first devices

DevExtreme File Manager for Angular, React, Vue and jQuery

We will officially ship our JavaScript File Manager component in 2020. We hope to extend its capabilities with the following features:
  • Upload and download files via our ArrayFileProvider
  • Declarative column customization using component options
  • New API to manage file and directory selection and control end-user actions on UI elements
  • Intuitive file management error handling support
  • Notification and Progress panel UX enhancements

DevExtreme HTML/Markdown Editor

Table Support

As you may already know, we selected the most popular open-source implementation (Quill) as the core for our jQuery, React, Angular and Vue HTML/Markdown Editors. We constructed the control’s user interface with DevExtreme components (theme support, keyboard navigation, customization, etc).
Quill 2.0 was expected in 2019 and was purported to offer a new API with table support. Unfortunately, Quill 2.0 has yet to be released. We now need your help to make the best possible decision about table support within our editor.

Upload Images via a Form, Drag-and-Drop, and Copy/Paste

We couldn’t deliver this feature in 2019. We have prepared a custom solution you can use today if this feature is important for you. We expect to integrate this feature within the control in 2020.

DevExtreme Architectural Enhancements

For the last couple of years, we worked to extend our product line’s features and delivered multiple new products to address a broad range of usage scenarios. Throughout next year, we will dedicate significant resources to evolving existing capabilities and improving our product line’s architecture:

Reduce JS/CSS Bundle Sizes

Smaller production bundles (or code chunks) offer the following benefits:
  • Less time to compile application source code.
  • Less time to deploy applications to hosting servers.
  • Less time to deliver apps to end-user web browsers (better UX).

CSS Modules

Prior to v19.2, you had to include the complete DevExtreme CSS bundle in your app (this bundle contained styles for every single component, even if you didn’t use them all). With v19.2, we gave you the ability to create custom style bundles and specify which components to include in the CSS bundle. As a developer you need not care about referencing proper CSS manually. Our components will reference the necessary styles and the final CSS bundle will automatically include a minimized style set.

Improved Code Splitting

Code Splitting allows web developers to group application code into multiple small bundles and reduce initial load time. To help maximize its benefits, we hope to organize DevExtreme into smaller/functionality specific modules (for instance, we want to give you the option to use a read-only Data Grid without bundling any of its data editing features).

Efficient Tree Shaking

Tree shaking is the process of removing unused code during the bundling process. We plan to refactor our codebase to allow JS bundling tools to tree-shake DevExtreme products more efficiently.

Reduced Codebase Size

We believe we can reduce DevExtreme’s library size without affecting functionality:
  • Refactor DevExtreme Core to simplify/shrink component implementation.
  • Remove fallbacks and redundant features that have been addressed by new browsers or can be implemented more efficiently.
  • Extract old browser fallbacks into separate JS modules.

Rendering/Update Enhancements

Incorporate Virtual DOM Rendering

As you may know, React and Vue utilize Virtual DOM to efficiently update DOM in response to end-user actions (or other events). Though our React and Vue Components don’t use this technique, they demonstrate outstanding performance across a variety of usage scenarios. We hope to further improve performance and to leverage Virtual DOM in 2020 (including the Server-Side Rendering support in React and Vue applications).
Note, this feature implies unpredictable technical challenges and might take more than two release cycles to complete.


We usually incorporate accessibility with each new DevExtreme feature/component. Some of you create products for government or other sectors that require strict compliance with existing accessibility standards such as Section 508 and Web Content Accessibility Guidelines (WCAG). We will compile and publish the necessary documents/materials/references for those that must meet compliance specifications/standards.

Improved Responsiveness/Adaptivity

We plan to create and publish a fully responsive real-world DevExtreme application built from ground up. We want it to look and work perfectly on any screen – from wide desktops and tablets to mobile phones. Adaptability enhancements can be applied to many components from Toolbars and Menus to our DevExtreme Scheduler and DataGrid.

DevExtreme DataGrid/TreeList

New Export to Excel API

Export to Excel will be made more flexible and robust approach via the ExcelJS library.
Our new export capabilities will give you granular control over the Excel file generation process. We’ll do our best to make the migration process as smooth as possible. For a limited time, both options (old and new) will work side by side.
We expect to deliver the following features prior to official release:
  • Introduce transparent (WYSIWYG) export of our DataGrid’s column format.
  • Export the DataGrid’s filter configuration as Excel worksheet column filters.
  • Fully document our new export to Excel API.
  • Demonstrate popular usage scenarios via technical demos.
Once we finish with the DataGrid, we’ll extend the new Export to Excel API to our JavaScript PivotGrid and TreeList controls.

Remote Validation Support

We’ll extend Asynchronous Validation Rule support in DataGrid/TreeList cells in row and batch editing modes.

API Enhancements

We plan to improve the design-time experience of both our DataGrid and TreeList when using MVVM-like reactive frameworks such as React, Vue, and Angular. You’ll be able to work with the component state via bindings/properties rather than via instance methods. For instance, you’ll be able to bind expanded detail row IDs in the markup instead of calling the ‘expandRow’ and ’collapseRow’ methods.

UI Components

New Splitter Component

A Splitter allows you to divide a workspace into multiple panels (with dynamic widths). An end-user can use touch or a pointing device to resize panels at run-time.

DevExtreme TreeView Drag-and-Drop Enhancements

Node Reordering

Change parent-child relationships of TreeView nodes via drag-and-drop.

Cross-Component Nodes Drag-and-Drop

Move a node from one hierarchy to another using drag-and-drop.

Editors & Form Layout

Label Animations

According to Material Design Guidelines, editor placeholder text can turn into a label once the editor obtains focus. We plan to support this feature.

DevExteme Scheduler

Our Scheduler will inherit the architectural enhancements mentioned above. If you have specific requirements, please list your needs below:

Data Visualization

Annotations in Maps, Pie and Polar Charts

We recently introduced chart annotations. We plan to extend this capability to Maps, Pie and Polar Charts.

Custom Position of Chart Axes

We planned to release this feature in 19.2 but failed to do so. Please, refer to our discussion page for more information.

Additional Customization Options

We’ll allow you to use templates to render images (or other custom content) within chart axis labels.

Application Templates

Authentication UI Templates (Angular, React, Vue)

We want to extend our existing Login Form template with a new Sign Up, Reset/Change Password form template. We will also implement corresponding client-side user workflows so you can integrate our forms with your backend authentication API.

Native React Components

Native React Grid

Export to Excel

Export the contents of the DevExtreme React Grid to Excel (including options to configure formatting).

Keyboard Navigation

We’ll allow your users to navigate through Grid cells via the keyboard.

Batch Editing

A user will be able to edit, create or delete multiple records and then save or cancel changes in a single batch operation.

Popup Editing

We’ll allow users to edit a grid record in a separate popup form.

Detail Editing

Your users will be able to edit records within an inline detail form.

Row Reordering

We’ll create a plugin that allows a user to alter record order via drag-and-drop.

Native React Scheduler

Resources & Grouping

Assign resources to appointments and visualize appointments grouped by resources.

Compact View

We’ll allow you to group multiple appointments into a single item if space is limited (if we are unable to display all appointments simultaneously).

Agenda View

A compact appointment list view - A good choice for appointment visualization on mobile devices.

Native React Chart

As always, we thank you for your continued support and for choosing our JavaScript components for your development needs. Should you wish, please comment below and tell us more about your business needs.

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.
No Comments

Please login or register to post comments.