875729: Need to add the enablePersistence topic in the Core and MVC Dashboard Layout documentation.

ej2-asp-core-mvc/code-snippet/dashboard-layout/persistence/CSHTML.cs

@@ -0,0 +1,5 @@
+ public class stateSpacingModel
+ {
+     public double[]? cellSpacing { get; set; }
+ }
+

ej2-asp-core-mvc/code-snippet/dashboard-layout/persistence/HomeController.cs

@@ -0,0 +1,22 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using Microsoft.AspNetCore.Mvc;
+
+namespace WebApplication.Controllers
+{
+    public class HomeController : Controller
+    {
+        public class spacingModel
+        {
+            public double[] cellSpacing { get; set; }
+        }
+        public ActionResult Index()
+        {
+            spacingModel modelValue = new spacingModel();
+            modelValue.cellSpacing = new double[] { 20, 20 };
+            return View(modelValue);
+        }
+    }
+}

ej2-asp-core-mvc/code-snippet/dashboard-layout/persistence/razor

@@ -0,0 +1,34 @@
+@model WebApplication.Controllers.HomeController.spacingModel
+
+
+<div class="control-section" style="padding-top: 15px;">
+    <div>
+        <!--  DashboardLayout element declaration -->
+        @Html.EJS().DashboardLayout("defaultLayout").EnablePersistence(true).Columns(5).CellSpacing(Model.cellSpacing).Panels(Panel =>
+        {
+            Panel.SizeX(1).SizeY(1).Row(0).Col(0).Content("<div class='content'>0</div>").Add();
+            Panel.SizeX(3).SizeY(2).Row(0).Col(1).Content("<div class='content'>1</div>").Add();
+            Panel.SizeX(1).SizeY(3).Row(0).Col(4).Content("<div class='content'>2</div>").Add();
+            Panel.SizeX(1).SizeY(1).Row(1).Col(0).Content("<div class='content'>3</div>").Add();
+            Panel.SizeX(2).SizeY(1).Row(2).Col(0).Content("<div class='content'>4</div>").Add();
+            Panel.SizeX(1).SizeY(1).Row(2).Col(2).Content("<div class='content'>5</div>").Add();
+            Panel.SizeX(1).SizeY(1).Row(2).Col(3).Content("<div class='content'>6</div>").Add();
+        }).Render()
+        <!-- end of dashboardlayout element -->
+    </div>
+</div>
+
+<style>
+    /* DashboardLayout element styles  */
+    #defaultLayout {
+        padding: 10px;
+    }
+
+    #defaultLayout .e-panel .e-panel-container {
+        vertical-align: middle;
+        font-weight: 600;
+        font-size: 20px;
+        text-align: center;
+        line-height: 160px;
+    }
+</style>

ej2-asp-core-mvc/code-snippet/dashboard-layout/persistence/tagHelper

@@ -0,0 +1,43 @@
+@{
+    ...
+    stateSpacingModel modelValue = new stateSpacingModel();
+    modelValue.cellSpacing = new double[] { 20, 20 };
+}
+
+<div style="padding-top: 15px;">
+    <!--  DashboardLayout element declaration -->
+    <ejs-dashboardlayout id="defaultLayout" columns="6" enablePersistence="true" cellSpacing="@modelValue.cellSpacing">
+        <e-dashboardlayout-panels>
+            <e-dashboardlayout-panel sizeX="1" sizeY="1" row="0" col="0" content="<div>0</div>">
+            </e-dashboardlayout-panel>
+            <e-dashboardlayout-panel sizeX="3" sizeY="2" row="0" col="1" content="<div>1</div>">
+            </e-dashboardlayout-panel>
+            <e-dashboardlayout-panel sizeX="1" sizeY="3" row="0" col="4" content="<div>2</div>">
+            </e-dashboardlayout-panel>
+            <e-dashboardlayout-panel sizeX="1" sizeY="1" row="1" col="0" content="<div>3</div>">
+            </e-dashboardlayout-panel>
+            <e-dashboardlayout-panel sizeX="2" sizeY="1" row="2" col="0" content="<div>4</div>">
+            </e-dashboardlayout-panel>
+            <e-dashboardlayout-panel sizeX="1" sizeY="1" row="2" col="2" content="<div>5</div>">
+            </e-dashboardlayout-panel>
+            <e-dashboardlayout-panel sizeX="1" sizeY="1" row="2" col="3" content="<div>6</div>">
+            </e-dashboardlayout-panel>
+        </e-dashboardlayout-panels>
+    </ejs-dashboardlayout>
+    <!-- end of dashboardlayout element -->
+</div>
+
+<style>
+    /* DashboardLayout element styles  */
+    #defaultLayout {
+        padding: 10px;
+    }
+
+    #defaultLayout .e-panel .e-panel-container {
+        vertical-align: middle;
+        font-weight: 600;
+        font-size: 20px;
+        text-align: center;
+        line-height: 160px;
+    }
+</style>

ej2-asp-core-mvc/dashboard-layout/state-maintenance.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: State Maintenance in ##Platform_Name## Dashboard Layout control
+title: State Maintenance in ##Platform_Name## Dashboard Layout control | Syncfusion
 description: Learn here all about State Maintenance in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: State Maintenance
@@ -40,4 +40,31 @@ The following sample demonstrates how to save and restore the state of the panel
 
 ![State maintenance](./images/state_maintenance.PNG)
 
-N> You can refer to our [ASP.NET Core Dashboard Layout](https://www.syncfusion.com/aspnet-core-ui-controls/dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core Dashboard Layout example](https://ej2.syncfusion.com/aspnetcore/DashboardLayout/DefaultFunctionalities#/material) to know how to present and manipulate data.
+## State Persistence in Dashboard Layout control
+
+State persistence allows the Dashboard Layout control to retain the panel positions ([`row`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.DashboardLayoutPanel.html#Syncfusion_EJ2_Layouts_DashboardLayoutPanel_Row), [`col`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.DashboardLayoutPanel.html#Syncfusion_EJ2_Layouts_DashboardLayoutPanel_Col), width ([`sizeX`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.DashboardLayoutPanel.html#Syncfusion_EJ2_Layouts_DashboardLayoutPanel_SizeX)), and height ([`sizeY`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.DashboardLayoutPanel.html#Syncfusion_EJ2_Layouts_DashboardLayoutPanel_SizeY)) values in the browser's [localStorage](https://www.w3schools.com/html/html5_webstorage.asp) for state maintenance, even if the browser is refreshed or if you navigate to another page within the browser. This feature is controlled through the [`enablePersistence`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html#Syncfusion_EJ2_Layouts_DashboardLayout_EnablePersistence) property, which is set to `false` by default. When set to `true`, the panel positions and sizes of the Dashboard Layout control will be retained even after refreshing the page.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/dashboard-layout/persistence/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="CSHTML.cs" %}
+{% include code-snippet/dashboard-layout/persistence/CSHTML.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/dashboard-layout/persistence/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="HomeController.cs" %}
+{% include code-snippet/dashboard-layout/persistence/HomeController.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+N> You can refer to our [ASP.NET Core Dashboard Layout](https://www.syncfusion.com/aspnet-core-ui-controls/dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core Dashboard Layout example](https://ej2.syncfusion.com/aspnetcore/DashboardLayout/DefaultFunctionalities#/material) to know how to present and manipulate data.