All Components

Panes

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

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

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.

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

      <kendo-splitter style="height: 200px;">
        <kendo-splitter-pane size="200px" min="5%">
            <h3>Left pane</h3>
            <p>Minimum size of 5%</p>
        </kendo-splitter-pane>

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

        <kendo-splitter-pane size="20%">
            <h3>Right pane</h3>
        </kendo-splitter-pane>
      </kendo-splitter>

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

Persisting the Size

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

@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.

@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.

@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.

@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 {}
In this article