How to sort Nodes with Child Nodes with Child Nodes .... ?

[Michael Hilgers]

Hey everyone,

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 ;)

Regards,
Michael

[Petur Subev]

Hello Michael,

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:

http://docs.telerik.com/kendo-ui/api/framework/datasource#configuration-sort

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:

http://docs.telerik.com/kendo-ui/getting-started/web/treeview/overview#gathering-the-checked-nodes-from-a-treeview

Kind Regards,
Petur Subev
Telerik

 

 

[Dharmalingam]

Hello Petur,

 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;

$("#Roles").data("kendoTreeView").dataSource.sort({

        field: "Description",
        dir: UAM2ascending ? "desc" : "asc"
    });

UAM2ascending = !UAM2ascending;

How to sort the child nodes...

Thanks and Regards,

Dharma

 

 

 

 

[Alexander Popov]

Hi Dharma,

As Peter mentioned, this could be achieved by traversing the TreeView items and applying to sort option to each node that has children.

Regards,
Alexander Popov
Telerik

 

 

[Tim]

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.

[Tim]

Here is a quick sample, can this be made to sort children too? After render.

 

http://dojo.telerik.com/@tcederqu/EmERU

[Alexander Popov]

Hello Tim,

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.

Regards,
Alexander Popov
Telerik

 

 

[Tim]

Thank you so much for the detailed response. Works great now!

[Dina]

Child nodes does not inherit the DataSource options.

It is clear from mentioned Dojo or even demos

http://demos.telerik.com/kendo-ui/treeview/api

 

child nodes remain unsorted

[Ivan Danchev]

Hello Dima,

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:

sort: { field: "name", dir: "asc" }

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.


Regards,
Ivan Danchev
Telerik by Progress