panelbar item visibility

Progress® Kendo UI® for Angular Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 09 Jun 2021 07:39 by ADMIN

Musashi

Created on: 01 Jun 2021 19:55

Category: PanelBar

Type: Feature Request

panelbar item visibility

An option to set visibility of a panelbar item would be great.

As it is now, if I bind to a collection of PanelBarItemModel items, I can't use title templates, and if I use *ngFor with panelbaritems, I can't set visibility. Especially if the visibility condition is an observable

3 comments

ADMIN

Martin

Posted on: 09 Jun 2021 07:39

Hello Musashi,

The hidden is an HTML5 global attribute that adds display: none style to the applied component. Here are some useful resource regarding the used property:

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

https://www.angularjswiki.com/angular/difference-between-ngif-and-hidden-or-displaynone-in-angular/

I hope this sheds some light on this case.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Musashi

Posted on: 08 Jun 2021 17:17

Hi,

Is the "hidden" input a private API? Will it change or be removed in the future? It's not documented
https://www.telerik.com/kendo-angular-ui/components/layout/api/PanelBarItemComponent/

ADMIN

Martin

Posted on: 08 Jun 2021 13:59

Hello Musashi,

Thank you for the provided feedback.

Indeed a possible approach to hide a PanelBar item, when using *ngFor to initialize the items, is to set the hidden attribute to true:

public panelbarItems = [
    { title: 'Title 1', useTemplate: true, titleTemplate: 'Templated title' },
    { title: 'Title 2', isHidden: true },
    { title: 'Title 3' },
    { title: 'Title 4' }
  ];

 <kendo-panelbar>   
   <kendo-panelbar-item
            *ngFor="let item of panelbarItems"
            [title]="item.title"
            [hidden]="item.isHidden"
          >
            <ng-template kendoPanelBarItemTitle *ngIf="item.useTemplate">
              {{ item.titleTemplate }}
            </ng-template>
          </kendo-panelbar-item>
      </kendo-panelbar-item>
 </kendo-panelbar>

Here is an example demonstrating the approach:

https://stackblitz.com/edit/angular-nx52tc

Regards,
Martin
Progress Telerik