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
  • Through 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'"
            (onChange)="onPanelChange($event)"
            (onFocus)="onPanelFocus($event)"
            (onBlur)="onPanelBlur($event)"
            (onKeyDown)="onPanelKeyDown($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("onChange: ", event); }
    public onPanelFocus(event: any): void { console.log("onFocus: ", event); }
    public onPanelBlur(event: any): void { console.log("onBlur: ", event); }
    public onPanelKeyDown(event: any): void { console.log("onKeyDown:", 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.

Instantiating Items by Using a Collection

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 PanelBarItemTemplate 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" }
            ]
        }
    ];
}

Instantiating by Using Declaratively Initialized Items

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

class AppComponent { }

Events

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

On Item Interaction

The onChange 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" (onChange)="onPanelChange($event)">
            <template PanelBarItemTemplate 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("onChange: ", event); }
}

On Keypress

The onKeyDown event fires each time the user presses a keyboard key and the component is focused.

To focus the component, use Tab. To navigate between items, use Upper Arrow, Left Arrow, Down Arrow, or Right Arrow. To select items, use Enter and Space.

@Component({
    selector: 'my-app',
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar [items]="items" (onKeyDown)="onPanelKeyDown($event)">
            <template PanelBarItemTemplate 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 onPanelKeyDown(event: any) { console.log("onKeyDown:", event); }
}

On Focusing

The onFocus event fires each time the user focuses the component.

@Component({
    selector: 'my-app',
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar [items]="items" (onFocus)="onPanelFocus($event)">
            <template PanelBarItemTemplate 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 onPanelFocus(event: any) { console.log("onFocus: ", event); }
}

On Blurring

The onBlur event fires each time the user blurs the component—the focus is moved to another item on the page.

@Component({
    selector: 'my-app',
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar [items]="items" (onBlur)="onPanelBlur($event)">
            <template PanelBarItemTemplate 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 onPanelBlur(event: any) { console.log("onBlur: ", event); }
}
In this article