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 + + +
+
+ + @Html.EJS().DashboardLayout("defaultLayout").EnablePersistence(true).Columns(5).CellSpacing(Model.cellSpacing).Panels(Panel => + { + Panel.SizeX(1).SizeY(1).Row(0).Col(0).Content("
0
").Add(); + Panel.SizeX(3).SizeY(2).Row(0).Col(1).Content("
1
").Add(); + Panel.SizeX(1).SizeY(3).Row(0).Col(4).Content("
2
").Add(); + Panel.SizeX(1).SizeY(1).Row(1).Col(0).Content("
3
").Add(); + Panel.SizeX(2).SizeY(1).Row(2).Col(0).Content("
4
").Add(); + Panel.SizeX(1).SizeY(1).Row(2).Col(2).Content("
5
").Add(); + Panel.SizeX(1).SizeY(1).Row(2).Col(3).Content("
6
").Add(); + }).Render() + +
+
+ + \ 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 }; +} + +
+ + + + + + + + + + + + + + + + + + + + +
+ + \ 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..94edd5c629 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 @@ -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. \ No newline at end of file +## 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.