Collapse PanelBar on button click event

[Jon]

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.

[Martin]

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

[Jon]

Thank you very much! That did it.