Class RadzenSplitter

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

IDisposable

Inherited Members

RadzenComponent.OnMouseEnter()

RadzenComponent.OnMouseLeave()

RadzenComponent.OnContextMenu(MouseEventArgs)

RadzenComponent.GetCssClass()

RadzenComponent.GetId()

RadzenComponent.Debounce(Func<Task>, int)

RadzenComponent.OnInitialized()

RadzenComponent.SetParametersAsync(ParameterView)

RadzenComponent.OnAfterRenderAsync(bool)

RadzenComponent.RaiseContextMenu(MouseEventArgs)

RadzenComponent.RaiseMouseEnter()

RadzenComponent.AddContextMenu()

RadzenComponent.RaiseMouseLeave()

RadzenComponent.Dispose()

RadzenComponent.Attributes

RadzenComponent.Element

RadzenComponent.MouseEnter

RadzenComponent.MouseLeave

RadzenComponent.ContextMenu

RadzenComponent.Culture

RadzenComponent.DefaultCulture

RadzenComponent.Style

RadzenComponent.Visible

RadzenComponent.UniqueID

RadzenComponent.JSRuntime

RadzenComponent.IsJSRuntimeAvailable

RadzenComponent.Reference

RadzenComponent.CurrentStyle

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSet()

ComponentBase.OnParametersSetAsync()

ComponentBase.StateHasChanged()

ComponentBase.ShouldRender()

ComponentBase.OnAfterRender(bool)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.DispatchExceptionAsync(Exception)

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenSplitter : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

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

RadzenSplitter()

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()

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>

Properties

ChildContent

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

Declaration

[Parameter]
public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
RenderFragment	The panes render fragment containing RadzenSplitterPane definitions.

Collapse

Gets or sets the collapse callback.

Declaration

[Parameter]
public EventCallback<RadzenSplitterEventArgs> Collapse { get; set; }

Property Value

Type	Description
EventCallback<RadzenSplitterEventArgs>	The collapse callback.

Expand

Gets or sets the expand callback.

Declaration

[Parameter]
public EventCallback<RadzenSplitterEventArgs> Expand { get; set; }

Property Value

Type	Description
EventCallback<RadzenSplitterEventArgs>	The expand callback.

IsResizing

Value indicating if the splitter is resizing.

Declaration

public bool IsResizing { get; }

Property Value

Type	Description
bool

Orientation

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

[Parameter]
public Orientation Orientation { get; set; }

Property Value

Type	Description
Orientation	The orientation. Default is Horizontal.

Resize

Gets or sets the resize callback.

Declaration

[Parameter]
public EventCallback<RadzenSplitterResizeEventArgs> Resize { get; set; }

Property Value

Type	Description
EventCallback<RadzenSplitterResizeEventArgs>	The resize callback.

Methods

AddPane(RadzenSplitterPane)

Adds the pane.

Declaration

public void AddPane(RadzenSplitterPane pane)

Parameters

Type	Name	Description
RadzenSplitterPane	pane	The pane.

BuildRenderTree(RenderTreeBuilder)

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

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

GetComponentCssClass()

Gets the component CSS class.

Declaration

protected override string GetComponentCssClass()

Returns

Type	Description
string

Overrides

RadzenComponent.GetComponentCssClass()

OnPaneResized(int, double, int?, double?)

Called when pane resized.

Declaration

[JSInvokable("RadzenSplitter.OnPaneResized")]
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

OnPaneResizing()

Called on pane resizing.

Declaration

[JSInvokable("RadzenSplitter.OnPaneResizing")]
public Task OnPaneResizing()

Returns

Type	Description
Task

Refresh()

Refreshes this instance.

Declaration

public void Refresh()

RemovePane(RadzenSplitterPane)

Removes the pane.

Declaration

public void RemovePane(RadzenSplitterPane pane)

Parameters

Type	Name	Description
RadzenSplitterPane	pane	The pane.

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable