From bf74362df3e803b9340fffea78a20719c261959b Mon Sep 17 00:00:00 2001
From: Prasanth Madhaiyan <prasanth.madhaiyan@syncfusion.com>
Date: Tue, 1 Apr 2025 18:33:54 +0530
Subject: [PATCH 1/3] 875729: Need to add the enablePersistence topic in the
Core and MVC Dashboard Layout documentation.
---
.../dashboard-layout/persistence/CSHTML.cs | 5 +++
.../persistence/HomeController.cs | 22 ++++++++++
.../dashboard-layout/persistence/razor | 34 +++++++++++++++
.../dashboard-layout/persistence/tagHelper | 43 +++++++++++++++++++
.../dashboard-layout/state-maintenance.md | 27 ++++++++++++
5 files changed, 131 insertions(+)
create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/persistence/CSHTML.cs
create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/persistence/HomeController.cs
create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/persistence/razor
create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/persistence/tagHelper
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/persistence/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/persistence/CSHTML.cs
new file mode 100644
index 0000000000..7baf440c82
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/persistence/CSHTML.cs
@@ -0,0 +1,5 @@
+ public class stateSpacingModel
+ {
+ public double[]? cellSpacing { get; set; }
+ }
+
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/persistence/HomeController.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/persistence/HomeController.cs
new file mode 100644
index 0000000000..3d3ee27584
--- /dev/null
+++ b/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);
+ }
+ }
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/persistence/razor b/ej2-asp-core-mvc/code-snippet/dashboard-layout/persistence/razor
new file mode 100644
index 0000000000..6a743fe0df
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/persistence/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/persistence/tagHelper
new file mode 100644
index 0000000000..10c92c4eee
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/dashboard-layout/state-maintenance.md b/ej2-asp-core-mvc/dashboard-layout/state-maintenance.md
index c69c12e474..c0039e447a 100644
--- a/ej2-asp-core-mvc/dashboard-layout/state-maintenance.md
+++ b/ej2-asp-core-mvc/dashboard-layout/state-maintenance.md
@@ -40,4 +40,31 @@ The following sample demonstrates how to save and restore the state of the panel
+## State Persistence in Dashboard Layout control
+
+State persistence allows the Dashboard Layout control to retain the panel positions (`row`, `col`), width (`sizeX`), and height (`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` 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.
\ No newline at end of file
From b3e04ab8456d415ef7d0635db989a1923d6b228b Mon Sep 17 00:00:00 2001
From: PrasanthMadhaiyan <98938528+PrasanthMadhaiyan@users.noreply.github.com>
Date: Tue, 1 Apr 2025 18:44:42 +0530
Subject: [PATCH 2/3] 875729: Resolved front matter Error.
---
ej2-asp-core-mvc/dashboard-layout/state-maintenance.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/ej2-asp-core-mvc/dashboard-layout/state-maintenance.md b/ej2-asp-core-mvc/dashboard-layout/state-maintenance.md
index c0039e447a..5eb5bb852a 100644
--- a/ej2-asp-core-mvc/dashboard-layout/state-maintenance.md
+++ b/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
@@ -67,4 +67,4 @@ State persistence allows the Dashboard Layout control to retain the panel positi
{% 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.
\ No newline at end of file
+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.
From 762c1eed57c3bc6257dca7925444065dcfe95f3e Mon Sep 17 00:00:00 2001
From: PrasanthMadhaiyan <98938528+PrasanthMadhaiyan@users.noreply.github.com>
Date: Wed, 9 Apr 2025 16:01:36 +0530
Subject: [PATCH 3/3] 875729: API link mapped.
---
ej2-asp-core-mvc/dashboard-layout/state-maintenance.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/ej2-asp-core-mvc/dashboard-layout/state-maintenance.md b/ej2-asp-core-mvc/dashboard-layout/state-maintenance.md
index 5eb5bb852a..94edd5c629 100644
--- a/ej2-asp-core-mvc/dashboard-layout/state-maintenance.md
+++ b/ej2-asp-core-mvc/dashboard-layout/state-maintenance.md
@@ -42,7 +42,7 @@ The following sample demonstrates how to save and restore the state of the panel
## State Persistence in Dashboard Layout control
-State persistence allows the Dashboard Layout control to retain the panel positions (`row`, `col`), width (`sizeX`), and height (`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` 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.
+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" %}