I have the following panelbar:
<kendo-panelbar *ngIf="mainMenu"
[expandMode]="expandMode">
<kendo-panelbar-item [title]="menuItem.title" *ngFor="let menuItem of mainMenu" iconClass="fa fa-lg {{menuItem.faIcon}}"
[routerLink]="menuItem.link" routerLinkActive="active">
<kendo-panelbar-item [title]="menuItemSub.title" *ngFor="let menuItemSub of menuItem.sub"
[routerLink]="menuItemSub.link" routerLinkActive="active">
</kendo-panelbar-item>
</kendo-panelbar-item>
</kendo-panelbar>
An example of the generated item is like this:
<kendo-panelbar-item routerlinkactive="active" tabindex="0" ng-reflect-router-link="/dashboard-edge"
ng-reflect-router-link-active="active" ng-reflect-title="Dashboard Edge"
ng-reflect-icon-class="fa fa-lg fa-window-maximize" role="treeitem"
class="k-item k-state-default " id="k-panelbar-item-default-1" aria-selected="false">
<span class="k-link k-header">
<!--bindings={"ng-reflect-ng-if": "fa fa-lg fa-window-maximize"}-->
<span class="k-icon fa fa-lg fa-window-maximize" ng-reflect-klass="k-icon"
ng-reflect-ng-class="[object Object]">
</span>
<!--bindings={"ng-reflect-ng-if": ""}-->
Dashboard Edge
<!--bindings={}-->
<!--bindings={"ng-reflect-ng-if": "false"}-->
</span>
<!--bindings={"ng-reflect-ng-if": "false"}-->
</kendo-panelbar-item>
How can I customize the content of the item (with HTML) so that I can get more control of how the information is displayed? For instance, I would like to have the title wrapped in a <span>
tag with some specific class.
I'm able to customize the content using templates, but not the header itself.
Telerik support helped me with this.
Basically, you only need to:
[title]
bindingng-template
with the kendoPanelBarItemTitle
directiveHere is an example:
<kendo-panelbar *ngIf="mainMenu"
[expandMode]="expandMode">
<kendo-panelbar-item [title]="null" *ngFor="let menuItem of mainMenu" iconClass="fa fa-lg {{menuItem.faIcon}}"
[routerLink]="menuItem.link" routerLinkActive="active" [attr.name]="menuItem.name">
<ng-template kendoPanelBarItemTitle>
<span class="item-title">{{menuItem.title}}</span>
</ng-template>
<kendo-panelbar-item [title]="null" *ngFor="let menuItemSub of menuItem.sub"
[routerLink]="menuItemSub.link" routerLinkActive="active" [attr.name]="menuItemSub.name">
<ng-template kendoPanelBarItemTitle>
<span class="sub item-title">{{menuItemSub.title}}</span>
</ng-template>
</kendo-panelbar-item>
</kendo-panelbar-item>
</kendo-panelbar>
Example provided by Telerik guys: example