All Components

PanelBar Overview

The PanelBar displays hierarchical data as a multi-level, expandable component.

You can describe the children items:

  • By using nested PanelBarItem components, or
  • By using the items property.

Basic Usage

The following example demonstrates the PanelBar in action.

@Component({
    selector: 'my-app',
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar>
            <kendo-panelbar-item title="My Teammates" expanded="true">
                <template kendoPanelBarContent>
                    <div [class]="teamMateGroup">
                        <div class="teamMate">
                            <img [src]="imageUrl('andrew')" alt="Andrew Fuller" width="72" height="72">
                            <h2>Andrew Fuller</h2>
                            <p>Team Lead</p>
                        </div>
                        <div class="teamMate">
                            <img [src]="imageUrl('nancy')" alt="Nancy Leverling" width="72" height="72">
                            <h2>Nancy Leverling</h2>
                            <p>Sales Associate</p>
                        </div>
                        <div class="teamMate">
                            <img [src]="imageUrl('robert')" alt="Robert King" width="72" height="72">
                            <h2>Robert King</h2>
                            <p>Business System Analyst</p>
                        </div>
                    </div>
                </template>
            </kendo-panelbar-item>
            <kendo-panelbar-item title="Projects">
                <kendo-panelbar-item title="New Business Plan"></kendo-panelbar-item>
                <kendo-panelbar-item title="Sales Forecasts">
                    <kendo-panelbar-item title="Q1 Forecast"></kendo-panelbar-item>
                    <kendo-panelbar-item title="Q2 Forecast"></kendo-panelbar-item>
                    <kendo-panelbar-item title="Q3 Forecast"></kendo-panelbar-item>
                    <kendo-panelbar-item title="Q4 Forecast"></kendo-panelbar-item>
                </kendo-panelbar-item>
                <kendo-panelbar-item title="Sales Reports"></kendo-panelbar-item>
            </kendo-panelbar-item>
            <kendo-panelbar-item title="Programs">
                <kendo-panelbar-item title="Monday"></kendo-panelbar-item>
                <kendo-panelbar-item title="Tuesday"></kendo-panelbar-item>
                <kendo-panelbar-item title="Wednesday"></kendo-panelbar-item>
                <kendo-panelbar-item title="Thursday"></kendo-panelbar-item>
                <kendo-panelbar-item title="Friday"></kendo-panelbar-item>
            </kendo-panelbar-item>
            <kendo-panelbar-item title="Communication" disabled="true"></kendo-panelbar-item>
        </kendo-panelbar>
    </div>
    `,
    styles: [`
        .teamMate:after {
            content: ".";
            display: block;
            height: 0;
            line-height: 0;
            clear: both;
            visibility: hidden;
        }
        .teamMate h2 {
            font-size: 1.4em;
            font-weight: normal;
            padding-top: 20px;
            margin: 0;
        }
        .teamMate p {
            margin: 0;
        }
        .teamMate img {
            float: left;
            margin: 5px 15px 5px 5px;
            border: 1px solid #ccc;
            border-radius: 50%;
        }
        .teamMateGroup {
            padding: 10px;
        }
        .panelbar-wrapper {
            max-width: 400px;
            margin: 0 auto;
        }
    `]
})

class AppComponent {
    private baseImageUrl: string = "http://demos.telerik.com/kendo-ui/content/web/panelbar/";

    private imageUrl(imageName: string) :string {
        return this.baseImageUrl + imageName + ".jpg";
    }
}

Configuration

PanelBarItem

To instantiate the PanelBar items, initialize them as PanelBarItem components with their corresponding properties.

Titles

Each PanelBar item has a title that you can handle through the title attribute.

@Component({
    selector: 'my-app',
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar>
            <kendo-panelbar-item title="First Title"></kendo-panelbar-item>
            <kendo-panelbar-item title="Second Title"></kendo-panelbar-item>
        </kendo-panelbar>
    </div>
    `
})

class AppComponent {}

Expanding

By default, all PanelBar items are collapsed. To expand them, set the expanded property to true.

@Component({
    selector: 'my-app',
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar>
            <kendo-panelbar-item title="Communication" expanded="true">
                <template kendoPanelBarContent>
                    Some title
                </template>
            </kendo-panelbar-item>
        </kendo-panelbar>
    </div>
    `
})

class AppComponent {}

Disabling

To disable PanelBar items, set the disabled property to true.

@Component({
    selector: 'my-app',
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar>
            <kendo-panelbar-item title="Communication" disabled="true">
                <template kendoPanelBarContent>
                    Some title
                </template>
            </kendo-panelbar-item>
        </kendo-panelbar>
    </div>
    `
})

class AppComponent {}

Setting the Selected State

To set the selected state to a PanelBar item, use the selected property.

@Component({
    selector: 'my-app',
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar>
            <kendo-panelbar-item title="Communication" selected="true">
                <template kendoPanelBarContent>
                    Some title
                </template>
            </kendo-panelbar-item>
        </kendo-panelbar>
    </div>
    `
})

class AppComponent {}

Focusing

To set the focused state to a PanelBar item, use the focused property. When the keyboard navigation is applied, the PanelBar uses the focused item as a starting point.

@Component({
    selector: 'my-app',
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar>
            <kendo-panelbar-item title="Communication" focused="true">
                <template kendoPanelBarContent>
                    Some title
                </template>
            </kendo-panelbar-item>
        </kendo-panelbar>
    </div>
    `
})

class AppComponent {}

Images

You can load images next to the titles of the PanelBar items by using the imageUrl option of the PanelBarItemComponent.

@Component({
    selector: 'my-app',
    styles: [`
        .panelbar-wrapper {
            max-width: 400px;
            margin: 0 auto;
        }
    `],
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar>
            <kendo-panelbar-item title="Golf" [imageUrl]="sportsIconUrl('golf')">
                <kendo-panelbar-item title="Top News" [imageUrl]="iconUrl('star')"></kendo-panelbar-item>
                <kendo-panelbar-item title="Photo Galleries" [imageUrl]="iconUrl('photo')"></kendo-panelbar-item>
                <kendo-panelbar-item title="Video Records" [imageUrl]="iconUrl('video')"></kendo-panelbar-item>
                <kendo-panelbar-item title="Radio Records" [imageUrl]="iconUrl('speaker')"></kendo-panelbar-item>
            </kendo-panelbar-item>
            <kendo-panelbar-item title="Baseball" [imageUrl]="sportsIconUrl('baseball')">
                <kendo-panelbar-item title="Top News" [imageUrl]="iconUrl('star')"></kendo-panelbar-item>
                <kendo-panelbar-item title="Photo Galleries" [imageUrl]="iconUrl('photo')"></kendo-panelbar-item>
                <kendo-panelbar-item title="Video Records" [imageUrl]="iconUrl('video')"></kendo-panelbar-item>
                <kendo-panelbar-item title="Radio Records" [imageUrl]="iconUrl('speaker')"></kendo-panelbar-item>
            </kendo-panelbar-item>
            <kendo-panelbar-item title="Swimming" [imageUrl]="sportsIconUrl('swimming')">
                <kendo-panelbar-item title="Top News" [imageUrl]="iconUrl('star')"></kendo-panelbar-item>
                <kendo-panelbar-item title="Photo Galleries" [imageUrl]="iconUrl('photo')"></kendo-panelbar-item>
            </kendo-panelbar-item>
            <kendo-panelbar-item title="Snowboarding" [imageUrl]="sportsIconUrl('snowboarding')">
                <kendo-panelbar-item title="Photo Galleries" [imageUrl]="iconUrl('photo')"></kendo-panelbar-item>
                <kendo-panelbar-item title="Video Records" [imageUrl]="iconUrl('video')"></kendo-panelbar-item>
            </kendo-panelbar-item>
        </kendo-panelbar>
    </div>
    `
})

class AppComponent {
    private baseSportsIconUrl: string = "http://demos.telerik.com/kendo-ui/content/shared/icons/sports/";
    private baseIconUrl: string = "http://demos.telerik.com/kendo-ui/content/shared/icons/16/";

    private sportsIconUrl(imageName: string): string {
        return this.baseSportsIconUrl + imageName + ".png";
    }

    private iconUrl(imageName: string): string {
        return this.baseIconUrl + imageName + ".png";
    }
}

Icons

Then PanelBar enables you to render icons next to the titles of the PanelBar items by either:

  • Setting the icon option (for build-in icons), or
  • Setting the iconClass option (for custom icons).
@Component({
    selector: 'my-app',
    styles: [`
        .panelbar-wrapper {
            max-width: 400px;
            margin: 0 auto;
        }
    `],
    template: `
    <div class="panelbar-wrapper">
         <kendo-panelbar>
            <kendo-panelbar-item title="My Web Site" icon="folder" expanded="true">
                <kendo-panelbar-item title="images" icon="folder" expanded="true">
                    <kendo-panelbar-item title="logo.png" icon="image"></kendo-panelbar-item>
                    <kendo-panelbar-item title="body-back.png" icon="image"></kendo-panelbar-item>
                    <kendo-panelbar-item title="my-photo.png" icon="image"></kendo-panelbar-item>
                </kendo-panelbar-item>
                <kendo-panelbar-item title="resources" icon="folder" expanded="true">
                    <kendo-panelbar-item title="pdf" icon="folder" expanded="true">
                        <kendo-panelbar-item title="prices.pdf" icon="pdf"></kendo-panelbar-item>
                        <kendo-panelbar-item title="brochure.pdf" icon="pdf"></kendo-panelbar-item>
                    </kendo-panelbar-item>
                    <kendo-panelbar-item title="zip" icon="folder"></kendo-panelbar-item>
                </kendo-panelbar-item>
                <kendo-panelbar-item title="about.html" icon="file"></kendo-panelbar-item>
                <kendo-panelbar-item title="contacts.html" icon="file"></kendo-panelbar-item>
                <kendo-panelbar-item title="index.html" icon="file"></kendo-panelbar-item>
                <kendo-panelbar-item title="portfolio.html" icon="file"></kendo-panelbar-item>
            </kendo-panelbar-item>
        </kendo-panelbar>
    </div>
    `
})

class AppComponent { }

Expand Modes

The PanelBar supports three different expand modes that you can configure through the expandMode property:

  • The "single" mode enables you to expand only one item at a time. Expanding an item collapses the previously expanded one.
  • The "multiple" mode is the default mode of the PanelBar. It enables you to expand more than one item at a time. Items can also be toggled.
  • The "full" mode enables you to expand only one item at a time. The expanded area occupies the entire height of the PanelBar. The "full" mode requires you to set the height property.
import { PanelBarExpandMode, LayoutModule } from '@progress/kendo-angular-layout';

@Component({
    selector: 'my-app',
    template: `
    <div [class]="'box'">
        <div [class]="'box-col'">
        <h4>Expand  Modes</h4>
        <ul>
            <li [class]="'radio-group'">
                <input
                    type="radio"
                    name="expandModeGroup"
                    value="{{kendoPanelBarExpandMode.Single}}"
                    [checked]="expandMode === kendoPanelBarExpandMode.Single"
                    (change)="onChange($event)"
                />
                {{kendoPanelBarExpandMode[kendoPanelBarExpandMode.Single]}} expand mode
            </li>
            <li [class]="'radio-group'">
                <input
                    type="radio"
                    name="expandModeGroup"
                    value="{{kendoPanelBarExpandMode.Multiple}}"
                    [checked]="expandMode === kendoPanelBarExpandMode.Multiple"
                    (change)="onChange($event)"
                />
                {{kendoPanelBarExpandMode[kendoPanelBarExpandMode.Multiple]}} expand mode
            </li>
            <li [class]="'radio-group'">
                <input
                    type="radio"
                    name="expandModeGroup"
                    value="{{kendoPanelBarExpandMode.Full}}"
                    [checked]="expandMode === kendoPanelBarExpandMode.Full"
                    (change)="onChange($event)"
                />
                {{kendoPanelBarExpandMode[kendoPanelBarExpandMode.Full]}} expand mode
            </li>
        </ul>
        </div>
        <div [class]="'box-col'">
            <h4><label for="height">Height (Full expand mode only):</label></h4>
            <input
                (change)="onHeightChange($event)"
                [value]="height"
                *ngIf="expandMode === kendoPanelBarExpandMode.Full"
                type="number"
                name="height"
                id="height"
                step="5"
            >
        </div>
    </div>
    <div class="panelbar-wrapper">
        <kendo-panelbar
            [expandMode]="expandMode"
            [height]="height + 'px'"
            (stateChange)="onPanelChange($event)"
        >
            <kendo-panelbar-item title="My Teammates" expanded="true">
                <template kendoPanelBarContent>
                    <div [class]="teamMateGroup">
                        <div class="teamMate">
                            <img [src]="imageUrl('andrew')" alt="Andrew Fuller">
                            <h2>Andrew Fuller</h2>
                            <p>Team Lead</p>
                        </div>
                        <div class="teamMate">
                            <img [src]="imageUrl('nancy')" alt="Nancy Leverling">
                            <h2>Nancy Leverling</h2>
                            <p>Sales Associate</p>
                        </div>
                        <div class="teamMate">
                            <img [src]="imageUrl('robert')" alt="Robert King">
                            <h2>Robert King</h2>
                            <p>Business System Analyst</p>
                        </div>
                    </div>
                </template>
            </kendo-panelbar-item>
            <kendo-panelbar-item title="Projects">
                <kendo-panelbar-item title="New Business Plan"></kendo-panelbar-item>
                <kendo-panelbar-item title="Sales Forecasts">
                    <kendo-panelbar-item title="Q1 Forecast"></kendo-panelbar-item>
                    <kendo-panelbar-item title="Q2 Forecast"></kendo-panelbar-item>
                    <kendo-panelbar-item title="Q3 Forecast"></kendo-panelbar-item>
                    <kendo-panelbar-item title="Q4 Forecast"></kendo-panelbar-item>
                </kendo-panelbar-item>
                <kendo-panelbar-item title="Sales Reports"></kendo-panelbar-item>
            </kendo-panelbar-item>
            <kendo-panelbar-item title="Programs">
                <kendo-panelbar-item title="Monday"></kendo-panelbar-item>
                <kendo-panelbar-item title="Tuesday"></kendo-panelbar-item>
                <kendo-panelbar-item title="Wednesday"></kendo-panelbar-item>
                <kendo-panelbar-item title="Thursday"></kendo-panelbar-item>
                <kendo-panelbar-item title="Friday"></kendo-panelbar-item>
            </kendo-panelbar-item>
            <kendo-panelbar-item title="Communication" disabled="true"></kendo-panelbar-item>
        </kendo-panelbar>
    </div>
    `,
    styles: [`
        .radio-group {
            list-style-type: none;
        }
        .teamMate:after {
            content: ".";
            display: block;
            height: 0;
            line-height: 0;
            clear: both;
            visibility: hidden;
        }
        .teamMate h2 {
            font-size: 1.4em;
            font-weight: normal;
            padding-top: 20px;
        }
        .teamMate p {
            margin: 0;
        }
        .teamMate img {
            float: left;
            margin: 5px 15px 5px 5px;
            border: 1px solid #ccc;
            border-radius: 50%;
        }
        .teamMateGroup {
            padding: 10px;
        }
        .panelbar-wrapper {
            max-width: 400px;
            margin: 0 auto;
        }
        .box {
            margin: 4.5em 7.5em;
            padding: 3em;
            background-color: rgba(20,53,80,0.038);
            border: 1px solid rgba(20,53,80,0.05);
        }
        .box:after {
            content: "";
            display: block;
            clear: both;
            height: 0;
        }
        .box h4 {
            margin: 0 0 1em;
            font-size: 12px;
            line-height: 1em;
            font-weight: bold;
            text-transform: uppercase;
        }
        .box-col {
            float: left;
            padding: 0 3em 1.667em 0;
        }
        input {
            border: 1px solid #ccc;
            padding: 6px;
        }
    `]
})

class AppComponent {
    public expandMode: number = PanelBarExpandMode.Full;
    public kendoPanelBarExpandMode: any = PanelBarExpandMode;
    private baseImageUrl: string = "http://demos.telerik.com/kendo-ui/content/web/panelbar/";
    private height: string = "400";

    public onChange(event: any): void {
        this.expandMode = parseInt(event.target.value);
    }

    public onHeightChange(event: any): void {
        this.height = parseInt(event.target.value);
    }

    public onPanelChange(event: any): void { console.log("stateChange: ", event); }

    private imageUrl(imageName: string): string {
        return this.baseImageUrl + imageName + ".jpg";
    }
}

Templates

The PanelBar provides an option for templating both the content property of the items and the content of the declaratively initialized items.

To instantiate PanelBar items, choose either of the following approaches:

  • Use a collection.
  • Use declaratively initialized items.

Using Collections

In this case, if a template is not defined, the content property is rendered in its current state.

@Component({
    selector: 'my-app',
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar [items]="items">
            <template kendoPanelBarItemTemplate let-dataItem>
                <div>Custom template: </div>{{dataItem.content}}
            </template>
        </kendo-panelbar>
    </div>
    `
})

class AppComponent {
    private items: Array<PanelBarItemModel> = [
        <PanelBarItemModel> {title: "First item", content: "First item content", expanded: true },
        <PanelBarItemModel> {title: "Second item", children: [
                <PanelBarItemModel> {title: "Second item child item" }
            ]
        }
    ];
}

Using Declaratively Initialized Items

@Component({
    selector: 'my-app',
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar>
            <kendo-panelbar-item title="My Teammates" expanded="true">
                <template kendoPanelBarContent>
                <div>Example content</div>
                </template>
            </kendo-panelbar-item>
        </kendo-panelbar>
    </div>
    `
})

class AppComponent { }

Animation

The PanelBar provides an option for disabling its expand/collpase animation by setting the animate property of the control.

@Component({
    selector: 'my-app',
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar [items]="items" [animate]=false>
        </kendo-panelbar>
    </div>
    `
})

class AppComponent {
    private items: Array<PanelBarItemModel> = [
        <PanelBarItemModel> {title: "First item", content: "First item content", expanded: true },
        <PanelBarItemModel> {title: "Second item", children: [
                <PanelBarItemModel> {title: "Second item child item" }
            ]
        }
    ];
}

Events

The PanelBar emits events which can be used to update the application state of high-order components.

On Item Interaction

The stateChange event fires each time the user interacts with a PanelBar item. The event data contains all items that are modified.

@Component({
    selector: 'my-app',
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar [items]="items" (stateChange)="onPanelChange($event)">
            <template kendoPanelBarItemTemplate let-dataItem>
                <div>Custom template: </div>{{dataItem.content}}
            </template>
        </kendo-panelbar>
    </div>
    `
})

class AppComponent {
    private items: Array<PanelBarItemModel> = [
        <PanelBarItemModel> {title: "First item", content: "First item content", expanded: true },
        <PanelBarItemModel> {title: "Second item", children: [
                <PanelBarItemModel> {title: "Second item child item" }
            ]
        }
    ];

    public onPanelChange(event: any) { console.log("stateChange: ", event); }
}
In this article