DevExtreme (Angular, React, Vue, jQuery) - 2020 Roadmap

DevExtreme Team Blog
29 January 2020
First and foremost – our thanks to everyone who reviewed our preliminary DevExtreme 2020 Roadmap last year. Your feedback helped us refine our development plans and to finalize our 2020 Roadmap.

Should you have any questions about our 2020 Roadmap or if you’d like to discuss your development needs further, please post a comment below. We’ll be happy to follow up.

Important Note: The features listed below should be available for Angular, React, Vue, and jQuery simultaneously. Exceptions are highlighted.

Official Product Release Schedule

We released community tech previews of several major components in 2019. We expect to officially ship the following products in 2020. 

DevExtreme Gantt Control for Angular, React, Vue and jQuery (v20.1)

We will officially release DevExtreme Gantt in our first major release of 2020 (v20.1). DevExtreme Gantt will ship with the following new features: 
  • Localization support
  • New toolbar with commands to edit default items and add custom items
  • New Current Time Marker to indicate current date and time
  • Data validation support
  • Custom task color support
  • Touch device support
In our second release of 2020 (v20.2) we’ll add the following capabilities to our Gantt Control for Angular, React, Vue, and jQuery:
  • Export the Gantt content to PDF, PNG, etc.
  • Template support (Gantt chart tasks)
  • Context menu customization
  • Task Detail dialog customization.

DevExtreme Diagram for Angular, React, Vue and jQuery (v20.1-v20.2)


 We will officially release DevExtreme Diagram in 2020. v20.1 will include the following features:
  • Performance enhancements
  • Custom shape templates
  • New UI that offers additional workspace for a document. This should improve user experiences on mobile and tablet devices.
  • Dash, dot, and other types of lines for shapes and connectors
  • Support for touch devices
v20.2 will include the following new features:
  • Toolbar and context menu customization
  • New API to refresh Diagram document when a data model is changed outside the component
  • Text validation in shapes and connectors
  • Automatically resize shapes based on text content
  • New API to restrict end-user operations such as shape resizing, dragging, adding or removing shapes, dragging shapes out of container, etc.
  • Shape rotation support

DevExtreme File Manager for Angular, React, Vue and jQuery (v20.1)

Our first release of 2020 (v20.1), will include a production version of the JavaScript File Manager component for Angular, React, Vue and jQuery. It will include the following new 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
  • Item hover and selection within the thumbnail view
  • Touch device support enhancements

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 evolve existing capabilities and improve our product line’s architecture:

Reduce JS/CSS Bundle Sizes (v20.2)

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).

SCSS Support 

We will migrate existing DevExtreme LESS styles to the more modern SCSS format and make them available to everybody. You will be able to integrate DevExtreme SCSS styles into your application build process. This will allow you to precisely customize CSS styles and minimize resulting CSS bundles. The SCSS team recently announced a new-generation module system. We plan to fully support this new system. 

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.

Improved Responsiveness/Adaptivity (v20.1-v20.2)

We will 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 (v20.1)

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.

Remote Validation Support (v20.1)

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

API Enhancements (v20.1-v20.2)

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.
We will allow you to track and control the following DataGrid and TreeList states:
  • Expanded group rows
  • Expanded master-detail rows
  • Expanded adaptive rows
  • DataSource properties (items, totalCount, summary)
  • Load panel visibility
  • Validation state (invalid cells, error text and position)
In addition, we plan to introduce the following API enhancements:
  • Add new editing-related ‘saving’ and ‘cancel’ events
  • Allow you to manipulate DataGrid/TreeList data without using a CustomStore

DevExtreme PivotGrid

New Export to Excel API (v20.2)

We received a lot of positive feedback about the new Export to Excel API mentioned in the DataGrid section above and expect to extend it to DevExtreme PivotGrid in 2020.

UI Components

Editors & Form Layout

Label Animations (v20.1)

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

DevExtreme HTML/Markdown Editor

Table Support (v20.2 or later)

DevExtreme HTML/Markdown Editor (CTP) core is based on the open-source implementation known as Quill. 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. Since we consider table support as a must-have feature, we can’t ship RTM before we find a way to implement tables. If Quill 2.0 is not released or we can’t deliver this capability with Quill 1.x, this feature may not be released in 2020.

Upload Images via a Form, Drag-and-Drop, and Copy/Paste (v20.2 or later)

Though we were unable to deliver this feature in 2019, we have prepared a custom solution you can use today. We expect to integrate this feature once we resolve the table support issue mentioned earlier.

DevExteme Scheduler

Hour Values within the Recurrence Form (v20.1)

We will allow users to specify the ‘hour’ portion of a recurrence pattern within the DevExtreme Scheduler Recurrence Form.

Sticky Group/Resource Names (v20.1)

When scrolling a very wide or a very high group, names can exceed visible boundaries. With our new implementation, sticky names can remain visible during scroll operations.

Virtual Scrolling (v20.2)

To help improve overall performance and usability, we will add a new virtual scrolling mode to our Scheduler component. When enabled, only visible appointments will be rendered.

Data Visualization

Annotations in Maps, Pie and Polar Charts (v20.1)

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

Custom Position of Chart Axes (v20.1)

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 (v20.2)

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) (v20.1-v20.2)

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 (v20.1)

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

Row Reordering (v20.1)

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

Popup Editing (v20.1)

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

Detail Editing (v20.1)

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

Keyboard Navigation (v20.2)

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

Batch Editing (v20.2)

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

Native React Scheduler

Resources & Grouping (v20.1)

Assign resources to appointments and visualize appointments grouped by resources.

Compact Appointment View (v20.2)

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).

Timeline View (v20.2)

We will introduce a new type of view to display schedule timelines. You can find an example of a timeline here.

The information contained within this blog post details our current/projected development plans. Please note that this information is being shared for INFORMATIONAL PURPOSES ONLY and does not represent a binding commitment on the part of Developer Express Inc. This roadmap and the features/products listed within it are subject to change. You should not rely on or use this information to help make a purchase decision about Developer Express Inc products.

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
20 comment(s)
Piotr Stola [DevExpress MVP]
Piotr Stola [DevExpress MVP]
Great features list - can’t wait to use them on battle filed. You are making development such a pleasure!
Btw responsive real-world DevExtreme example - are you planning to release it also in ASP.NET Core 3+ ?
29 January 2020
Lars Ugleberg
Lars Ugleberg

Hi guys,

Can't you also implement the previewed movable divider, please? This must be an extreme simple thing to add! I have tried to use various solutions from searches on fora, but found none that doesn't break to fine look and feel of the DevExtreme library.

Best regards,

Lars

29 January 2020
Leontiev Alexey
Leontiev Alexey
when will you switch to shadow DOM?
30 January 2020
Tomas Rimkus
Tomas Rimkus
Small feature request: as an accessibility improvement you should allow expanding and collapsing data grid rows using keyboard shortcut (space bar maybe?). This should be possible with all three kinds of expandable/collapsible rows:  group rows, master-detail rows and responsive/adaptive rows.
30 January 2020
OA LodgeMaster
OA LodgeMaster

Did TreeView drag and drop and node reordering get dropped? It was mentioned in the roadmap planning post and didnt have a voting section so it looked like it was going to happen. Was really hoping we would see a built in solution for this this year.

Thanks,

Mike

30 January 2020
Jean-Francois
Jean-Francois
In our scenario we need format compatibility between desktop (winforms) and web.  We have that for reporting, dashboard  but NOT for diagramming.  Can you please consider having at least some compatibility between xtradiagram and web diagram?
30 January 2020
akapfham
akapfham
What about performance improvements? My wish would be: do not implement new features, make the existing ones perform better (especially scrolling in the DataGrid on large row and column count).
31 January 2020
Alex B (DevExpress)
Alex B (DevExpress)
> Btw responsive real-world DevExtreme example - are you planning to release it also in ASP.NET Core 3+ ?

Yes, we plan to implement it for ASP.NET Core as well.

> Can't you also implement the previewed movable divider, please? This must be an extreme simple thing to add! I have tried to use various solutions from searches on fora, but found none that doesn't break to fine look and feel of the DevExtreme library.

According to feedback we received, this simple implementation is not enough. If you encounter issues integrating existing open-source solutions such as split.js with DevExtreme, please create a support ticket. We'll be happy to help.

> when will you switch to shadow DOM?

Alexey, you mentioned Shadow DOM in your comment to our preliminary Roadmap blog-post but didn't answer my question. Let me ask it once again. What benefits do you expect from Shadow DOM in DevExtreme? Also, note that DevExtreme still needs to support IE11. This fact alone prevents us from using Shadow DOM in DevExtreme.

> Did TreeView drag and drop and node reordering get dropped?

We tend to treat our TreeView as a navigation control, not a data editor. We consider our TreeList to be a data editor. We might introduce a light version of our TreeList (via configuration) for such usage scenarios. Meanwhile, you can implement drag-and-drop within the TreeView by using examples we shared on GitHub.

> What about performance improvements? My wish would be: do not implement new features, make the existing ones perform better (especially scrolling in the DataGrid on large row and column count).

Of course, we plan to dedicate resources to performance improvements in 2020. Please share your DataGrid configuration and point to specific performance issues you've encountered. We'll be happy to work with you to address any issue. Feel free to create a corresponding support ticket or a GitHub issue.
3 February 2020
Leontiev Alexey
Leontiev Alexey

> What benefits do you expect from Shadow DOM in DevExtreme?

you can use web components, we use polymer and lit elements, 

IE11 forget 

3 February 2020
Tomas Rimkus
Tomas Rimkus

@Alex B

> What benefits do you expect from Shadow DOM in DevExtreme?

DevExtreme needs scoped style encapsulation. Right now lack of CSS style encapsulation is leading to issues like T850620 . 

4 February 2020
Tomas Rimkus
Tomas Rimkus
Also, it might be time to say goodbye to 6+ years old IE11 in 2020.
4 February 2020
Vladimir Frizen (DevExpress)
Vladimir Frizen (DevExpress)
@Jean-Francois   

We have no excuses to make - obviously, file format compatibility is important. Since so much of our work is driven by user feedback (and since users asked us to support other file formats first), we focused our energy on other file formats before considering our own. We will definitely work on file format compatibility, but we must first release the product officially and add a few major features outlined in our roadmap. I don't want to minimize the need...it's important and we have it on our todo list.
 
4 February 2020
ArtWerk
ArtWerk
Nice features, but none applies to my DataGrid heavy application.  What I really need seems simple, a maxWidth property for a column.  We routinely have grids that hide columns unnecessarily because some 20-30 character column is allocated 80% of the grid.  A maxWidth property for a column would solve that.
12 February 2020
Alex B (DevExpress)
Alex B (DevExpress)

@ArtWerk

> A maxWidth property for a column would solve that.

Why don't you use the column 'width' property? Anyway, if you want to specify maxWidth, there is a CSS-based solution. We have prepared a working example for you. If the solution is not suitable, please create a ticket in our Support Center and describe your scenario. We'll be happy to help.
13 February 2020
Kasbolat Kumakhov
Kasbolat Kumakhov

Are there any plans to enhance searching capabilities?

I've mentioned my idea in this ticked:

https://supportcenter.devexpress.com/ticket/details/T838379/selectbox-list-enhance-built-in-searching

Would be great to have this, since there are a lot of issues when implementing it in user code.

13 February 2020
Christoph Marx
Christoph Marx

Are there any plans to extend the datebox to enter timespans with values greater than 23:59 and negative values?

13 February 2020
Manuel Haas (TS)
Manuel Haas
Are the enhancements also supported for knockout as they were in v19?
14 February 2020
Customer118870
Customer118870
I am really looking forward to all Architectural Enhancements.
14 February 2020
Nicholas Hustak
Nicholas Hustak
Looking very forward to tree shaking improvements.  
14 February 2020
Vladislav Kiselev
Vladislav Kiselev

Will ExcelJS be shared for using outside DevExtreme library?

At the moment I'm using ExcelJS in my own components. It will be good to not import it twice.

14 February 2020

Please login or register to post comments.