New to Telerik UI for ASP.NET Core? Download free 30-day trial

Content Operations

The Splitter provides several options for setting the content of the panes.

Static Content

You can set the HTML for each Splitter pane via the Content() configuration option.

The following example demonstrates how to configure the HTML Content for the Splitter:

    @(Html.Kendo().Splitter()
        .Name("splitter")
        .Orientation(SplitterOrientation.Vertical)
        .Panes(verticalPanes =>
        {
            verticalPanes.Add()
                .Size("100px")
                .HtmlAttributes(new { id = "top-pane" })
                .Content(@<div class="pane-content">
                              <h3>Top pane</h3>
                          </div>);
            verticalPanes.Add()
                .Size("100px")
                .HtmlAttributes(new { id = "middle-pane" })
                .Content(@<div class="pane-content">
                              <h3>Middle pane</h3>
                          </div>);
            verticalPanes.Add()
                .Size("100px")
                .HtmlAttributes(new { id = "bottom-pane" })
                .Content(@<div class="pane-content">
                              <h3>Bottom pane</h3>
                          </div>);
        })
    )
    <kendo-splitter name="splitter" orientation="SplitterOrientation.Vertical">
            <pane size="100px" id="top-pane">
                <div class="pane-content">
                    <h3>Top pane</h3>
                </div>
            </pane>
            <pane size="100px" id="middle-pane">
                <div class="pane-content">
                    <h3>Middle pane</h3>
                </div>
            </pane>
            <pane size="100px" id="bottom-pane">
                <div class="pane-content">
                    <h3>Bottom pane</h3>
                </div>
            </pane>
    </kendo-splitter>

Asynchronously loading content

The Splitter provides built-in support for asynchronously loading content from URLs via the LoadContentFrom() coniguration option. These URLs should return HTML fragments that will be loaded in the pane of a Splitter. To load a whole page in an iframe, specify the complete URL, for example, https://www.telerik.com/.

The following example demonstrates how to load the Splitter content asynchronously.

@(Html.Kendo().Splitter()
    .Name("splitter")
    .Panes(panes =>
    {
        panes.Add().LoadContentFrom(Url.Action("PaneContent", "Splitter"));
        panes.Add().LoadContentFrom("https://www.telerik.com/");
    }))
    <kendo-splitter name="splitter">
            <pane content-url="@Url.Action("PaneContent", "Splitter")"></pane>
            <pane content-url="https://www.telerik.com/"></pane>
    </kendo-splitter>
public IActionResult PaneContent()
{
    return PartialView();
}

See Also

In this article