Splitter Overview

Telerik UI for ASP.NET Core Ninja image

The Splitter is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The Telerik UI Splitter TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers 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.

    @(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>);
        })
    )
    <kendo-splitter name="splitter" orientation="SplitterOrientation.Vertical">
            <pane>
                <kendo-splitter name="horizontal">
                    <pane size="220px" id="left-pane">
                        <div class="pane-content">
                            <h3>Inner splitter / left pane</h3>
                        </div>
                    </pane>
                    <pane id="center-pane">
                        <div class="pane-content">
                            <h3>Inner splitter / center pane</h3>
                        </div>
                    </pane>
                    <pane size="220px" collapsible="true" id="right-pane">
                        <div class="pane-content">
                            <h3>Inner splitter / right pane</h3>
                        </div>
                    </pane>
                </kendo-splitter>
            </pane>
            <pane size="100px" collapsible="false">
                <div class="pane-content">
                    <h3>Outer splitter / middle pane</h3>
                </div>
            </pane>
            <pane size="100px">
                <div class="pane-content">
                    <h3>Outer splitter / bottom pane</h3>
                </div>
            </pane>
    </kendo-splitter>
    public class SplitterController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }

Basic Configuration

The following example demonstrates the basic configuration of the Splitter.

    @(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>
    <kendo-splitter name="splitter" style="height: 400px;"
                    orientation="SplitterOrientation.Vertical"
                    on-collapse="collapse"
                    on-resize="resize"
                    on-expand="expand"
                    on-content-load="contentLoad">
            <pane size="100px" collapsible="true" scrollable="false" id="top_pane">
                <p>Top pane</p>
            </pane>
            <pane id="middle_pane">
                <div class="pane-content">
                    <h3>Middle pane</h3>
                </div>
            </pane>
            <pane size="20%" collapsible="true" scrollable="true" id="bottom_pane">
                <p>Bottom pane</p>
            </pane>
    </kendo-splitter>

    <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

Events

For a complete example on basic Splitter events, refer to the demo on using the events of the Splitter.

See Also

In this article