Expand and Collapse All Nodes in TreeList

[Kevin]

What is the best and most efficient way to expand and collapse all nodes for a given TreeList?  I'm currently using the following code where fp-grid is the root div element of my kendoTreeList.  It works.  But it's very slow!  Is there a better and more efficient way to do this?

var treeList = jQuery('#fp-grid').data("kendoTreeList");
if (treeList) {
  jQuery('#fp-grid tbody>tr').each(function (index) {
    if (treeExpand) {
      treeList.expand(jQuery(this));
    } else {
      treeList.collapse(jQuery(this));
    }
  });
}

[Georgi]

Hi Kevin,

Another possible solution is to toggle the dataSource.schema.model.expanded property and update the dataSource via the setDataSource method.

e.g.

var treelist =   $("#treelist").data('kendoTreeList');
treelist.options.dataSource.schema.model.expanded = !treelist.options.dataSource.schema.model.expanded

treelist.setDataSource( treelist.options.dataSource)

Below you will find a small sample which demonstrates the above approach:

• http://dojo.telerik.com/ILUTecUs

Regards,
Georgi
Progress Telerik

[Kevin]

This is much faster!  Thank you!

[Chris]

Testing this with v2022.3.1109 (ASP.NET/MVC and jQuery), the TreeList DataSource Read action gets executed when treelist.setDataSource( treelist.options.dataSource) executes. 

While this behaviour is fine for static content TreeLists, it is not suitable for TreeLists where users are editing existing records or adding new records to the TreeList  locally (e.g., not submitting them to the server/database).

Is there a mechanism for applying the expanded property without the DataSource Read action being executed?

[Chris]

The following CSJS code will do the trick (inspired by https://docs.telerik.com/kendo-ui/knowledge-base/treelist-load-and-expand-one-level-of-data)

let items = treeList.items();//get the items from the current view
if ( doCollapse ) {
	treeList.collapse(items);
} else {
	treeList.expand(items);
}

For large data sets (I am testing this with 150+ multi-level parent nodes in a TreeList widget) this is faster than treeList.setDatasource() since it does not execute the DataSource Read action. More importantly, it is not destructive which means edited or inserted data items are preserved.

[Nikolay]

Hi Chris,

Indeed, this is a valid solution as well. Than you for sharing it with the community. I believe it will be helpful to others facing the same scenario.

Regards,

Nikolay