State Persistence in Blazor Dashboard Layout Component
14 Mar 20242 minutes to read
State persistence allowed Dashboard Layout component to retain the panel positions Column, Row, width (SizeX), and height (SizeY) values in the localStorage for state maintenance even if the browser is refreshed or if you move to the next page within the browser. This action is handled through the EnablePersistence property which is set to false
by default. When it is set to true
, the panel positions Column
, Row
, width (SizeX
), and height (SizeY
) values of the Dashboard Layout component will be retained even after refreshing the page.
NOTE
Dashboard Layout component ID is essential to set state persistence. Because the data will be persisted based on the component
ID
.
@using Syncfusion.Blazor.Layouts
<SfDashboardLayout ID="dashboard" CellSpacing="@(new double[]{10 ,10 })" Columns="6" EnablePersistence=true>
<DashboardLayoutPanels>
<DashboardLayoutPanel>
<HeaderTemplate><div>Panel 0</div></HeaderTemplate>
<ContentTemplate><div>Panel Content</div></ContentTemplate>
</DashboardLayoutPanel>
<DashboardLayoutPanel SizeX=2 SizeY=2 Column=1>
<HeaderTemplate><div>Panel 1</div></HeaderTemplate>
<ContentTemplate><div>Panel Content</div></ContentTemplate>
</DashboardLayoutPanel>
<DashboardLayoutPanel SizeY=2 Column=3>
<HeaderTemplate><div>Panel 2</div></HeaderTemplate>
<ContentTemplate><div>Panel Content</div></ContentTemplate>
</DashboardLayoutPanel>
<DashboardLayoutPanel Row=1>
<HeaderTemplate><div>Panel 3</div></HeaderTemplate>
<ContentTemplate><div>Panel Content</div></ContentTemplate>
</DashboardLayoutPanel>
</DashboardLayoutPanels>
</SfDashboardLayout>
<style>
#dashboard .e-panel-header {
background-color: rgba(0, 0, 0, .1);
text-align: center;
}
#dashboard .e-panel-content {
text-align: center;
margin-top: 10px;
}
</style>