All Components

Data Binding

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

To Remote Data

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

import { BrowserModule } from '@angular/platform-browser';
import { Component, NgModule, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http, HttpModule } from '@angular/http';
import 'rxjs/add/operator/map';
import { PanelBarExpandMode } from '@progress/kendo-angular-layout';

@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>
    `
})

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

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" }
            ]
        }
    ];
}
In this article