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 ActionResult PaneContent()
{
return PartialView();
}