Telerik UI for ASP.NET MVC Splitter Basic Usage

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
index.cshtml
IndexController.cs

Also available for:

CLIENT-SIDE API SERVER-SIDE API
devcraft ninja image

The Splitter component 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.

Description

The Telerik UI for ASP.NET MVC Splitter provides a dynamic layout of collapsible and resizable panes. The Splitter can display any content, such as plain HTML, other UI components, remote data, or even nested Splitters, which allows you to create complex layouts for users to resize and tailor.

The ASP.NET MVC Splitter component comes with combined vertical and horizontal orientation options, auto-resizing, and size-persisting. You can configure each pane size, visibility, and content to see the information that you require.

This demo illustrates how to split the page into sections by using nested Splitters with different orientations and multiple panes.

The ASP.NET MVC Splitter control is part of Telerik UI for ASP.NET MVC, a professional-grade UI library with 110+ components for building modern and feature-rich web applications. The Splitter is a server-side wrapper for the Kendo UI for jQuery Splitter component and comes in the form of an HtmlHelper.

Functionality and Features

  • Auto-resizing to a Window—When the Splitter is displayed inside a resizable Window, you can configure it to resize automatically along with the Window component.
  • Auto-resizing to the content—Expand the Splitter based on the content inside a pane.
  • Auto-resizing the height—Expand the Splitter component vertically and resize it within the browser window.
  • Persisting the pane size—Keep the Splitter pane size in percentage upon user resizing.
  • Vertical and horizontal orientation—Place the Splitter panes in a horizontal or vertical order.
  • Content—The Splitter enables you to render static and asynchronous content.
  • Events—Handle the available Splitter events to track the user interaction with the panes.
  • API—Use the API methods to control and change the Splitter options dynamically.
  • Accessibility and keyboard navigation—The Splitter is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.
  • RTL support—The Splitter enables you to render its content in a right-to-left direction.

Additional Apps

This Splitter example is part of a unique collection of hundreds of ASP.NET MVC demos, with which you can see all Telerik ASP.NET MVC components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in the ThemeBuilder.

Support & Learning Resources

Additional Resources