All Components

Data Binding

The PanelBar supports binding to a Array of PanelBarItemModel objects through its items property.

Bind to Local Data

The following example demonstrates how to bind the PanelBar to local arrays.

@Component({
    selector: 'my-app',
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar [items]="items"></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" }
            ]
        }
    ];
}

Bind to Remote Data

The following example demonstrates how to bind the PanelBar to remote data.

import { Component } from '@angular/core';
import { PanelBarExpandMode, PanelBarItemModel } from '@progress/kendo-angular-layout';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
    selector: 'my-app',
    styles: [`
        .panelbar-wrapper {
            max-width: 400px;
            margin: 0 auto;
        }
    `],
    template: `
    <div class="panelbar-wrapper">
         <kendo-panelbar [expandMode]="kendoPanelBarExpandMode" [items]="categoriesView">
         </kendo-panelbar>
    </div>
    `
})
export class AppComponent {
    public kendoPanelBarExpandMode: any = PanelBarExpandMode.Multiple;
    private BASE_URL: string = 'http://services.odata.org/V4/Northwind/Northwind.svc/';
    private categoriesView: Array<any>;

    constructor(private http: Http) {
        this.queryItems();
    }

    private filterToString({ filter }: { filter?: string }): string {
        return filter ? `&$filter=${filter}` : '';
    }

    private queryItems(): void {
        this.http
            .get(`${this.BASE_URL}${"Categories"}`)
            .map(response => response.json())
            .map(response => response.value)
            .subscribe(categories => {
                this.categoriesView = categories.map(item => {
                    let data = <PanelBarItemModel>{
                        title: item.CategoryName,
                        id: item.CategoryID,
                        children: []
                    };

                    this.queryChildItems(item.CategoryID)
                        .subscribe(products => {
                            data.children = products.map(product => {
                                return <PanelBarItemModel>{ title: product.ProductName };
                            });
                        });

                    return data;
                });
            });
    }

    private queryChildItems(categoryId: number): any {
        const queryStr = `${this.filterToString({ "filter": `CategoryID eq ${categoryId}` })}`;

        return this.http
            .get(`${this.BASE_URL}${"Products"}?${queryStr}`)
            .map(response => response.json())
            .map(response => response.value);
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';

import 'hammerjs';

@NgModule({
    imports:      [BrowserModule, LayoutModule, HttpModule],
    declarations: [AppComponent],
    bootstrap:    [AppComponent]
})
export class AppModule {}

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article