All Components

Data Binding

The PanelBar enables you to bind it to an array of PanelBarItemModel objects by using its items property.

Binding to Local Data

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

import { Component } from '@angular/core';
import { PanelBarItemModel } from '@progress/kendo-angular-layout';

@Component({
    selector: 'my-app',
    styles: [`
        :host /deep/ .k-content {
            padding: 4px 8px;
        }
    `],
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar [items]="items"></kendo-panelbar>
    </div>`
})

export 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" }
            ]
        }
    ];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

@NgModule({
    imports:      [BrowserModule, BrowserAnimationsModule, LayoutModule, HttpClientModule],
    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);

Binding 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 { HttpClient } from '@angular/common/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 = 'https://odatasampleservices.azurewebsites.net/V4/Northwind/Northwind.svc/';
    private categoriesView: Array<any>;

    constructor(private http: HttpClient) {
        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['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['value']);
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

@NgModule({
    imports:      [BrowserModule, BrowserAnimationsModule, LayoutModule, HttpClientModule],
    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