Telerik UI for ASP.NET Core Splitter Basic Usage

The Telerik UI for ASP.NET Core 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 Core 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 Core Splitter control is part of Telerik UI for ASP.NET Core, 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 supports an HtmlHelper and a TagHelper mode.

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.

This Splitter example is part of unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik ASP.NET Core 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 Telerik REPL for ASP.NET Core or ThemeBuilder.