RadzenSplitter Class

A splitter component that divides space between resizable panes with draggable dividers. RadzenSplitter creates layouts with user-adjustable panel sizes, ideal for multi-column interfaces or resizable sidebars. Allows users to customize their workspace by dragging dividers to resize panes. Common use cases include code editors with resizable file explorer/code/output panes, email clients with adjustable folder list/message list/message preview, admin dashboards with resizable navigation and content areas, and data analysis tools with adjustable grid/chart/filter panels. Features resizable panes (drag dividers between panes to adjust sizes), Horizontal (side-by-side) or Vertical (top-to-bottom) orientation, size control with fixed pixel sizes/percentages/auto-sized panes, min/max constraints to prevent panes from becoming too small or large, optional collapse/expand functionality per pane, and nested splitters to create complex layouts. Panes are defined using RadzenSplitterPane components. Use Size property for fixed widths/heights.

Inheritance

Object

ComponentBase

RadzenComponent

RadzenSplitter

Implements

IComponent

IHandleEvent

IHandleAfterRender

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenSplitter : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender

Examples

Basic horizontal splitter:

<RadzenSplitter Style="height: 400px;">
    <RadzenSplitterPane Size="30%">
        Left sidebar content
    </RadzenSplitterPane>
    <RadzenSplitterPane>
        Main content (auto-sized)
    </RadzenSplitterPane>
</RadzenSplitter>

Vertical splitter with min/max sizes:

<RadzenSplitter Orientation="Orientation.Vertical" Style="height: 600px;">
    <RadzenSplitterPane Size="200px" Min="100px" Max="400px">
        Top pane (resizable 100-400px)
    </RadzenSplitterPane>
    <RadzenSplitterPane>
        Bottom pane (fills remaining space)
    </RadzenSplitterPane>
</RadzenSplitter>

Constructors

RadzenSplitterlink

A splitter component that divides space between resizable panes with draggable dividers. RadzenSplitter creates layouts with user-adjustable panel sizes, ideal for multi-column interfaces or resizable sidebars. Allows users to customize their workspace by dragging dividers to resize panes. Common use cases include code editors with resizable file explorer/code/output panes, email clients with adjustable folder list/message list/message preview, admin dashboards with resizable navigation and content areas, and data analysis tools with adjustable grid/chart/filter panels. Features resizable panes (drag dividers between panes to adjust sizes), Horizontal (side-by-side) or Vertical (top-to-bottom) orientation, size control with fixed pixel sizes/percentages/auto-sized panes, min/max constraints to prevent panes from becoming too small or large, optional collapse/expand functionality per pane, and nested splitters to create complex layouts. Panes are defined using RadzenSplitterPane components. Use Size property for fixed widths/heights.

Declaration
public RadzenSplitter()

Properties

ChangeStateOnResizelink

Value indicating if the splitter should call StateHasChanged on resizing.

Declaration
public bool ChangeStateOnResize { get; set; }
Property Value
Type Description
boolValue indicating if the splitter should call StateHasChanged on resizing.

ChildContentlink

Gets or sets the panes to display within the splitter. Each RadzenSplitterPane represents one resizable section of the splitter.

Declaration
public RenderFragment ChildContent { get; set; }
Property Value
Type Description
RenderFragmentGets or sets the panes to display within the splitter. Each RadzenSplitterPane represents one resizable section of the splitter.

Collapselink

Gets or sets the collapse callback.

Declaration
public EventCallback<RadzenSplitterEventArgs> Collapse { get; set; }
Property Value
Type Description
EventCallback<RadzenSplitterEventArgs>Gets or sets the collapse callback.

Expandlink

Gets or sets the expand callback.

Declaration
public EventCallback<RadzenSplitterEventArgs> Expand { get; set; }
Property Value
Type Description
EventCallback<RadzenSplitterEventArgs>Gets or sets the expand callback.

IsResizinglink

Value indicating if the splitter is resizing.

Declaration
public bool IsResizing { get; }
Property Value
Type Description
boolValue indicating if the splitter is resizing.

Orientationlink

Gets or sets the layout direction of the splitter. Horizontal arranges panes side-by-side (resizable width), Vertical stacks panes top-to-bottom (resizable height).

Declaration
public Orientation Orientation { get; set; }
Property Value
Type Description
OrientationGets or sets the layout direction of the splitter. Horizontal arranges panes side-by-side (resizable width), Vertical stacks panes top-to-bottom (resizable height).

Resizelink

Gets or sets the resize callback.

Declaration
public EventCallback<RadzenSplitterResizeEventArgs> Resize { get; set; }
Property Value
Type Description
EventCallback<RadzenSplitterResizeEventArgs>Gets or sets the resize callback.

Methods

AddPanelink

Adds the pane.

Declaration
public void AddPane(RadzenSplitterPane pane)
Parameters
Type Name Description
RadzenSplitterPane pane The pane.

BuildRenderTreelink

Declaration
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)
Parameters
Type Name Description
Rendering.RenderTreeBuilder __builder

GetComponentCssClasslink

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string

OnPaneResizedlink

Called when pane resized.

Declaration
public Task OnPaneResized(int paneIndex, double sizeNew, int? paneNextIndex, double? sizeNextNew)
Parameters
Type Name Description
int paneIndex Index of the pane.
double sizeNew The size new.
int? paneNextIndex Index of the pane next.
double? sizeNextNew The size next new.
Returns
Type Description
Task

OnPaneResizinglink

Called on pane resizing.

Declaration
public Task OnPaneResizing()
Returns
Type Description
Task

Refreshlink

Refreshes this instance.

Declaration
public void Refresh()

RemovePanelink

Removes the pane.

Declaration
public void RemovePane(RadzenSplitterPane pane)
Parameters
Type Name Description
RadzenSplitterPane pane The pane.
An error has occurred. This app may no longer respond until reloaded. Reload 🗙