DevExtreme TreeList Improvements (v17.2)

Check out these new features of the DevExtreme HTML5 TreeList widget in the upcoming v17.2 release.

1. Recursive Selection Mode

The TreeList will include a new recursive selection mode that enables you to select or deselect an entire branch with only a single click. A click on a node can select or deselect all the children nodes too. Enable the feature using the selection.recursive option:

selection: {
    // …
    recursive: true
},

Here you can see that when we select a child node then the TreeList recursively selects the associated parent nodes as well:

2. Built-in Search

If your TreeList contains thousands of records then it's difficult to find a specific node. That's why in the v17.2 release we've added search functionality within the header filter to speed up filtering.

The headerFilter.allowSearch option is available at the widget options root level and within column’s options. This allows you to enable header filter search for all columns or only for a specific column.

treeListOptions: {
    //...
    headerFilter: {
        //...
        allowSearch: true //all columns
    },

    columns: [{
        //...
        headerFilter: {
            //...
            allowSearch: true //specific column
        },
    }]
}

In this animation below, you can see how time-saving the header filter search functionality can be:

What if there are too many columns in your TreeList? Simply enable the search box in the column chooser to get the same search functionality for columns:

columnChooser: {
    //...
    allowSearch: true
}

This makes finding columns a breeze and the feature is available regardless of the column chooser mode:

3. New Lazy Loading Mode

With the upcoming release, you can optimize the TreeList’s performance by delaying the load of collapsed items (and their children). In this mode, you can load child nodes using the following methods:

1. loadDescendants()– loads children nodes recursively

2. loadDescendants(keys) - loads the specific node’s children recursively

3. loadDescendants(keys, childrenOnly)– loads only a single level of the specific node’s children or all its children recursively depending on the childrenOnly argument value

4. getNodeByKey Method

Also in this release, you can obtain a TreeList’s node using the key by calling getNodeByKey(keyParam):

treeListInstance.getNodeByKey(8);

This call returns the full node which includes the level, key, the “visible” and “hasChildren” flags, children array, and an object representing the node's parent.

Angular, ASP.NET MVC/Core, & More!

Note that all these new features are available in the TreeList Angular component, ASP.NET MVC and .NET Core control, and jQuery widget too.

Try it now

The new features of our TreeList widget is included in the v17.2 pre-release that is available via npm right now. Please note that this pre-release may contain some bugs and is not intended to be used in production:

npm install devextreme@17.2.1-pre-17291

Learn more about DevExtreme's pre-releases in this blog post.

What do you think about the TreeList improvements in the next release? Drop me a line below.

Email: mharry@devexpress.com

Twitter: @mehulharry