Sorting child rows in TreeList

2 posts, 0 answers
  1. Matt
    Matt avatar
    87 posts
    Member since:
    Mar 2009

    Posted 13 Jan Link to this post

    I have the following data representation displayed in a TreeList where there are two columns:  Name and Creation Date.  (Each Value entry is a child of the parent Item entry.)

    Name - Creation Date

    Item 1 - Jan 01, 2017

         Value 1 - Jan 11, 2017
         Value 3 - Jan 02, 2017
         Value 2 - Jan 01, 2017

    Item 2 - Dec 20, 2016

         Value 2 - Dec 20, 2016
         Value 1 - Dec 17, 2016
         Value 3 - Dec 16, 2016

    Item 3 - Nov 15, 2016

         Value 3 - Nov 25, 2016
         Value 1 - Nov 22, 2016 
         Value 2 - Nov 20, 2016

    What do I need to do in order to sort by the Name value vs. the Creation Date so that it appears as follows:

    Item 1 - Jan 01, 2017
         Value 1 - Jan 11, 2017
         Value 2 - Jan 01, 2017
         Value 3 - Jan 02, 2017

    Item 2 - Dec 20, 2016
         Value 1 - Dec 17, 2016
         Value 2 - Dec 20, 2016
         Value 3 - Dec 16, 2016

    Item 3 - Nov 15, 2016
         Value 1 - Nov 22, 2016 
         Value 2 - Nov 20, 2016
         Value 3 - Nov 25, 2016

    No sort order is set in the TreeList markup; all the columns in the TreeList are sortable such that if I click the Name column header, the child rows are sorted appropriately.

  2. Eduardo Serra
    Admin
    Eduardo Serra avatar
    90 posts

    Posted 13 Jan Link to this post

    Hello Matt,

    We can apply the sort you describe by using the sort property of the Kendo UI DataSource; you can read more about it here.

    I have prepared a sample in the Kendo UI Dojo to see how it could be done; take a look at it here. The relevant part:

    sort: [
       { field: "HireDate", dir: "desc" }
    ]

    Keep in mind that the sort object can be set to an array in order to set multiple sort parameters at the same time so you could sort by both name and date if necessary.

    I hope this helps!

    Regards,
    Eduardo Serra
    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.
Back to Top