Kendo Angular TreeView - Expand/Collapse All

9 posts, 1 answers
  1. Richard
    Richard avatar
    5 posts
    Member since:
    Oct 2017

    Posted 10 Jun 2019 Link to this post

         I'm using the TreeView component for Angular.  Everything is loading fine.  Now I want to add a button to expand or collapse the whole tree.  How can I do this?

    Also, any tips on making the checkboxes more defined would be helpful. They're a bit faint.

    Thanks

  2. Svetlin
    Admin
    Svetlin avatar
    444 posts

    Posted 12 Jun 2019 Link to this post

    Hi Richard,

    We can use the isExpanded function of the TreeView component in order to implement an expand/collapse all functionality. Check the following example demonstrating this approach:
    https://stackblitz.com/edit/angular-mypxcq?file=app/app.component.ts

    About the styling, any Kendo UI for Angular component Kendo styles can be overwritten. Basically, we need inspect the DOM and locate the styles that we would like to modify. Check the following example demonstrating how to change the default border-color style of the checkboxes:
    https://stackblitz.com/edit/angular-mypxcq-pqjq85?file=app/app.component.ts

    I hope this helps. Let me know in case further assistance is required for this case.

    Regards,
    Svetlin
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Richard
    Richard avatar
    5 posts
    Member since:
    Oct 2017

    Posted 12 Jun 2019 in reply to Svetlin Link to this post

    That is helpful, thanks.  However, now the issue is that the arrows cannot be used to individually expand/collapse a single tree node/parent and the only way to expand/collapse is by using the button and expanding/collapsing the whole tree. This issue exists in your example as well.  Is this expected or a bug?
  4. Richard
    Richard avatar
    5 posts
    Member since:
    Oct 2017

    Posted 12 Jun 2019 in reply to Richard Link to this post

    In addition to the above issue, once you collapse the whole tree and then click the arrow next to a single node to open it, you get a spinning icon that never stops spinning and the node never opens.  See your example for this as well.
  5. Answer
    Svetlin
    Admin
    Svetlin avatar
    444 posts

    Posted 14 Jun 2019 Link to this post

    Hi Richard,

    The current behavior is expected as the isExpanded function is implemented for each node whenever the TreeView is rendered. Consequently, when we try to expand or collapse a single node the TreeView is re-rendered and the isExpanded function returns true or false for all of the nodes.

    Probably a more suitable solution would be to use the expandedKeys and expandBy properties of the kendoTreeViewExpandable directive in order to achieve the desired functionality. We can compute all of the parent nodes text properties:
    public allParentNodes = [];
    ...  
     ngOnInit(){
          this.getAllParentTextProperties(this.data);
        }
     
        getAllParentTextProperties(items: Array<any>){
          items.forEach(i =>{
            if(i.items){
              this.allParentNodes.push(i.text);
              this.getAllParentTextProperties(i.items);
            }
          })
        }

    and pass these to the expandedKeys property when we need to expand all nodes:
    expand(){
      this.expandedKeys = this.allParentNodes.slice(); //the slice method is used in order to return a new array instance so that the TreeView is re-rendered
       
    }

    Here is the complete demo:
    https://stackblitz.com/edit/angular-mypxcq-yvc8ec?file=app/app.component.ts

    I hope this helps.

    Regards,
    Svetlin
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. Richard
    Richard avatar
    5 posts
    Member since:
    Oct 2017

    Posted 17 Jun 2019 in reply to Svetlin Link to this post

    Thanks.  Our tree is a flat tree, so the all parent nodes calculation is different, but the premise of using the expanded keys to open and close the tree gets the job done.  I do think it would be a 'nice to have' if the control had its own expand and collapse methods. 
  7. Svetlin
    Admin
    Svetlin avatar
    444 posts

    Posted 19 Jun 2019 Link to this post

    Hi Richard,

    Thank you for the provided feedback. We will take it into consideration. I will proceed with setting this case to resolved now. However, feel free to reopen it by sending a new message to it in case further assistance is required on the same topic.

    Regards,
    Svetlin
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8. Ravi
    Ravi avatar
    1 posts
    Member since:
    Apr 2020

    Posted 30 Apr Link to this post

    Hi, I am using TreeviewExpandable component but I am facing one issue that when i checked parent Node and when I expand that node and collapse that node and try to uncheck parent node then it become intermediate rather than unchecked?

    can you please look into this?

     

  9. Svetlin
    Admin
    Svetlin avatar
    444 posts

    Posted 04 May Link to this post

    Hi Ravi,

    The original topic of the thread isn't related to the reported issue. Please open a separate support ticket on the new topic. Thank you in advance. That will help us to maintain a clean support history of our forum where each thread is based on a specific feature or a single issue.

    The reported issue seems to be like the following one:

    https://github.com/telerik/kendo-angular/issues/2387

    Please track the issue status for any further updates on it. Let's keep any further information in the new ticket, where you could add any further relevant details. That will help us to keep separate matters within their own dedicated tickets. Thank you.

    Regards,
    Svetlin
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top