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>
                        <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: [`
        .teamMate:after {
            content: ".";
            display: block;
            height: 0;
            line-height: 0;
            clear: both;
            visibility: hidden;
        }
        .teamMate h2 {
            font-size: 1.3em;
            font-weight: normal;
            padding-top: 17px;
            margin: 0;
        }
        .teamMate p {
            margin: 0;
            font-size: .8em;
        }
        .teamMate img {
            float: left;
            width: 50px;
            height: 50px;
            margin: 10px;
            border: 1px solid #ccc;
            border-radius: 50%;
        }
        .panelbar-wrapper {
            max-width: 300px;
            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

The PanelBar provides configuration options for:

Set the PanelBarItems

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

The PanelBarItems provide configuration options for:

Set the 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 {}

Set 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]="'Team'"></kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Projects'" [selected]="true"></kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Programs'"></kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Communication'"></kendo-panelbar-item>
        </kendo-panelbar>
    </div>
    `
})

class AppComponent {}

Enable and Disable

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]="'Team'"></kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Projects'" [disabled]="true"></kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Programs'"></kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Communication'"></kendo-panelbar-item>
        </kendo-panelbar>
    </div>
    `
})

class AppComponent {}

Expand and Collapse

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]="'Team'"></kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Projects'" [expanded]="true">
                <kendo-panelbar-item [title]="'Business Plan'"></kendo-panelbar-item>
                <kendo-panelbar-item [title]="'Forecast'"></kendo-panelbar-item>
                <kendo-panelbar-item [title]="'OKRs'"></kendo-panelbar-item>
            </kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Programs'"></kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Communication'"></kendo-panelbar-item>
        </kendo-panelbar>
    </div>
    `
})

class AppComponent {}

Render Images next to Titles

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: 300px;
            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";
    }
}

Render Icons next to Titles

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: 300px;
            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 { }

Set the 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]="'example-config row'">
        <div class="col-sm-4">
            <p>Expand  modes:</p>
            <input
                type="radio"
                id="single"
                name="expandModeGroup"
                value="{{kendoPanelBarExpandMode.Single}}"
                [checked]="expandMode === kendoPanelBarExpandMode.Single"
                (change)="onChange($event)"
            />
            <label for="single">{{kendoPanelBarExpandMode[kendoPanelBarExpandMode.Single]}} expand mode</label> <br />
            <input
                type="radio"
                id="multiple"
                name="expandModeGroup"
                value="{{kendoPanelBarExpandMode.Multiple}}"
                [checked]="expandMode === kendoPanelBarExpandMode.Multiple"
                (change)="onChange($event)"
            />
            <label for="multiple">{{kendoPanelBarExpandMode[kendoPanelBarExpandMode.Multiple]}} expand mode</label> <br />
            <input
                type="radio"
                id="full"
                name="expandModeGroup"
                value="{{kendoPanelBarExpandMode.Full}}"
                [checked]="expandMode === kendoPanelBarExpandMode.Full"
                (change)="onChange($event)"
            />
            <label for="full">{{kendoPanelBarExpandMode[kendoPanelBarExpandMode.Full]}} expand mode</label>
        </div>
        <div class="col-sm-4">
            <p>Height (Full expand mode only):</p>
            <input
                (change)="onHeightChange($event)"
                [value]="height"
                *ngIf="expandMode === kendoPanelBarExpandMode.Full"
                type="number"
                name="height"
                id="height"
                step="5"
                [class]="'k-textbox'"
            >
        </div>
        <style>
            label {
                font-weight: normal;
            }
        </style>
    </div>
    <kendo-panelbar
        [expandMode]="expandMode"
        [height]="height + 'px'"
        (stateChange)="onPanelChange($event)"
    >
      <kendo-panelbar-item [title]="'Invasion Games'" [expanded]="true">
        <kendo-panelbar-item [title]="'Hockey'"></kendo-panelbar-item>
        <kendo-panelbar-item [title]="'Soccer'"></kendo-panelbar-item>
        <kendo-panelbar-item [title]="'Rugby'"></kendo-panelbar-item>
        <kendo-panelbar-item [title]="'Basketball'"></kendo-panelbar-item>
        <kendo-panelbar-item [title]="'Water polo'"></kendo-panelbar-item>
        <kendo-panelbar-item [title]="'Netball'"></kendo-panelbar-item>
      </kendo-panelbar-item>
      <kendo-panelbar-item [title]="'Striking & Fielding Games'">
        <kendo-panelbar-item [title]="'Cricket'"></kendo-panelbar-item>
        <kendo-panelbar-item [title]="'Softball'"></kendo-panelbar-item>
        <kendo-panelbar-item [title]="'Baseball'"></kendo-panelbar-item>
      </kendo-panelbar-item>
      <kendo-panelbar-item [title]="'Net & Court Games'">
        <kendo-panelbar-item [title]="'Badminton'"></kendo-panelbar-item>
        <kendo-panelbar-item [title]="'Squash'"></kendo-panelbar-item>
        <kendo-panelbar-item [title]="'Tennis'" [selected]="true"></kendo-panelbar-item>
        <kendo-panelbar-item [title]="'Table Tennis'"></kendo-panelbar-item>
        <kendo-panelbar-item [title]="'Volleyball'"></kendo-panelbar-item>
      </kendo-panelbar-item>
      <kendo-panelbar-item [title]="'Target Games'">
        <kendo-panelbar-item [title]="'Golf'"></kendo-panelbar-item>
        <kendo-panelbar-item [title]="'Lawn bowls'"></kendo-panelbar-item>
        <kendo-panelbar-item [title]="'Tenpin bowling'"></kendo-panelbar-item>
      </kendo-panelbar-item>
    </kendo-panelbar>
    `
})

class AppComponent {
    public expandMode: number = PanelBarExpandMode.Full;
    public kendoPanelBarExpandMode: any = PanelBarExpandMode;
    private height: string = "320";

    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); }


}

Set the 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 Collections

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

@Component({
    selector: 'my-app',
    styles: [`
        .custom-template {
            padding: 30px;
            text-align: center;
        }
    `],
    template: `
        <kendo-panelbar [items]="items">
            <template kendoPanelBarItemTemplate let-dataItem>
                <div class="custom-template">
                    <h4>Custom template: </h4>
                    <p>{{dataItem.content}}</p>
                </div>
            </template>
        </kendo-panelbar>
    `
})

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

Use Declaratively Initialized Items

@Component({
    selector: 'my-app',
    styles: [`
        .custom-template {
            padding: 30px;
            text-align: center;
        }
    `],
    template: `
        <kendo-panelbar>
            <kendo-panelbar-item [title]="'Item Title'" [expanded]="true">
                <template kendoPanelBarContent>
                    <div class="custom-template">Item content</div>
                </template>
            </kendo-panelbar-item>
        </kendo-panelbar>
    `
})

class AppComponent { }

Enable and Disable Animations

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

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

class AppComponent {
    private items: Array<PanelBarItemModel> = [
        <PanelBarItemModel> {
            title: "Teams",
            expanded: true,
            children: [
                <PanelBarItemModel> {
                    title: "Team 1" 
                },
                <PanelBarItemModel> {
                    title: "Team 2" 
                },
                <PanelBarItemModel> {
                    title: "Team 3" 
                }
            ]
        },
        <PanelBarItemModel> {
            title: "Forecast",
            children: [
                <PanelBarItemModel> {
                    title: "Q1 2017"
                },
                <PanelBarItemModel> {
                    title: "Q2 2017"
                },
                <PanelBarItemModel> {
                    title: "Q3 2017"
                },
                <PanelBarItemModel> {
                    title: "Q4 2017"
                }
            ]
        }
    ];
}

Data Binding

For more information on how to handle data operation processing, refer to the article on data binding.

Routing

For more information on how to use the PanelBar as a navigational component with the Angular router, refer to the article on routing.

Keyboard Navigation

For more information on the keyboard shortcuts the PanelBar supports, refer to the article on keyboard navigation.

Accessibility

For more information on the accessibility features of the PanelBar, refer to the article on accessibility.

Events

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

On Interacting with Items

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',
    styles: [`
        .custom-template {
            padding: 30px;
            text-align: center;
        }
    `],
    template: `
        <kendo-panelbar [items]="items" (stateChange)="onPanelChange($event)">
            <template kendoPanelBarItemTemplate let-dataItem>
                <div [class]="'custom-template'">
                    <h4>Custom template: </h4>
                    <p>{{dataItem.content}}</p>
                </div>
            </template>
        </kendo-panelbar>
    `
})

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

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

Right-to-Left Support

For more information on the ability of the PanelBar to support the handling of right-to-left (RTL) languages, refer to the article on RTL support.

In this article