Roadmap

Last updated: 19-SEP-2022


The information contained within this Roadmap 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 or use this information to help make a purchase decision about Developer Express Inc products.

New Features

DataGrid - Export to PDF

Angular React Vue jQuery
Released in v22.1

Last year we added a PDF Export feature to our JavaScript DataGrid (as a CTP). We plan to add the following new features and officially release this capability in 2021-2022:

  • WYSIWYG cell data export
  • Fit-to-page option
  • Multi-page export
  • Text Wrapping
  • Progress Indication
  • Cell Content, Format, and Appearance Customization options
  • RTL Support

If you have already tried or plan to try our new PDF Export API and want to share your feedback, please refer to this discussion page.

HTML/Markdown Editor

Angular React Vue jQuery
Released in v22.1

This year, we'll incorporate the image upload capabilities in our HTML/Markdown Editor.

If you want to share your requirements, feel free to leave your feedback in the following discussion pages: Upload Images and Table Management Enhancements.

API Enhancements

Angular React Vue jQuery
Preview available in v22.2

You may have already used the ‘cancel’ flag within the Popup’s onHiding/onShowing events to abort an operation (based on specific conditions). Some of you have asked us to calculate conditions asynchronously. For instance, when you must wait until an end-user approves/rejects a request. For such cases, some of our components support the ‘Promise’ type for the ‘cancel’ flag value. We plan to support Promises in the Popup’s onHiding/onShowing events in the same manner.

JavaScript
onHiding: (e) => {                            
    e.cancel = showConfirmation("Are you sure?"); // returns a Promise
}

The Popup’s show/hide methods return a Promise object that is resolved once the operation is complete. Users have asked for some flexibility in this regard – specifically to reject the Promise if an event handler cancelled operation via the ‘cancel’ flag. We plan to implement this behavior as well.

JavaScript
try {
  await popup.hide();
  // closed successfully
}
catch (e) {
  // closing was cancelled
}

TagBox – Extra Events to Submit Custom Items

Angular React Vue jQuery

DevExtreme TagBox allows end-users to add custom items.Once a user enters custom text and presses Enter, the newly created item is submitted to the data source. To accelerate the data entry process, users have asked to auto-submit custom items when TagBox loses focus (when a user presses the Tab key or clicks a form’s Submit/Save button). We’ll extend the API to enable these usage scenarios.

Slider & RangeSlider - Delayed 'valueChanged' Event

Angular React Vue jQuery

When an end-user starts dragging a Slider’s handle, the component immediately raises the valueChanged event. So, a series of events is raised before the user releases the handle. We’ll introduce an additional mode to raise the valueChanged event only once/at the end of user interactions.

JavaScript
callValueChange: 'onMoving|onMovingComplete''

UI/UX Customization Enhancements

Form – Custom Label Template

Angular React Vue jQuery

At present, our Form can only display text labels. Some of our users need to display images or other rich content within an editor’s label. To address this requirement, we plan to introduce custom label templates to our product line. We’ll leverage a technique used in many DevExtreme components – techniques that allow developers to customize an app’s UI. To help illustrate the benefits of this feature, the form labels below are enhanced with the use of icons.

Accordion – Custom Title Template for Individual Items

Angular React Vue jQuery
Preview available in v22.2

DevExtreme Accordion allows you to specify a shared custom template for all item titles. In certain instance, you may need to use different templates for each item. We plan to implement this feature, so you can specify title templates at the item level. For instance, in the example below the very first item has a subtitle. Of course, you can add buttons, images, or any custom content within the Accordion:

Editors – Custom Validation Message Position

Angular React Vue jQuery
Preview available in v22.2

If editor validation fails, a message is displayed below the editor. Users have asked us to offer more flexibility in this regard and allow the control to display validation messages above the editor or on the left/right side. We’ll introduce the corresponding ‘validationMessagePosition’ configuration option in our next major update.

Calendar – Display Week Numbers

Angular React Vue jQuery

Another highly requested UI enhancement is displaying week numbers within our Calendar component. You will be able to activate this feature via our new ‘showWeekNumbers’ option in the component configuration.

CheckBox – Set Indeterminate Value by End-Users

Angular React Vue jQuery
Preview available in v22.2

DevExtreme CheckBox supports indeterminate state. It is enabled by setting the component value to null or undefined. Once an end-user clicks the CheckBox, it’s impossible to get back to the indeterminate state. Some of our users have asked us to introduce a way to reset the value back to an indeterminate state. To achieve this, we will introduce an additional value change mode. In this mode, each click will rotate three component states – checked, unchecked and indeterminate.

Toolbar – Multiline Adaptivity Mode

Angular React Vue jQuery
Preview available in v22.2

If there is not enough space on a given device, our Toolbar can automatically hide items in a dropdown menu. End-users can open this menu to invoke actions associated with the hidden items. We plan to add an additional adaptivity mode. In this mode toolbar items remain visible by wrapping to the next line. So, end-users have immediate access to all available items.

PivotGrid Export to Excel – Export Field Panel Headers

Angular React Vue jQuery

The DevExtreme PivotGrid allows you to export its content to Microsoft Excel (v20.2+). At present, exported data includes only column/row dimension values (categories) and aggregated values at intersections (numbers). To help address specific use cases, we will update our export engine so you can include dimension (field) names as well.

Guiding Principles and Development Direction

Angular React
Under Research

Your feedback helped us fine-tune our vision. The features we'll introduce in 2021-2022 depend on continued feedback/engagement with all of you – and of course available resources.

Tree Shaking & Code Splitting

Angular React Vue jQuery
ES6 modules available in v21.1 In Development

A lot of work has been done in the regard to better Tree Shaking, but much work remains to be completed for better Code Splitting. Last year we reworked DevExtreme modular system to deliver ES6 modules in DevExtreme NPM packages. The final “mile” was unexpectedly long – as issues prevented us from shipping ES6 modules inside v20.2.


Note, ES6 modules make it technically possible to efficiently tree shake code. Unfortunately, this is not enough for efficient bundle/chunk size optimization. Modules themselves need to be small and independent from one another. Large components should not be monoliths. That’s our goal for 2021-2022 - make existing modules smaller and more independent - and split large monolith components into separate modules. We don't expect to finish everything in this regard this year, but we expect to eliminate the most problematic issues. Join the discussion on ES6 modules support and share your feedback (we definitely need early testers).

“Nativeness”

Angular React Vue
Under Research

The JavaScript world evolves rapidly. As such, we must fulfill user demand whenever a popular JS framework appears or an existing framework receives a major update. While we want to ship products as soon as possible, we also want to deliver products of the highest possible quality.

A few years ago, we decided to wrap existing JS components for Angular, React and Vue so you can leverage our 70+ JavaScript components with your framework of choice immediately. Now we want to go even further and eliminate the perceived disadvantages of ‘wrappers’. We are still at the research stage and we’ll be posting updates on this particular topic once we have something relevant to share.

As it relates to “nativeness”, we have three specific objectives for DevExtreme:

Native API & Lifecycle

Our current API allows you to implement almost any usage scenario, but in some instance, our API may not “feel” native. Sometimes the API requires direct DOM access or instance method calls instead of declarative bindings. Sometimes you need to use DevExtreme-specific events instead of the target framework’s lifecycle events. We want to address all these issues and deliver native declarative APIs and support native lifecycles.

Native Data Binding

DevExtreme ships with a powerful data layer that encapsulates all the complexity of client-side data processing and remote HTTP request handling. This notwithstanding, in some instance, you may need to bind components directly to your local application state. This state can be represented by static arrays, observable arrays, Redux or NgRx store, etc. We plan to improve the developer experience in this regard and deliver a straightforward solution to address these usage scenarios.

Native Rendering

Each JS framework comes with its own philosophy and core technical foundation. React and Vue are based on Virtual DOM, Vue and Angular use observables, etc. Multi-thread rendering via Web Workers is on the horizon. All these techniques offer benefits - from better performance to server-side rendering support. While DevExtreme wrappers leverage some of these benefits, we can do more. We are researching ways to deliver all of them via a fully native internal component architecture. We’ve already got some promising results in this regard, but still have some core issues to address before we can share our solution with you.

If the ”nativeness” related enhancements are important to you and you want to participate in early testing and technical discussions, please let us know via the form below or simply track this GitHub thread.

DevExtreme Reactive (Native React)

If you are not familiar with this product, DevExtreme Reactive is a separate set of components built from the ground up for React. It currently includes native React Grid, Scheduler and Chart components. In the context of what we said above regarding “nativeness”, the future of this product line will be shaped by successes in mentioned in the section above. If we prove the viability of our "nativeness” concept, we’ll be able to substitute DevExtreme Reactive components with more powerful native components for React - a package that will include more than 70 UI controls. Of course, if we go the “nativeness” route, we’ll do our best to make the migration process as smooth as possible for those of you who already committed to DevExtreme Reactive. We expect to support our Reactive components and to introduce minor enhancements in 2021. We don’t plan on any major updates to this product line in 2022.

TypeScript

Angular React Vue jQuery
In Development

Another key area of focus will be TypeScript support. Thanks to your feedback, we know what to do and which use cases to address. First, we want to replace ‘any’ type with specific types wherever possible. Second, we expect to make event arguments strongly typed and extract these types/interfaces so you can use them in your projects. If you want to forward specific issues as they relate to TypeScript, feel free to comment in this thread.

Documentation

Angular React Vue jQuery
In Development

This year we plan to allocate more resources to documentation. The mix of technologies on our website is confusing, so we plan to have dedicated websites for each JS framework we support. For instance, if you target React, you won’t be distracted with Angular or ASP.NET-related examples or documentation topics. Additional examples and demos for each framework are also on the horizon.