TreeList - need to expand only one level deep on each image click

3 posts, 0 answers
  1. Nicholas
    Nicholas avatar
    5 posts
    Member since:
    May 2015

    Posted 12 Nov 2015 Link to this post

    I have a TreeList that has 64 rows, with 24 being expandable rows. 
    6 rows are the parent rows that populate on loading of the TreeList.
    the remaining rows are child rows that can be one row below a parent row, or they can be multiple child rows deep.

    I have an image that I click to expand my rows.  The first time I click it, i only want the 1st level of child rows to expand just one level.
    The second time I click it, I want the child rows of this now expanded 1st level of child rows to expand only one level. 
    Each time I click the image, I want only one level of expansion to happen for rows that are expandable from the last level of rows that was just expanded.
    I want to do the reverse for collapsing as well.

    I have the following code that gets all the rows that can be toggled.  However when I loop through it expanding these rows, I obviously end up expanding every row.
    var rowsThatCanToggle = treelist.content.find("tr.k-treelist-group", treelist.tbody);
    for (var i = 0; i < rowsThatCanToggle.length; i++) {

    I have looked through documentation that shows how to expand a specific row using "tr:eq(<some index number>)" but my problem is identifying the last set
    of expanded rows.  Do you have any documentation or actual examples that specifically shows how to get the most recent set of expanded rows only, and how to expand their child rows?
    Thank you...
  2. Vasil
    Vasil avatar
    1642 posts

    Posted 16 Nov 2015 Link to this post

    Hello Nicholas,

    As far as I understand your requirements, you want to expand all items at level 0. Then on second click to expand their children (items on level 1) and etc.

    When you loop the items, you can check how deep are their in the hierarchy based on the first cell. It contains so many span elements as the counter of it's parent. Check this example that demonstrates how to expand all items on given level and then to collapse them:

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Dave
    Dave avatar
    10 posts
    Member since:
    Nov 2015

    Posted 17 Nov 2015 Link to this post

    Hello Vasil,

    On behalf of Nicholas and myself, thank you for posting a code snippet for us to work with.  We appreciate it.


Back to Top