Collapse PanelBar on button click event

3 posts, 1 answers
  1. Jon
    Jon avatar
    2 posts
    Member since:
    Feb 2019

    Posted 13 May 2019 Link to this post

    Is there a way to collapse the PanelBar on a button click event? 

    I have a panel bar with a grid inside of it. The flow should be that I expand the PanelBar, then click a button inside the grid and the PanelBar collapses. I tried to set the [expanded] property to false on the button click event but it doesn't work. 

    Thanks for your help in advance.

  2. Answer
    Martin
    Admin
    Martin avatar
    152 posts

    Posted 14 May 2019 Link to this post

    Hi Jon,

    Check the example below demonstrating the desired functionality:
    https://stackblitz.com/edit/angular-scuv6v-whe6hy?file=app/app.component.ts

    Using the Angular template reference variable we can send information about the element to our component.ts file:
        <div class="panelbar-wrapper">
            <kendo-panelbar #panelbar>
              ...
            </kendo-panelbar>
    ...

    Because my grid is defined in a separate component (grid.component.ts) I send the panelbar reference through the @Input Angular's decorator:
    <my-grid [panelRef]='panelbar'></my-grid>

    In the grid.component.ts file, the reference is used to get the children items. The returned value is an array of objects so, we can use forEach method to set the '[expanded]' option of every child item to false in order to collapse all PanelBar items :
        @Input() public panelRef
        public onClick() {

         
    // If only the first item should be collapse use this:
         //  this.panelRef.childrenItems[0].expanded=false

        this.panelRef.childrenItems.forEach((el) => el.expanded = false)
      }
     

    I hope this helps. Let me know if I am missing something or any further assistance is required.

    Regards,
    Martin
    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. Jon
    Jon avatar
    2 posts
    Member since:
    Feb 2019

    Posted 14 May 2019 in reply to Martin Link to this post

    Thank you very much! That did it.
Back to Top