All Components

Routing

It is possible to use the PanelBar as a navigational component with the Angular 2 router.

The PanelBar provides two navigation approaches:

This approach enables you to navigate to the routes by clicking the PanelBar items with the RouterLink directive. It is generated from the routes that are available in the router configuration.

@Component({
    selector: 'my-app',
    styles: [`
        .layout {
            display: table-cell;
            display: flex;
            width: 100%;
        }
        .navigation-pane {
            min-width: 20%;
            max-width: 20%;
        }
        .content-pane {
            padding-left: 10pt;
        }
    `],
    template: `
    <h1>Routing with PanelBar and `RouterLink` directive</h1>
    <div class="layout">
        <div class="navigation-pane">
            <kendo-panelbar>
                <kendo-panelbar-item
                    *ngFor="let route of router.config"
                    [id]="route.path"
                    [title]="route.path ? route.path : 'home'"
                    [routerLink]="route.path"
                >
                </kendo-panelbar-item>
            </kendo-panelbar>
        </div>
        <div class="content-pane">
            <router-outlet></router-outlet>
        </div>
    </div>
    `
})

export class AppComponent {
    private router: Router;

    constructor(router: Router) {
        this.router = router;
    }
}

To see the full demo, refer to this Plunker example.

Using the onChange Event

When using the onChange event of the PanelBar, the event handler gets the selected item (route) and passes it to the navigate method of the Router.

@Component({
    selector: 'my-app',
    styles: [`
        .layout {
            display: table-cell;
            display: flex;
            width: 100%;
        }
        .navigation-pane {
            min-width: 20%;
            max-width: 20%;
        }
        .content-pane {
            padding-left: 10pt;
        }
    `],
    template: `
    <h1>Routing with PanelBar and 'onChange' event</h1>
    <div class="layout">
        <div class="navigation-pane">
            <kendo-panelbar (onChange)="onChange($event)" [selectable]="false">
                <kendo-panelbar-item
                    *ngFor="let route of router.config"
                    [id]="route.path"
                    [title]="route.path ? route.path : 'home'"
                    [selected]="route.path == selectedId"
                >
                    <kendo-panelbar-item
                        *ngFor="let child of route.children"
                        [title]="child?.path || 'about'"
                        [id]="route.path + '/' + child?.path"
                        [selected]="route.path + '/' + child?.path == selectedId"
                    >
                    </kendo-panelbar-item>
                </kendo-panelbar-item>
            </kendo-panelbar>
        </div>
        <div class="content-pane">
            <router-outlet></router-outlet>
        </div>
    </div>
    `
})

export class AppComponent {
    private router: Router;
    private selectedId: string = "";

    constructor(router: Router) {
        this.router = router;
    }

    public onChange(data: Array<PanelBarItemModel>): boolean {
        let focusedEvent: PanelBarItemModel = data.filter(item => item.focused === true)[0];

        if (focusedEvent.id !== "info") {
           this.selectedId = focusedEvent.id;
           this.router.navigate(["/" + focusedEvent.id]);
        }

        return false;
    }
}

To see the full demo, refer to this Plunker example.

In this article