DevExtreme JavaScript — Early Access Preview (v20.2)

DevExtreme Team Blog
25 August 2020

As you may already know, we expect to release our next major update (v20.2) in November. Before we wrap up our current cycle, we want to give you the opportunity to test new functionality and share your feedback on proposed API changes.

If you wish to evaluate our Early Access Preview (EAP), please use the DevExpress Support Center (or links to individual GitHub discussion pages) to share feedback with us. Feel free to install the 'devextreme@20.2-next’ NPM package or use our online demos to explore the capabilities of 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.2 release cycle. As its name implies, the EAP offers an early preview of what we expect to ship in two months.

DevExtreme DataGrid/TreeList

Export to PDF

v20.2 will include the first version of our PDF Export engine. We researched multiple solutions and decided to build our new client-side PDF Export atop the jsPDF library.

The current version of our PDF Export engine allows end users to export the contents of the DataGrid to a PDF document while maintaining UI configurations (sort order, grouping, band layout, summary computation, etc.). Default PDF Export settings replicate the appearance of the DevExtreme Generic theme. If required, you can easily customize the appearance of individual cells or the PDF document itself.

Our PDF Export API allows you to:

  • Customize cell content and appearance
  • Add headers and footers
  • Export custom PDF content
  • Export multiple grids into a single document

To learn more and try our PDF Export demo app, please refer to the discussion page on GitHub.

Editing API Enhancements

We have extended DataGrid and TreeList data editing APIs to better support declarative data bindings within React, Vue, and Angular applications. The following new capabilities will be available in v20.2:

  • Get or set updated/inserted/deleted rows via declarative bindings
  • Save all modified rows in a single request - batch edit mode
  • Cancel changes made to an individual row - batch edit mode
  • Get notified when editing is complete

Please note that these enhancements are not included in this EAP build. We’ve already published our API specification on GitHub and hope to preview the new API in an upcoming pre-release build. Please review our specification and let us know how we can improve our implementation to better serve your needs going forward.

DevExtreme PivotGrid

New Export to Excel API

The DevExtreme Pivot Grid will ship with a new Export to Excel API. With this API you can:

  • Customize cell data and appearance
  • Export PivotGird Field Panel configuration data
  • Add additional worksheets with custom data
  • Display PivotGrid export progress/status
  • Protect Excel cells and worksheets with passwords

Please refer to the following discussion page to learn more and share your feedback.

DevExtreme Scheduler

Virtual Scrolling

We’ve enhanced both the performance and usability of the DevExtreme Scheduler. A new Virtual Scrolling mode is available when using the Scheduler’s Day view. If enabled, only visible Scheduler grid cells are rendered.

We are currently working to extend Virtual Scrolling mode to Week and Timeline views. We expect to ship this capability in our final v20.2 release.

Please subscribe to this discussion page for notifications related to Virtual Scrolling.

Recurrence Rule Support

We replaced our custom Recurrence Engine with the RRule open source library (currently used in more than 1800 projects worldwide). As a result, DevExtreme Scheduler now supports the iCalendar RFC 2445 specification.

Learn more here.

DevExtreme Diagram

Partial Updates

Our JavaScript Diagram can now partially update its UI in response to external changes in its data source. As you might expect, data editing will no longer require a full reload on data change.

Data Binding Enhancements

Our new nodes.customDataExpr and edges.customDataExpr options allow you to link extra fields (from a data source) to Diagram elements. Linked data is replicated in the Diagram’s change history. As such, the Diagram can undo/redo changes made to additional data fields. You can also use this new API to replicate custom element data when copying this element.

Please, refer to this discussion page to learn more about the new data binding enhancements and partial updates.

New Toolbox Configuration Options

We extended the Diagram’s Toolbox customization options. You can now specify toolbox width (toolbox.width), set the number of shapes displayed within a toolbox row (toolbox.shapeIconsPerRow), and hide the Toolbox search box (toolbox.showSearch). A new toolboxWidthToHeightRatio property allows you to modify the aspect ratio of toolbox shape items.

Toolbox Shape Templates

We introduced a new API for shape templates within the toolbox. Use the customShapeToolboxTemplate option to create a common template for all shapes and the toolboxTemplate option to set a template for an individual shape.

DevExtreme Gantt

Context Menu Customization

Our new contextMenu.enabled option allows you to disable/enable the Gantt context menu when appropriate. With the new contextMenu.items option, you can customize Gant context menu items (add, remove and reorder items, customize default item behavior, etc.).

To review the API usage examples and share your feedback, please refer to the following discussion page.

Editing API Enhancements

This release includes new client-side events designed to improve the editing process. Our JavaScript Gantt component invokes these events after a task, a resource or a dependency is modified:

  • startCellEditing and endCellEditing
  • taskInserting, taskDeleting, taskMoving, taskEditDialogShowing, taskUpdating
  • dependencyInserting and dependencyDeleting
  • resourceInserting and resourceDeleting
  • resourceAssigning and resourceUnassigning

Each event argument includes a cancel property (to cancel an action). For instance, you can prevent the display of the default dialog within the taskEditDialogShowing event handler or you can switch edit mode in the startCellEditing event handler. All these event arguments include values and newValues properties so you can access both original and modified object values.

Live examples are available on the corresponding discussion page.

Data Visualization

Annotations in Maps, Pie

We added Data Annotations to DevExtreme Vector Maps.

You can review supported use cases and our new API here:

Axis Label Customization

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

Please, refer to this discussion page to learn more about the new axis label customization API.

DevExtreme Architectural Enhancements

SCSS Support

We migrated existing DevExtreme LESS styles to the more modern SCSS format and made them modular. You can now integrate DevExtreme SCSS styles into your application build process. This change also allows you to precisely customize CSS styles and minimize resulting CSS bundles. DevExtreme SCSS styles fully support the recently announced next-generation SCSS module system.

Join the discussion here.

ES6 Modules Support

DevExteme v20.2 will ship with a new ES6 module set. ES6 modules leverage Tree Shaking bundle size optimization techniques and allow DevExtreme to better integrate with the modern JavaScript toolchain. To retain backward compatibility, we will ship CommonJS modules side-by-side with our new ES6 modules.

Discussion page

Native React Components

Native React Grid

Detail Editing

You can now integrate the React Grid’s TableDetailRow plugin with the EditingState plugin and allow React Grid users to edit records within an inline detail form.

Documentation & Demo

Native React Scheduler

Enhanced Rendering for Overlapped Events/Appointments

We improved the readability of our React Scheduler by using available screen space more efficiently. In Week and Day views, overlapped appointments are distributed evenly across the cell’s width and consume as much space as possible. If enough room exists to display appointment title and dates, appointments are layered one above another.

Demo

Get Notified of the Further Product Updates

We regularly publish DevExtreme pre-release information on GitHub. We encourage you to subscribe to our GitHub repository for release-related notifications.

Your Feedback Matters 

We realize beta-testing is a time-consuming process and we are grateful to those who invest time with our preview builds. Find the current implementation lacking flexibility? Feel we've overlooked a valuable usage scenario? Does our current implementation fail to address your business requirements? Please post your thoughts in the comment section below, create a Support Center ticket or communicate with us via GitHub. We will happily follow-up and do what we can to extend the capabilities of our new products/features.

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.
22 comment(s)
Mojo
Mojo
I was hoping for Expand/Collapse in the diagram like some of your competitors already have.
26 August 2020
Moritz B.
Moritz B.
Will the RRule-Change break existing implementation or is it backwards compatible to the way Recurrencerules are handled before ?
26 August 2020
Sigurd Decroos _
Sigurd Decroos _

I was also hoping for more love for the diagram component. Expand/Collapse being one of them.

Collaboration is maybe possible with the new version, we'll have to test it out and see if the diagram's position is not reset after adding external elements to the datasource.

26 August 2020
Sergey Novikov 5
Sergey Novikov 5
Forgotten HTML Editor?
26 August 2020
Tomas Rimkus
Tomas Rimkus

@Sergey Novikov 5

They are waiting for a new "Quill" release which will never happen.

26 August 2020
Alex B (DevExpress)
Alex B (DevExpress)
Thank you everyone for your feedback.

> I was hoping for Expand/Collapse in the diagram

DevExtreme Diagram container shapes are collapsible. Please refer to this demo for more information. If you meant something different, please describe your requirements and I’ll be happy to follow up.

> Collaboration is maybe possible with the new version

You are right, it should be possible now. Feel free to create a support ticket if you need any further assistance on this matter.

> Will the RRule-Change break existing implementation?

No, it won't. Please reach out to our support team if you've encountered any difficulties after upgrade. Note: We discovered an issue related to Angular projects – this issue has been fixed.

> Forgotten HTML Editor?

Please note that this EAP does not include everything we will ship in v20.2. Regarding the HTML Editor: We've forked Quill and expect to preview table support in a few weeks. You’ll be able to test our implementation before our final v20.2 release.
26 August 2020
Edgar Davalos
Edgar Davalos
Hello,

They will add these improvements:

Improved Responsiveness / Adaptivity
https://js.devexpress.com/Roadmap/#ResponsivenessAdaptivity

Editors & Form Layout
https://js.devexpress.com/Roadmap/#UIComponents
26 August 2020
Fabiano Castro 2
Fabiano Castro 2
Great 
26 August 2020
Jean Petrovic
Jean Petrovic
Any update on the Authentication UI template for vue and angular?
26 August 2020
Vincent Bloemen
Vincent Bloemen

I'm glad to hear that DevExpress is still working on the Devextreme HTML Editor. Waiting for Quill 2.0 would take way to long as it stays unclear when this new version will be released.

I'm also seeking for a way to highlight text in an html editor which shows the changes between two versions of texts. Is there a way to implement this in the html editor? I should make a ticket for this, I know and I probably will when it's time to implement this functionality in my app :-)

27 August 2020
Lars Ugleberg
Lars Ugleberg
Any chance your new movable splitter will make it in 20.2, please? Currently, I'm using a crude JS hack, but it's difficult to achieve a L&F that matches your themes, and it doesn't integrate well with your other widgets.
30 August 2020
Mohsen Abo-Ghaly
Mohsen Abo-Ghaly

Hello Alex, 

> I was hoping for Expand/Collapse in the diagram

DevExtreme Diagram container shapes are collapsible. Please refer to this demo for more information. If you meant something different, please describe your requirements and I’ll be happy to follow up.

That's not the point, we were hoping for Expand/Collapse in the connectors itself the same as the tree widget.  the user can Expand/Collapse as he go thru the diagram. 

Another issue, we were hoping for new types of connectors: Flexible Lines (check the following image and samples).


these are very important features


Please check the following samples and image..  just to clarify the requests (mind-maps):

*** Sample#1:

https://www.mindmeister.com/71179716/abraham-keach-is-the-mad-young-preacher-who-is-responsible-for-the-revival-of-an-apocalyptic-cult-call?fullscreen=1#


*** Sample#2:

https://www.mindmeister.com/1199372016/nutrioci-n-y-spa-paula-camacho?fullscreen=1#

*** Image:

https://www.researchgate.net/figure/This-mind-map-created-on-MindMeistercom-visualizes-one-persons-understanding-of-western_fig3_275338567


Thanks

Mohsen

30 August 2020
Sigurd Decroos _
Sigurd Decroos _
We're also looking for bezier connectors, stacked subshapes within a shape (e.g. A table with fields, a class with properties, methods and functions), ...
31 August 2020
Alex B (DevExpress)
Alex B (DevExpress)
> Any update on the Authentication UI template for vue and angular?

We expect to ship them with v20.2. Feel free to subscribe to our GitHub releases and to obtain early access once we publish our new Authentication UI templates for Vue and Angular.

> Editors & Form Layout - Label Animation

We hope to include it in v20.2 as well.

> Responsive Real-life Demo

We built an internal prototype and decided to change the underlying demo. We want it to better reproduce real-life workflows. This has required more work than we initially expected.

> I'm also seeking for a way to highlight text in an html editor which shows the changes between two versions of texts

Our HTML Editor doesn't support this out-of-the-box. Feel free to create a support ticket and describe your requirements in greater detail. Our support team will be happy to help.

> Any chance your new movable splitter will make it in 20.2, please?
> ...it's difficult to achieve a L&F that matches your themes

At present, we don't have resources to include this in our v20.2 release. We've recently introduced some enhancements to our stylesheets, so it might be easier to style your custom Splitter now. Please describe theme related issues you’ve encountered (submit a support ticket via the Support Center), and we’ll do everything we can to create a suitable solution on your behalf.

> we were hoping for Expand/Collapse in the connectors itself the same as the tree widget.
> we were hoping for new types of connectors: Flexible Lines
> We're also looking for bezier connectors, stacked subshapes within a shape

Thank you for sharing your requirements with us. These features are not planned for v20.2, but we have them on our TODO list. We'll take your vote into account as we define our 2021 Diagram Roadmap.

1 September 2020
Customer97986
Customer97986
No updates to Chart? A box plot control like the one added to WinForms or WPF would be really nice to see. 
1 September 2020
Anders Wang
Anders Wang

Hi,

Any plan for vue3 support? It is much more firendly for tree shaking(compile on demand).

1 September 2020
Alex B (DevExpress)
Alex B (DevExpress)
> No updates to Chart?

In v20.2 we expect to add Chart axis label customization in addition to the features mentioned in this blog post.

> A box plot control like the one added to WinForms or WPF would be really nice to see.

BoxPlot is not a part of our 2020 Roadmap, so it won't be available in v20.2. We'll take your vote into account while planning our future Roadmap.

> Any plan for vue3 support?

It's almost ready and will be included into v20.2.

2 September 2020
Anders Wang
Anders Wang

Hi

Any plan vue3's new Vite build tool support or still webpack in your CLI?

7 September 2020
Alex B (DevExpress)
Alex B (DevExpress)

> Any plan vue3's new Vite build tool support

We are working on the required ES6 modules support. Once we are done, we'll test the new Vite tool with DevExteme. 

14 September 2020
ASPMVCNewbie
ASPMVCNewbie
Guys, you rock !
8 October 2020
CRM-144dfcba-77fe-4098-9d76-0a7373c3f9ad
Bob Balfe
Is Angular being actively enhanced going forward?
13 October 2020
Alex B (DevExpress)
Alex B (DevExpress)

Hi Bob,

Yes, our long-term strategy includes Angular support enhancements. As you can see, in v20.2 we introduced new Angular Authentication UI templates and extended declarative data bindings in our DataGrid. If you have something that we could improve in the context of Angular support, feel free to share it here or in our Support Center.

15 October 2020

Please login or register to post comments.