This is a migrated thread and some comments may be shown as answers.

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

9 Answers 801 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Michael Hilgers
Top achievements
Rank 1
Michael Hilgers asked on 17 Jun 2014, 11:13 AM
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

9 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 19 Jun 2014, 11:17 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Dharmalingam
Top achievements
Rank 1
answered on 21 Jul 2015, 11:55 AM

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

 

 

 

 

0
Alexander Popov
Telerik team
answered on 23 Jul 2015, 07:38 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Tim
Top achievements
Rank 1
answered on 30 Sep 2015, 06:07 PM

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.

0
Tim
Top achievements
Rank 1
answered on 30 Sep 2015, 06:10 PM

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

 

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

0
Alexander Popov
Telerik team
answered on 02 Oct 2015, 12:40 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Tim
Top achievements
Rank 1
answered on 06 Oct 2015, 06:58 PM
Thank you so much for the detailed response. Works great now!
0
Dina
Top achievements
Rank 1
answered on 20 May 2017, 03:26 PM

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

0
Ivan Danchev
Telerik team
answered on 24 May 2017, 06:55 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
TreeView
Asked by
Michael Hilgers
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Dharmalingam
Top achievements
Rank 1
Alexander Popov
Telerik team
Tim
Top achievements
Rank 1
Dina
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or