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>Outer splitter / middle pane</h3>
                        </div>);
          verticalPanes.Add()
              .Size("100px")
              .HtmlAttributes(new { id = "bottom-pane" })
              .Content(@<div class="pane-content">
                        </div>);
      })
)

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/");
      }))
public IActionResult PaneContent()
{
    return PartialView();
}

See Also

In this article
Not finding the help you need? Improve this article