How to perform 'Expand All' and 'Collapse All' in Kendo Tree View on click of Expand button and Collapse button

4 posts, 0 answers
  1. Kannan
    Kannan avatar
    8 posts
    Member since:
    Jul 2018

    Posted 10 Oct 2018 Link to this post

    Dear Team,

    I am new to Kendo control, please help me with this, I already have Tree View as shown in the attachment, Now I have two(Expand  and Collapse) buttons, I need to perform the  'Expand All'  on click of Expand button and 'Collapse All'  on click of  Collapse button.

    How to perform 'Expand All' and 'Collapse All' in Kendo Tree View on click of Expand button and Collapse button.

    Please help me on this.

     

  2. Vessy
    Admin
    Vessy avatar
    2297 posts

    Posted 12 Oct 2018 Link to this post

    Hi Kannan,

    You can expand/collapse all nodes of a TreeView by passing the ".k-item" class to the expand() and collapse() methods of the widget. You can see a sample here:
    https://dojo.telerik.com/UVoHemup

    Regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Ron Hary
    Ron Hary avatar
    44 posts
    Member since:
    Jun 2005

    Posted 17 Mar 2019 in reply to Vessy Link to this post

    Looking at your sample - the expand() is expanding a single level on every click and not all the levels at once...
  4. Vessy
    Admin
    Vessy avatar
    2297 posts

    Posted 20 Mar 2019 Link to this post

    Hi Ron,

    The nested nodes of the TreeView are not bound in the moment when the expand() method is called, this is why only the first level nodes are expanded. A possible approach you can implement is to check whether there are ".k-item .k-i-expand" items (nodes with expand icon) and call the expand() method recursively if there are such. For example: https://dojo.telerik.com/UVoHemup/2

    Another approach is to expand the nodes asynchronously without using recursion like demonstrated here: 
    https://docs.telerik.com/kendo-ui/controls/navigation/treeview/how-to/nodes/node-async-expand

    Regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top