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

8 posts, 0 answers
  1. Michael Hilgers
    Michael Hilgers avatar
    76 posts
    Member since:
    Apr 2010

    Posted 17 Jun 2014 Link to this post

    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
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 19 Jun 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Dharmalingam
    Dharmalingam avatar
    5 posts
    Member since:
    May 2015

    Posted 21 Jul 2015 in reply to Petur Subev Link to this post

    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

     

     

     

     

  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 23 Jul 2015 Link to this post

    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!
     
  6. Tim
    Tim avatar
    18 posts
    Member since:
    Jul 2014

    Posted 30 Sep 2015 in reply to Alexander Popov Link to this post

    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.

  7. Tim
    Tim avatar
    18 posts
    Member since:
    Jul 2014

    Posted 30 Sep 2015 Link to this post

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

     

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

  8. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 02 Oct 2015 Link to this post

    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!
     
  9. Tim
    Tim avatar
    18 posts
    Member since:
    Jul 2014

    Posted 06 Oct 2015 in reply to Alexander Popov Link to this post

    Thank you so much for the detailed response. Works great now!
Back to Top
Kendo UI is VS 2017 Ready