New to Telerik UI for ASP.NET Core? Start a free 30-day trial
Razor Page
Updated over 6 months ago
This article describes how to configure the Telerik UI Splitter for ASP.NET Core in a RazorPages scenario.
See the Splitter configuration in the example below, and for the full project with RazorPages examples, visit our GitHub repository.
Razor
@page @model Telerik.Examples.RazorPages.Pages.Splitter.SplitterIndexModel @{ ViewData["Title"] = "SplitterIndex"; } @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf @Html.AntiForgeryToken() <h1>SplitterIndex</h1> @(Html.Kendo().Splitter() .Name("vertical") .Orientation(SplitterOrientation.Vertical) .Panes(verticalPanes => { verticalPanes.Add() .HtmlAttributes(new { id = "top-pane" }) .Scrollable(false) .Collapsible(false) .Content( Html.Kendo().Splitter() .Name("horizontal") .HtmlAttributes(new { style = "height: 100%;" }) .Panes(horizontalPanes => { horizontalPanes.Add() .HtmlAttributes(new { id = "left-pane" }) .Size("220px") .Collapsible(true) .Content(@<div class="pane-content"> <h3>Inner splitter / left pane</h3> <p>Resizable and collapsible.</p> </div>); horizontalPanes.Add() .HtmlAttributes(new { id = "center-pane" }) .Content(@<div class="pane-content"> <h3>Inner splitter / center pane</h3> <p>Resizable only.</p> </div>); horizontalPanes.Add() .HtmlAttributes(new { id = "right-pane" }) .Collapsible(true) .Size("220px") .Content(@<div class="pane-content"> <h3>Inner splitter / right pane</h3> <p>Resizable and collapsible.</p> </div>); }).ToHtmlString() ); verticalPanes.Add() .Size("100px") .HtmlAttributes(new { id = "middle-pane" }) .Collapsible(false) .Content(@<div class="pane-content"> <h3>Outer splitter / middle pane</h3> <p>Resizable only.</p> </div>); verticalPanes.Add() .Size("100px") .HtmlAttributes(new { id = "bottom-pane" }) .Resizable(false) .Collapsible(false) .Content(@<div class="pane-content"> <h3>Outer splitter / bottom pane</h3> <p>Non-resizable and non-collapsible.</p> </div>); }) ) <style> #vertical { height: 380px; } #middle-pane { color: #000; background-color: #ccc; } #bottom-pane { color: #000; background-color: #aaa; } #left-pane, #center-pane, #right-pane { color: #000; background-color: #F5F5F5; } .pane-content { padding: 0 10px; } </style>