DevExtreme DataGrid & TreeList - Accessibility, UX and API Enhancements (v19.1)

We've added five major enhancements to the DevExtreme DataGrid and TreeList widgets:

• Accessibility Enhancements
• Keyboard Navigation Enhancements
• Data Editing - New API
• New Double-Click Events
• TreeList - A New Filter Mode

The DataGrid and TreeList now provide better accessibility, user experience (UX), and better API. Let's take a look at what benefits these enhancements provide you and your end users.

Note: DevExtreme supports many platforms. So, these enhancements are available for the DataGrid and Treelist controls that run on Angular, Vue, React, jQuery, and ASP.NET MVC and ASP.NET Core.

Accessibility Enhancements

Web accessibility is an important feature for the DevExtreme components.

In the latest release, we've added enhancements to further our accessibility support. End users can now use the keyboard to interact and navigate to UI elements of the DataGrid and Treelist:

All action elements are now be accessible using the keyboard (headers, filter panel, pager, command columns, etc.)

These enhancements work out-of-the-box without the need to set or enable an option. Set the useLegacyKeyboardNavigation option to true to use the previous keyboard navigation behavior. Learn more here.

Keyboard Navigation Enhancements

Based on your requests, we have introduced several new keyboard behavior options. They allow you to enable a variety of fast data entry scenarios.

Start Editing on KeyPress

A user can now instantly edit data without switching to edit mode. It works like editing cells in Excel. For example, in the GIF below, you can see the edit start as soon as I type some changes, then when I use the arrow keys, I'm able to easily move to the next cell:

Use the keyboardNavigation.editOnKeyPress property to enable the feature.

Demo

Configurable Enter Key Action

It's now possible to specify what action the Enter key will perform: switch to edit mode or navigate to the next cell:

Use the keyboardNavigation.enterKeyAction to enable the start editing using the Enter key.

Demo

Configurable Enter Key Direction

You can now configure if the Enter key will navigate to the next column or row:

Use the keyboardNavigation.enterKeyDirection property to choose the cell focus direction after the Enter key is pressed.

Demo

New Double-Click Events

We've added new cell and row double-click events for the DataGrid and TreeList.

Use the new onCellDblClick and the onRowDblClick events to implement different scenarios. For example, you can display details on row double-click by adding a popup window or navigating to a detail page.

Data Editing - New API

We're adding a new data editing API which makes editing faster and more intuitive.

Text Selection on Edit

Currently, when you edit a cell or row, the text in the focused editor is not selected. So, to replace the current value, an end user would need to first clear the current value and then enter the new value.

With this new added option, all text in the editor is selected when editing is started. This means the end users can edit cell values in the table faster and easier than before:

Use editing.selectTextOnEditStart option to enable this feature.

Demo

Start edit action

We've added a new data editing enhancement. Now you can start cell editing using the double-click mouse action. The current single-click option is also available. Use the editing.startEditAction option to control for single or double click.

While the current single-click is useful, it has a couple of issues. It's not possible to use the single selection and focused row features because they rely on the single-click action. But with the new dblClick start edit action, the single selection and focused row can still be used.

Demo

TreeList - A New Filter Mode

We've extended the filtering capabilities of the TreeList with a new mode. It can now include children of filtered nodes into the filter results.

A new filter option, filterMode, helps you to control how the filtered search results are displayed. The option accepts the following two values:

• withAncestors (default mode) - The filtered results include the rows which meet the filter condition and their ancestors only, no descendants. Here's an example:

• fullBranch - The results include rows which meet the filter condition with both their ancestors and descendants. The descendant rows appear collapsed. Here's an image which shows the subtle difference:

Test it online here: DevExtreme TreeList - Filter Demo

Test It Now (and provide feedback)

Test-drive the public beta now. Use the npm pre-release package:

npm install --save devextreme@19.1-next

Then let us know your experience with these DataGrid and TreeList enhancements.

Your Feedback Counts

We’d like to hear from you about your development plans and needs. Feel free to leave comments below, open Support Center tickets for detailed discussions or take part in conversations in our GitHub repository.

For some quick feedback, please submit your responses to this short survey:

Join the Webinar

Sign up for the upcoming "What's New in v19.1 - JavaScript: jQuery, Angular, React, and Vue" webinar where:

• you'll see all the new features/tools/components in v19.1 and
• you can ask questions and interact with our devs

Register today: https://register.gotowebinar.com/register/83799677038249484