DxSplitterPane.SizeChanged Event

Fires when a pane’s size changes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<string> SizeChanged { get; set; }

Parameters

Type	Description
String	A new value of the Size property.

Remarks

When the AllowResize property is set to true, users can resize the pane. Handle the SizeChanged event to respond to the Size property change.

Note

The SizeChanged event does not fire for the last pane. This pane serves as the flexible remainder; its size is calculated from the splitter’s total size minus the sizes of prior panes. The pane’s Size property always remains null.

The following example displays the current width of the first two panes when a user drags the separators:

<ul>
    <li><b>Pane 1 Size:</b> @Pane1Size</li>
    <li><b>Pane 2 Size:</b> @Pane2Size</li>
</ul>

<DxSplitter CssClass="border" Width="100%" Height="400px">
    <Panes>
        <DxSplitterPane Size="30%" AllowResize="true" SizeChanged="OnPane1SizeChanged">
            Pane 1
        </DxSplitterPane>
        <DxSplitterPane Size="40%" AllowResize="true" SizeChanged="OnPane2SizeChanged">
            Pane 2
        </DxSplitterPane>
        <DxSplitterPane>
            Flexible Remainder (Pane 3)
        </DxSplitterPane>
    </Panes>
</DxSplitter>

@code {
    string? Pane1Size;
    string? Pane2Size;

    Task OnPane1SizeChanged(string newSize)
    {
        Pane1Size = newSize;
        return Task.CompletedTask;
    }
    Task OnPane2SizeChanged(string newSize)
    {
        Pane2Size = newSize;
        return Task.CompletedTask;
    }
}