we've a TreeView with nodes that can contain child nodes which can contain child nodes and so on ....
How can we make a client-side sort, so that all levels of nodes are sorted ascending/descending? The normal sort setting of the datasource doesn't work properly because it only sorts the top level of the nodes but not the child levels.
Any advice welcome ;)
9 Answers, 1 is accepted
If you want to sort a Kendo widget you should sort its dataSource (the widget will be updated automatically).
Within the TreeView widget each level of items is represented with different dataSource instance (hierarchical dataSource), which means you need to sort all levels of dataSource hierarchy.
Option 1) The most easy way and avoid traversing would be to specify that the dataSource should be sorted upon initialization. This will make that each newly created level will be sorted automatically because of inheritance (because the levels are created when they are expanded).
To specify a sort condition you can use the same approach as the one for the regular dataSource:
Option 2) If you want to sort a TreeView that was already initialized or if you want to change the sorting direction then you will have to traverse the whole tree get the dataSource object for each level and use the sort method on it.
Check for example this example of traversing to get the idea:
I have tried to implement the sort for the data source like below but its sorting only the top level not sub levels .
var UAM2ascending = true;
dir: UAM2ascending ? "desc" : "asc"
UAM2ascending = !UAM2ascending;
How to sort the child nodes...
Thanks and Regards,
As Peter mentioned, this could be achieved by traversing the TreeView items and applying to sort option to each node that has children.
Any chance at a code extract or jsbin? I have followed the methods above to walk the tree as in option #2 but I don't see a data or datasource object on the nodes to apply a 'sort' instruction against. If I set the the data source sort property like option #1 while loading it still does not sort the children and the online demos have the same issue (sorting descending does not sort the children there either). I'm hitting my head against a wall for something that really should be simple, but I'm just not getting it. When I try to move to a hierarchical data source I get 'e.slice is not a function'. Everything works great as a basic dataSource but my data arrives random ordered.
Any help is great appreciated.
Here is a quick sample, can this be made to sort children too? After render.
Basically, the child nodes inherit the DataSource options, so sorting the items initially should be as simple as defining the sort option of the DataSource, as shown here. For convenience I created a small example illustrating how to sort TreeView nodes.
Child nodes does not inherit the DataSource options.
It is clear from mentioned Dojo or even demos
child nodes remain unsorted
As Petur explained earlier in this thread, inheritance works on initialization, so for instance if you initialize the TreeView with a Hierarchical dataSource that is sorted:
the sorting will be applied to the children. If however sorting is triggered after initialization (as in the demo you linked) the child nodes will not be sorted automatically. In this case each parent's own dataSource needs to be sorted as shown in this dojo, for example.
Telerik by Progress