Search results

Resizing Panels in Blazor Dashboard Layout component

03 Aug 2021 / 1 minute to read

The DashboardLayout component is also provided with the panel resizing functionality, which can be enabled or disabled using the AllowResizing property. This functionality allows you to resize the panels dynamically through UI interactions using the resizing handlers, which controls the panel resizing in various directions.

Copied to clipboard
@using Syncfusion.Blazor.Layouts

<SfDashboardLayout CellSpacing="@(new double[]{10 ,10 })" Columns="5" CellAspectRatio="2"  AllowResizing="true">
        <DashboardLayoutPanel SizeX=2 SizeY=2 Column=1>
        <DashboardLayoutPanel SizeY=2 Column=3>
        <DashboardLayoutPanel Row=1>

    .e-panel-content {
        text-align: center;
        margin-top: 10px;

The following output demonstrates the Resizing behavior of Dashboard layout component.

Resizing of panels

Note: Initially, the panels can be resized only in south-east direction. However, panels can also be resized in east, west, north, south, and south-west directions by defining the required directions with the ResizableHandles property.