Panes

The Splitter provides options for setting the behavior of its panes.

By using these options, you can configure the following pane features:

• Dimensions
• Resizing
• Collapsing
• Scrolling

Dimensions

The size property controls the dimensions of the Splitter panes. It accepts units in both pixel and percentage values. To control the minimum and maximum size of a pane, use the min and max properties of the SplitterPane component.

Specifying the Dimensions

To allow the Splitter to fully and evenly distribute the available space between panes of non-declared size, do not specify the size of at least one pane. Otherwise, if you declare size for all panes, the Splitter will throw an error in development mode.

Persisting the Size

To persist the pane size, use a two-way binding on the size property and persist its value.

Copy Code@Component({
  selector: 'my-app',
  template: `

      <kendo-splitter style="height: 200px;">
        <kendo-splitter-pane [(size)]="sidebarSize" min="5%">
            <h3>Sidebar</h3>
        </kendo-splitter-pane>

        <kendo-splitter-pane>
            <h3>Main pane</h3>
        </kendo-splitter-pane>
      </kendo-splitter>

    `,
  styles: [ `
    h3 { font-size: 1.2em; padding: 10px; }
  ` ]
})
class AppComponent {
    private _sidebarSize: string = localStorage.getItem('sidebarSize') || '20%';
    public get sidebarSize(): string {
        return this._sidebarSize;
    }
    public set sidebarSize(newSize: string) {
        this._sidebarSize = newSize;
        localStorage.setItem('sidebarSize', newSize);
    }
}

Resizing

By default, the Splitter enables the user to resize its panes. To disable this behavior, set the resizable property to false.

Copy Code@Component({
  selector: 'my-app',
  template: `

      <kendo-splitter style="height: 200px;">
        <kendo-splitter-pane>
            <h3>Left pane</h3>
        </kendo-splitter-pane>

        <kendo-splitter-pane>
            <h3>Center pane</h3>
        </kendo-splitter-pane>

        <kendo-splitter-pane [resizable]="false">
            <h3>Right pane</h3>
        </kendo-splitter-pane>
      </kendo-splitter>

    `,
  styles: [ ` h3 { font-size: 1.2em; padding: 10px; } ` ]
})
class AppComponent {}

Collapsing

You can enable a Splitter pane to collapse by setting the collapsible property to true. As a result, the Splitter renders a button which shows or, respectively, hides the pane. To collapse a pane, you can also double-click the split-bar. To render a pane that is initially collapsed, use the collapsed property.

Copy Code@Component({
  selector: 'my-app',
  template: `

      <kendo-splitter style="height: 200px;">
        <kendo-splitter-pane [collapsible]="true" size="20%">
            <h3>Sidebar content</h3>
        </kendo-splitter-pane>

        <kendo-splitter-pane>
            <h3>Main content</h3>
        </kendo-splitter-pane>
      </kendo-splitter>

    `,
  styles: [ ` h3 { font-size: 1.2em; padding: 10px; } ` ]
})
class AppComponent {}

Scrolling

By default, the content of the Splitter panes is scrollable. To disable the scrolling feature, set the scrollable property to false.

Copy Code@Component({
  selector: 'my-app',
  template: `

      <kendo-splitter style="height: 200px;">
        <kendo-splitter-pane [scrollable]="false" size="20%">
            <h3>Non-scrollable content</h3>
        </kendo-splitter-pane>

        <kendo-splitter-pane>
            <h3>Main content</h3>
        </kendo-splitter-pane>
      </kendo-splitter>

    `,
  styles: [ ` h3 { font-size: 1.2em; padding: 10px; } ` ]
})
class AppComponent {}

Suggested Links

• API Reference of the Splitter
• API Reference of the SplitterPaneComponent