In the upcoming v17.2, you can check out these new features of the DevExtreme HTML5 TreeList widget.
1. Recursive selection mode
TreeList will include a new recursive selection mode where you can select or deselect an entire branch with a single click, and a click on a node will also select or deselect all child nodes. Enable the feature with the selection.recursive option:
|
1
2
3
4
|
selection: {
// …
recursive:
true
},
|
Here you can see that when we select a child node, TreeList recursively selects the associated parent node as well:
2. Built-in search
If your TreeList contains thousands of records, it can be difficult to find a specific node. That's why in the v17.2 release, we've added a search function to the header filter to speed up filtering.
The headerFilter.allowSearch option is available in widget options root level and column options. This allows you to enable header filter searches for all columns, or only for specific columns.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
treeListOptions: {
//...
headerFilter: {
//...
allowSearch:
true
//all columns
},
columns: [{
//...
headerFilter: {
//...
allowSearch:
true
//specific column
},
}]
}
|
In the animation below you can see how to save time implementing the head filter search feature:
What if there are too many columns in the TreeList? Just enable the search box in the column selector to get the same search functionality as columns:
|
1
2
3
4
|
columnChooser: {
//...
allowSearch:
true
}
|
This makes finding a column a breeze, and can be used regardless of the column selector mode:
3. New Lazy loading mode
In an upcoming release, you can optimize the performance of TreeList by lazily collapsing the load of items (and their children). In this mode, child nodes can be loaded using:
- loadDescendants() - recursively load child nodes
- loadDescendants(keys) - recursively load the children of the specified node
- loadDescendants(keys, childrenOnly) - according to the childrenOnly parameter value, only deliver the children of a specific node or a single level of all its children
4. getNodeByKey method
Also in this version, you can get the nodes of a TreeList by calling getNodeByKey(keyParam) :
treeListInstance.getNodeByKey(8);
This call returns a full node containing the level, key, "visible" and "hasChildren" flags, an array of children, and the object representing the node's parent.
===============================================================
Want to learn more about how to DevExtreme TreeList?
Scan and follow the DevExpress Chinese website WeChat public account to get the latest news and information in time