All Components

Expand Mode

The PanelBar supports various expand modes.

The expand modes are:

  • "single"—Expands only one item at a time. If you expand an item, the item that was previously expanded is collapsed.
  • "multiple" (default)—Expands two or more items at a time. Items can also be toggled.
  • "full"—Expands only one item at a time and requires you to set the height property. The expanded area occupies the entire height of the PanelBar.

To configure the expand modes, use the expandMode property of the PanelBar.

import { Component } from '@angular/core';
import { PanelBarExpandMode } 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>
    `
})
export class AppComponent {
    public expandMode: number = PanelBarExpandMode.Full;
    public kendoPanelBarExpandMode: any = PanelBarExpandMode;
    private height = 320;

    public onChange(event: any): void {
        this.expandMode = parseInt(event.target.value, 10);
    }

    public onHeightChange(event: any): void {
        this.height = parseInt(event.target.value, 10);
    }

    public onPanelChange(event: any): void { console.log('stateChange: ', event); }
}
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 'hammerjs';

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