DevExtreme - Data Grid, Tree List, Pivot Grid API Improvements (v18.1)

If you are a regular reader of our blog posts, you must have noticed that we keep stressing how important customer feedback is to our development process. Sometimes we use it to make big decisions, to prioritize one large feature over another — other times, we make small changes to control APIs over time, on the basis of your thoughts and preferences.

In this post, I’ll introduce several API improvements in our v18.1 release. As usual with our DevExtreme products, everything in the post applies to all the platforms we support, including Angular, Vue, React, jQuery, Knockout and ASP.NET MVC and ASP.NET Core.

DataGrid and TreeList provide built-in icons for editing commands

You can now set the option editing.useIcons to true, and the command column links for the Edit and Delete commands will automatically be replaced by the built-in icons:

This demo shows the new functionality.

The TreeList helper method getSelectedRowKeys has new modes

You can now pass a mode parameter to the getSelectedRowKeys helper on the TreeList, which provides these options:

• all returns all selected nodes and includes any selected child nodes
• excludeRecursive returns all selected nodes, but not any child nodes
• leavesOnly is the equivalent of an overload we used to have for getSelectedRowKeys (now deprecated), and it returns only selected leaf nodes (i.e. those that don’t have child nodes)

For example, consider this selection:

[x] A
    [ ] B
    [x] C
        [x] D

Here are the results of the different parameters to getSelectedRowKeys in this situation:

treeList.getSelectedRowKeys('excludeRecursive');
// returns A

treeList.getSelectedRowKeys('all');
// returns A, C, D

treeList.getSelectedRowKeys('leavesOnly');
// returns D

If you are one of our many customers using the recursive selection functionality, please note that the exact sample scenario above can only be recreated without the recursive setting. However, the getSelectedRowKeys method works correctly in both cases, and accepts the same parameters. With recursive set to true, the A item would be deselected in the sample and would therefor not be included in any of the getSelectedRowKeys results.

New forEachNode helper on the TreeList

There is a new helper method available on the TreeList, to iterate hierarchically over nodes and child nodes. To iterate over all nodes in the TreeList, call forEachNode(callback) like this:

treeList.forEachNode(function(node) {
  // handle each node
});

If you have already retrieved one or more nodes and you need to iterate the hierarchy starting from these nodes, you can use the overload forEachNode(nodes, callback):

treeList.forEachNode([parentNode1, parentNode2], function(node) {
  // handle each node
});

PivotGridFieldChooser can apply changes on demand

Pivot grids can be configured to work with enormous data volumes. Since they are interactive controls, the user is expected to make changes to the layout at runtime. Unfortunately, this can result in large queries run against the server in quick succession, while the user drags and drops fields in the Pivot Grid.

We have now added the option applyChangesMode to the PivotGridFieldChooser, with the default setting instantly (this corresponds with the previous behavior). By setting this option to onDemand, you can change the behavior so that all changes made by the user are accumulated and applied only when they are confirmed by a click to the OK button in the Field Chooser UI. It is also possible to cancel changes without applying them.

Here is a demo of a Pivot Grid setup with an integrated Field Chooser.

Stand-alone Field Choosers

If you are using the Field Chooser as a stand-alone control in onDemand mode, you need to add your own OK and Cancel buttons, or at least trigger the associated functionality from your own code. We supply the two new methods applyChanges and cancelChanges for this purpose.

A demo of a Pivot Grid with a stand-alone Field Chooser is also available.

What do you think?

All the functionality described in this post is available now, as part of our v18.1 release. If you are new to our product suite, find all the details you need here. As always, we are interested in your thoughts! Will you use the new features in your applications?