New to Telerik UI for ASP.NET MVCStart a free 30-day trial

ASP.NET MVC Splitter Overview

The Telerik UI Splitter HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI Splitter widget.

The Splitter provides a dynamic layout of resizable and collapsible panes. It converts the children of an HTML element into an interactive layout by adding resize and collapse handles depending on its configuration. The vertical and horizontal orientation of the Splitter can be combined to build complex layouts.

Initializing the Splitter

The following example demonstrates how to define the Splitter.

Razor
    @(Html.Kendo().Splitter()
        .Name("splitter")
        .Orientation(SplitterOrientation.Vertical)
        .Panes(verticalPanes =>
        {
            verticalPanes.Add()
                .Content(
                    Html.Kendo().Splitter()
                        .Name("horizontal")
                        .Panes(horizontalPanes =>
                        {
                            horizontalPanes.Add()
                                .HtmlAttributes(new { id = "left-pane" })
                                .Size("220px")
                                .Content(@<div class="pane-content">
                                    <h3>Inner splitter / left pane</h3>
                                </div>);

                            horizontalPanes.Add()
                                .HtmlAttributes(new { id = "center-pane" })
                                .Content(@<div class="pane-content">
                                    <h3>Inner splitter / center pane</h3>
                                </div>);

                            horizontalPanes.Add()
                                .HtmlAttributes(new { id = "right-pane" })
                                .Collapsible(true)
                                .Size("220px")
                                .Content(@<div class="pane-content">
                                    <h3>Inner splitter / right pane</h3>
                                </div>);
                        }).ToHtmlString()
                );

            verticalPanes.Add()
                .Size("100px")
                .Collapsible(false)
                .Content(@<div class="pane-content">
                    <h3>Outer splitter / middle pane</h3>
                </div>);

            verticalPanes.Add()
                .Size("100px")
                .Content(@<div class="pane-content">
                    <h3>Outer splitter / bottom pane</h3>
                </div>);
        })
    )

Basic Configuration

The following example demonstrates the basic configuration of the Splitter.

Razor
    @(Html.Kendo().Splitter()
        .Name("splitter")
        .HtmlAttributes(new { style = "height: 400px;" })
        .Orientation(SplitterOrientation.Vertical)
        .Events(events => events
            .Collapse("collapse")
            .Resize("resize")
            .Expand("expand")
            .ContentLoad("contentLoad")
        )
        .Panes(panes =>
        {
            panes.Add()
                .HtmlAttributes(new { id = "top_pane" })
                .Size("100px")
                .Collapsible(true)
                .Scrollable(false)
                .Content(@<p>
                    Top pane
                </p>);

            panes.Add()
                .HtmlAttributes(new { id = "middle_pane" })
                .Content(@<div class="pane-content">
                    <h3>Middle pane</h3>
                </div>);

            panes.Add()
                .HtmlAttributes(new { id = "bottom_pane" })
                .Collapsible(true)
                .Scrollable(true)
                .Size("20%")
                .Content(@<p>
                    Bottom pane
                </p>);
        })
    )

    <script type="text/javascript">
        $(function () {
            // The Name() of the Splitter is used to get its client-side instance.
            var splitter = $("#splitter").data("kendoSplitter");
            console.log(splitter);
        });
    </script>

Functionality and Features

Next Steps

See Also