ASP.NET MVC Splitter Overview
The Splitter is part of Telerik UI for ASP.NET MVC, 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 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.
@(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>);
})
)
public class SplitterController : Controller
{
public ActionResult 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>
Functionality and Features
- Auto-resizing to window—You can auto-resize the Splitter to fit to the Window component.
- Auto-resizing to content—You can expand the Splitter to fit the content within.
- Auto-resizing the height—You can make the Splitter expand vertically and resize together with the browser window.
- Persisting the pane size—You can keep the Splitter pane sizes in percentages.