From 0b1000ed332a84a38e96d855c84324472f870e39 Mon Sep 17 00:00:00 2001
From: suba-1997 <subalakshmi.r@syncfusion.com>
Date: Thu, 23 Jan 2025 16:04:20 +0530
Subject: [PATCH 1/3] 934883: Test and resolve issues in UG all sections - ASP
 core MVC Dashboard Layout control.

---
 .../adaptive-layout/CSHTML.cs                 |   4 +
 .../adaptive-layout/tagHelper                 |   8 +-
 .../dashboard-layout/add-panel/CSHTML.cs      |   4 +
 .../dashboard-layout/add-panel/tagHelper      |  19 ++-
 .../dashboard-layout/cell-spacing/CSHTML.cs   |   4 +
 .../dashboard-layout/cell-spacing/tagHelper   |   9 +-
 .../dashboard-layout/content-panel/CSHTML.cs  |   4 +
 .../dashboard-layout/content-panel/tagHelper  |   9 +-
 .../disable-dragging/CSHTML.cs                |   4 +
 .../disable-dragging/tagHelper                |  10 +-
 .../dashboard-layout/drag-and-drop/CSHTML.cs  |   4 +
 .../dashboard-layout/drag-and-drop/tagHelper  |  31 +++--
 .../floating-panels/CSHTML.cs                 |   5 +
 .../floating-panels/tagHelper                 |  11 +-
 .../graphical-representation/CSHTML.cs        |   4 +
 .../graphical-representation/tagHelper        |   9 +-
 .../modifying-cell-size/CSHTML.cs             |   5 +
 .../modifying-cell-size/tagHelper             |  10 +-
 .../dashboard-layout/moving/CSHTML.cs         |   4 +
 .../dashboard-layout/moving/tagHelper         |  26 ++--
 .../dashboard-layout/panel-position/CSHTML.cs |   4 +
 .../dashboard-layout/panel-position/tagHelper |   9 +-
 .../dashboard-layout/panel-size/CSHTML.cs     |   4 +
 .../dashboard-layout/panel-size/tagHelper     |  11 +-
 .../placing-content/CSHTML.cs                 |  21 ++++
 .../placing-content/tagHelper                 | 113 ++++++++++++------
 .../dashboard-layout/resize-panel/CSHTML.cs   |   4 +
 .../dashboard-layout/resize-panel/tagHelper   |  20 ++--
 .../resizing-panels/CSHTML.cs                 |   5 +
 .../resizing-panels/tagHelper                 |  27 +++--
 .../dashboard-layout/rtl/CSHTML.cs            |   4 +
 .../dashboard-layout/rtl/tagHelper            |   9 +-
 .../state-maintenance/CSHTML.cs               |   5 +
 .../state-maintenance/tagHelper               |  31 ++---
 .../EJ2_ASP.MVC/getting-started.md            |   8 +-
 .../EJ2_ASP.NETCORE/getting-started.md        |  10 +-
 .../dashboard-layout/adaptive-layout.md       |   4 +-
 .../dashboard-layout/configuring-layout.md    |  16 +--
 .../dashboard-layout/floating-panel.md        |   4 +-
 .../dragging-of-panels.md                     |   8 +-
 .../interaction-with-panels/moving-panels.md  |   4 +-
 .../resizing-of-panels.md                     |   8 +-
 .../panels/position-sizing-of-panels.md       |   8 +-
 .../panels/setting-header-of-panels.md        |   8 +-
 44 files changed, 379 insertions(+), 150 deletions(-)
 create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/adaptive-layout/CSHTML.cs
 create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/add-panel/CSHTML.cs
 create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/cell-spacing/CSHTML.cs
 create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/content-panel/CSHTML.cs
 create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/disable-dragging/CSHTML.cs
 create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/drag-and-drop/CSHTML.cs
 create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/floating-panels/CSHTML.cs
 create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/graphical-representation/CSHTML.cs
 create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/modifying-cell-size/CSHTML.cs
 create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/moving/CSHTML.cs
 create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-position/CSHTML.cs
 create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-size/CSHTML.cs
 create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/placing-content/CSHTML.cs
 create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/resize-panel/CSHTML.cs
 create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/resizing-panels/CSHTML.cs
 create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/rtl/CSHTML.cs
 create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/state-maintenance/CSHTML.cs

diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/adaptive-layout/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/adaptive-layout/CSHTML.cs
new file mode 100644
index 0000000000..b960336add
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/adaptive-layout/CSHTML.cs
@@ -0,0 +1,4 @@
+public class adaptiveSpacingModel
+{
+    public double[]? cellSpacing { get; set; }
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/adaptive-layout/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/adaptive-layout/tagHelper
index 78c05a5429..b2b54e1464 100644
--- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/adaptive-layout/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/adaptive-layout/tagHelper
@@ -1,6 +1,12 @@
+
+@{
+    ....
+    adaptiveSpacingModel modelValue = new adaptiveSpacingModel();
+    modelValue.cellSpacing = new double[] { 20, 20 };
+}
 <div>
     <!--  Dashboardlayout element declaration -->
-    <ejs-dashboardlayout id="dashboard_layout" columns="5" mediaQuery="max-width: 700px" cellSpacing="@Model.cellSpacing">
+    <ejs-dashboardlayout id="dashboard_layout" columns="5" mediaQuery="max-width: 700px" cellSpacing="@modelValue.cellSpacing">
         <e-dashboardlayout-panels>
             <e-dashboardlayout-panel sizeX="1" sizeY="1" row="0" col="0" content="<div>0</div>">
             </e-dashboardlayout-panel>
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/add-panel/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/add-panel/CSHTML.cs
new file mode 100644
index 0000000000..85216ca578
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/add-panel/CSHTML.cs
@@ -0,0 +1,4 @@
+public class panelCellSpacingModel
+{
+    public double[]? cellSpacing { get; set; }
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/add-panel/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/add-panel/tagHelper
index 6e334eebeb..2762470aaf 100644
--- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/add-panel/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/add-panel/tagHelper
@@ -1,3 +1,10 @@
+@{
+    ...
+    var data = new string[] { "Panel0", "Panel1", "Panel2", "Panel3", "Panel4", "Panel5", "Panel6" };
+    panelCellSpacingModel modelValue = new panelCellSpacingModel();
+    modelValue.cellSpacing = new double[] { 10, 10 };
+}
+
 <div id="api_property">
     <div style="display:inline-block">
         <div style="padding:5px;padding-right: 40px;">
@@ -21,7 +28,7 @@
     </div>
     <div style="padding:5px; width: 240px;">
         <!--  Dropdownlist element declaration -->
-        <ejs-dropdownlist id="dropdown" placeholder="Select a id value" dataSource="@ViewBag.data" width="150px" index="0"></ejs-dropdownlist>
+        <ejs-dropdownlist id="dropdown" placeholder="Select a id value" dataSource="data" width="150px" index="0"></ejs-dropdownlist>
     </div>
     <div style="padding:5px;">
         <div style="width:100%">
@@ -33,7 +40,7 @@
 </div>
 <div style="padding-top: 15px;" id="control_dash">
     <!--  Dashboardlayout element declaration -->
-    <ejs-dashboardlayout id="dashboard_layout" columns="5" cellSpacing="@Model.cellSpacing">
+    <ejs-dashboardlayout id="dashboard_layout" columns="5" cellSpacing="@modelValue.cellSpacing">
         <e-dashboardlayout-panels>
             <e-dashboardlayout-panel id="Panel0" sizeX="1" sizeY="1" row="0" col="0" content="<div class='content'>0</div>">
             </e-dashboardlayout-panel>
@@ -102,12 +109,12 @@
 
     #control_dash {
         display: block;
-        width:60%;
-        float:left;
-     }
+        width: 60%;
+        float: left;
+    }
 
     #api_property {
         display: inline-block;
-        margin:30px;
+        margin: 30px;
     }
 </style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/cell-spacing/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/cell-spacing/CSHTML.cs
new file mode 100644
index 0000000000..d89330ddc4
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/cell-spacing/CSHTML.cs
@@ -0,0 +1,4 @@
+public class cellSpacingModel
+{
+    public double[] cellSpacing { get; set; }
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/cell-spacing/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/cell-spacing/tagHelper
index 26cce8adb1..2ef6d5d1c7 100644
--- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/cell-spacing/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/cell-spacing/tagHelper
@@ -1,6 +1,13 @@
+@{
+    ...
+    cellSpacingModel modelValue = new cellSpacingModel();
+    modelValue.cellSpacing = new double[] { 20, 20 };
+}
+
+
 <div>
     <!--  Dashboardlayout element declaration -->
-    <ejs-dashboardlayout id="dashboard_layout" columns="5" cellSpacing="@Model.cellSpacing">
+    <ejs-dashboardlayout id="dashboard_layout" columns="5" cellSpacing="@modelValue.cellSpacing">
         <e-dashboardlayout-panels>
             <e-dashboardlayout-panel sizeX="1" sizeY="1" row="0" col="0" content="<div>0</div>">
             </e-dashboardlayout-panel>
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/content-panel/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/content-panel/CSHTML.cs
new file mode 100644
index 0000000000..bdf391e654
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/content-panel/CSHTML.cs
@@ -0,0 +1,4 @@
+  public class panelCellSpacingModel
+  {
+      public double[]? cellSpacing { get; set; }
+  }
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/content-panel/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/content-panel/tagHelper
index 4efb47ab6c..9b655bb943 100644
--- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/content-panel/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/content-panel/tagHelper
@@ -1,6 +1,13 @@
+@{
+    ...
+    panelCellSpacingModel modelValue = new panelCellSpacingModel();
+    modelValue.cellSpacing = new double[] { 10, 10 };
+}
+
+
 <div>
     <!--  Dashboardlayout element declaration -->
-    <ejs-dashboardlayout id="dashboard_default" columns="6" cellSpacing="@Model.cellSpacing">
+    <ejs-dashboardlayout id="dashboard_default" columns="6" cellSpacing="@modelValue.cellSpacing">
         <e-dashboardlayout-panels>
             <e-dashboardlayout-panel id="Panel0" sizeX="1" sizeY="1" row="0" col="0" header="<div>Panel 0</div>" content="<div class='content'>Panel Content</div>">
             </e-dashboardlayout-panel>
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/disable-dragging/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/disable-dragging/CSHTML.cs
new file mode 100644
index 0000000000..85c1596770
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/disable-dragging/CSHTML.cs
@@ -0,0 +1,4 @@
+public class ddCellSpacingModel
+{
+    public double[]? cellSpacing { get; set; }
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/disable-dragging/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/disable-dragging/tagHelper
index 0f687c4818..e0bac3cf55 100644
--- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/disable-dragging/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/disable-dragging/tagHelper
@@ -1,7 +1,11 @@
-@model WebApplication.Controllers.HomeController.spacingModel
+@{
+    ...
+    ddCellSpacingModel modelValue = new ddCellSpacingModel();
+    modelValue.cellSpacing = new double[] { 10, 10 };
+}
 
 <div>
-    <ejs-dashboardlayout id="dashboard_layout" columns="5" cellSpacing="@Model.cellSpacing" allowDragging="false">
+    <ejs-dashboardlayout id="dashboard_layout" columns="5" cellSpacing="@modelValue.cellSpacing" allowDragging="false">
         <e-dashboardlayout-panels>
             <e-dashboardlayout-panel sizeX="1" sizeY="1" row="0" col="0" content="<div>0</div>">
             </e-dashboardlayout-panel>
@@ -29,4 +33,4 @@
         text-align: center;
         line-height: 90px;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/drag-and-drop/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/drag-and-drop/CSHTML.cs
new file mode 100644
index 0000000000..85c1596770
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/drag-and-drop/CSHTML.cs
@@ -0,0 +1,4 @@
+public class ddCellSpacingModel
+{
+    public double[]? cellSpacing { get; set; }
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/drag-and-drop/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/drag-and-drop/tagHelper
index d5e34c240b..83eff18eb3 100644
--- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/drag-and-drop/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/drag-and-drop/tagHelper
@@ -1,6 +1,13 @@
+@{
+    ...
+    ddCellSpacingModel modelValue = new ddCellSpacingModel();
+    modelValue.cellSpacing = new double[] { 10, 10 };
+}
+
+
 <div>
     <!--  Dashboardlayout element declaration -->
-    <ejs-dashboardlayout id="dashboard_layout" columns="5" cellSpacing="@Model.cellSpacing" drag="onDrag" dragStart="onDragStart" dragStop="onDragStop">
+    <ejs-dashboardlayout id="dashboard_layout" columns="5" cellSpacing="@modelValue.cellSpacing" drag="onDrag" dragStart="onDragStart" dragStop="onDragStop">
         <e-dashboardlayout-panels>
             <e-dashboardlayout-panel sizeX="1" sizeY="1" row="0" col="0" content="<div>0</div>">
             </e-dashboardlayout-panel>
@@ -21,18 +28,18 @@
 </div>
 <!-- end of dashboardlayout element -->
 <script>
-function onDrag(args) {
-    console.log("Dragging");
-}
-function onDragStart(args) {
-    console.log("Drag Start");
-}
-function onDragStop(args) {
-    console.log("Drag Stop");
-}
+    function onDrag(args) {
+        console.log("Dragging");
+    }
+    function onDragStart(args) {
+        console.log("Drag Start");
+    }
+    function onDragStop(args) {
+        console.log("Drag Stop");
+    }
 </script>
 <style>
-     /* DashboardLayout element styles  */
+    /* DashboardLayout element styles  */
     #dashboard_layout .e-panel .e-panel-container {
         vertical-align: middle;
         font-weight: 600;
@@ -40,4 +47,4 @@ function onDragStop(args) {
         text-align: center;
         line-height: 90px;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/floating-panels/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/floating-panels/CSHTML.cs
new file mode 100644
index 0000000000..611ee0f9fd
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/floating-panels/CSHTML.cs
@@ -0,0 +1,5 @@
+public class floatingSpacingModel
+{
+    public double[]? cellSpacing { get; set; }
+}
+    
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/floating-panels/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/floating-panels/tagHelper
index 819f2f22e8..5ba87fae1d 100644
--- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/floating-panels/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/floating-panels/tagHelper
@@ -1,11 +1,18 @@
+
+@{
+    ....
+    floatingSpacingModel modelValue = new floatingSpacingModel();
+    modelValue.cellSpacing = new double[] { 10, 10 };
+}
+
 <div>
     <!--  Button element declaration -->
     <ejs-button id="toggle" cssClass="e-flat e-primary e-outline" content="Enable Floating" isToggle="true"></ejs-button>
-     <!-- end of button element -->
+    <!-- end of button element -->
 </div>
 <div style="padding-top: 15px;">
     <!--  DashboardLayout element declaration -->
-    <ejs-dashboardlayout id="dashboard_default" columns="6" allowFloating="false" cellSpacing="@Model.cellSpacing">
+    <ejs-dashboardlayout id="dashboard_default" columns="6" allowFloating="false" cellSpacing="@modelValue.cellSpacing">
         <e-dashboardlayout-panels>
             <e-dashboardlayout-panel sizeX="2" sizeY="2" row="1" col="0" content="<div class='content'>0</div>">
             </e-dashboardlayout-panel>
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/graphical-representation/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/graphical-representation/CSHTML.cs
new file mode 100644
index 0000000000..d89330ddc4
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/graphical-representation/CSHTML.cs
@@ -0,0 +1,4 @@
+public class cellSpacingModel
+{
+    public double[] cellSpacing { get; set; }
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/graphical-representation/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/graphical-representation/tagHelper
index 5430e4586c..f97ed74bf0 100644
--- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/graphical-representation/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/graphical-representation/tagHelper
@@ -1,6 +1,13 @@
+@{
+    ...
+    cellSpacingModel modelValue = new cellSpacingModel();
+    modelValue.cellSpacing = new double[] { 10, 10 };
+}
+
+
 <div>
     <!--  DashboardLayout element declaration -->
-    <ejs-dashboardlayout id="dashboard_layout" columns="5" showGridLines="true" cellSpacing="@Model.cellSpacing">
+    <ejs-dashboardlayout id="dashboard_layout" columns="5" showGridLines="true" cellSpacing="@modelValue.cellSpacing">
         <e-dashboardlayout-panels>
             <e-dashboardlayout-panel sizeX="3" sizeY="2" row="0" col="1" content="<div>1</div>">
             </e-dashboardlayout-panel>
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/modifying-cell-size/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/modifying-cell-size/CSHTML.cs
new file mode 100644
index 0000000000..432efe815c
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/modifying-cell-size/CSHTML.cs
@@ -0,0 +1,5 @@
+public class cellSpacingModel
+{
+    public double[] cellSpacing { get; set; }
+    public double aspectRatio { get; set; }
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/modifying-cell-size/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/modifying-cell-size/tagHelper
index 2d9d77c3f7..6c7b82ef6b 100644
--- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/modifying-cell-size/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/modifying-cell-size/tagHelper
@@ -1,6 +1,14 @@
+@{
+    ...
+    cellSpacingModel modelValue = new cellSpacingModel();
+    modelValue.cellSpacing = new double[] { 10, 10 };
+    modelValue.aspectRatio = 100 / 50;
+}
+
+
 <div>
     <!--  DashboardLayout element declaration -->
-    <ejs-dashboardlayout id="dashboard_layout" columns="5" cellAspectRatio="@Model.aspectRatio" cellSpacing="@Model.cellSpacing">
+    <ejs-dashboardlayout id="dashboard_layout" columns="5" cellAspectRatio="@modelValue.aspectRatio" cellSpacing="@modelValue.cellSpacing">
         <e-dashboardlayout-panels>
             <e-dashboardlayout-panel sizeX="1" sizeY="1" row="0" col="0" content="<div class='content'>0</div>">
             </e-dashboardlayout-panel>
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/moving/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/moving/CSHTML.cs
new file mode 100644
index 0000000000..85c1596770
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/moving/CSHTML.cs
@@ -0,0 +1,4 @@
+public class ddCellSpacingModel
+{
+    public double[]? cellSpacing { get; set; }
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/moving/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/moving/tagHelper
index 4999ab9b29..98d8d5b494 100644
--- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/moving/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/moving/tagHelper
@@ -1,7 +1,11 @@
-@model WebApplication.Controllers.HomeController.spacingModel
+@{
+    ...
+    ddCellSpacingModel modelValue = new ddCellSpacingModel();
+    modelValue.cellSpacing = new double[] { 10, 10 };
+}
 
 <div>
-    <ejs-dashboardlayout id="dashboard_default" columns="5"  allowResizing="true" created="onCreated" change="onChange" cellSpacing="@Model.cellSpacing">
+    <ejs-dashboardlayout id="dashboard_default" columns="5" allowResizing="true" created="onCreated" change="onChange" cellSpacing="@modelValue.cellSpacing">
         <e-dashboardlayout-panels>
             <e-dashboardlayout-panel sizeX="1" sizeY="1" row="0" col="0" content="<div class='content'>0</div>">
             </e-dashboardlayout-panel>
@@ -21,14 +25,14 @@
     </ejs-dashboardlayout>
 </div>
 <script>
-function onCreated(args) {
-    // movePanel("id", row, col)
-    this.movePanel("layout_0", 1, 0);
-}
-//Dashboard Layout's change event function
-function onChange(args) {
-    console.log("Change event triggered");
-}
+    function onCreated(args) {
+        // movePanel("id", row, col)
+        this.movePanel("layout_0", 1, 0);
+    }
+    //Dashboard Layout's change event function
+    function onChange(args) {
+        console.log("Change event triggered");
+    }
 
 </script>
 <style>
@@ -39,4 +43,4 @@ function onChange(args) {
         text-align: center;
         line-height: 90px;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-position/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-position/CSHTML.cs
new file mode 100644
index 0000000000..85216ca578
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-position/CSHTML.cs
@@ -0,0 +1,4 @@
+public class panelCellSpacingModel
+{
+    public double[]? cellSpacing { get; set; }
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-position/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-position/tagHelper
index 2d60e2cace..86682d5f18 100644
--- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-position/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-position/tagHelper
@@ -1,6 +1,13 @@
+@{
+    ..
+    panelCellSpacingModel modelValue = new panelCellSpacingModel();
+    modelValue.cellSpacing = new double[] { 20, 20 };
+}
+
+
 <div>
     <!--  DashboardLayout element declaration -->
-    <ejs-dashboardlayout id="dashboard_layout" columns="5" cellSpacing="@Model.cellSpacing">
+    <ejs-dashboardlayout id="dashboard_layout" columns="5" cellSpacing="@modelValue.cellSpacing">
         <e-dashboardlayout-panels>
             <e-dashboardlayout-panel row="0" col="0" content="<div class='content'>1</div>">
             </e-dashboardlayout-panel>
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-size/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-size/CSHTML.cs
new file mode 100644
index 0000000000..85216ca578
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-size/CSHTML.cs
@@ -0,0 +1,4 @@
+public class panelCellSpacingModel
+{
+    public double[]? cellSpacing { get; set; }
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-size/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-size/tagHelper
index 8972fe9c3c..2c8f1fc015 100644
--- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-size/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-size/tagHelper
@@ -1,6 +1,13 @@
+@{
+    ...
+    panelCellSpacingModel modelValue = new panelCellSpacingModel();
+    modelValue.cellSpacing = new double[] { 20, 20 };
+}
+
+
 <div>
     <!--  DashboardLayout element declaration -->
-    <ejs-dashboardlayout id="dashboard_layout" columns="5" cellSpacing="@Model.cellSpacing">
+    <ejs-dashboardlayout id="dashboard_layout" columns="5" cellSpacing="@modelValue.cellSpacing">
         <e-dashboardlayout-panels>
             <e-dashboardlayout-panel sizeX="1" sizeY="1" row="0" col="0" content="<div class='content'>0</div>">
             </e-dashboardlayout-panel>
@@ -30,4 +37,4 @@
         text-align: center;
         line-height: 90px;
     }
-</style>
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/placing-content/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/placing-content/CSHTML.cs
new file mode 100644
index 0000000000..e8949d6e67
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/placing-content/CSHTML.cs
@@ -0,0 +1,21 @@
+public class componentSpacingModel
+{
+    public double[]? cellSpacing { get; set; }
+}
+public class ChartData
+{
+    public string? month;
+    public double sales;
+}
+public class LineData
+{
+    public double x;
+    public double y;
+}
+
+public class PieData
+{
+    public string x;
+    public double y;
+    public string? text;
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/placing-content/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/placing-content/tagHelper
index 736e9fbf24..f75f9a68c2 100644
--- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/placing-content/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/placing-content/tagHelper
@@ -1,6 +1,49 @@
+@{
+    ...
+    componentSpacingModel modelValue = new componentSpacingModel();
+    modelValue.cellSpacing = new double[] { 10, 10 };
+
+    List<ChartData> chartData = new List<ChartData>
+        {
+            new ChartData { month = "Jan", sales = 35, },
+            new ChartData { month = "Feb", sales = 28, },
+            new ChartData { month = "Mar", sales = 34, },
+            new ChartData { month = "Apr", sales = 32, },
+            new ChartData { month = "May", sales = 40, },
+            new ChartData { month = "Jun", sales = 32, },
+            new ChartData { month = "Jul", sales = 35, },
+            new ChartData { month = "Aug", sales = 55, },
+            new ChartData { month = "Sep", sales = 38, },
+            new ChartData { month = "Oct", sales = 30, },
+            new ChartData { month = "Nov", sales = 25, },
+            new ChartData { month = "Dec", sales = 32, }
+        };
+
+    List<LineData> lineData = new List<LineData>
+        {
+            new LineData { x = 2013, y = 28, },
+            new LineData { x = 2014, y = 25, },
+            new LineData { x = 2015, y = 26, },
+            new LineData { x = 2016, y = 27, },
+            new LineData { x = 2017, y = 32, },
+            new LineData { x = 2018, y = 35, }
+        };
+
+    List<PieData> pieData1 = new List<PieData>
+        {
+            new PieData { x = "Chrome", y = 37, text = "37%", },
+            new PieData { x = "UC Browser", y = 17, text = "17%", },
+            new PieData { x = "iPhone", y = 19, text = "19%", },
+            new PieData { x = "Others", y = 4, text = "4%", },
+            new PieData { x = "Opera", y = 11, text = "11%", },
+            new PieData { x = "Android", y = 12, text = "12%", }
+        };
+}
+
+
 <div>
     <!--  DashboardLayout element declaration -->
-    <ejs-dashboardlayout id="dashboard" columns="6" draggableHandle=".e-panel-header" cellSpacing="@Model.cellSpacing">
+    <ejs-dashboardlayout id="dashboard" columns="6" draggableHandle=".e-panel-header" cellSpacing="@modelValue.cellSpacing">
         <e-dashboardlayout-panels>
             <e-dashboardlayout-panel id="Panel1" sizeX="3" sizeY="2" row="0" col="3">
                 <e-content-template>
@@ -12,15 +55,15 @@
                                 </div>
                             </div>
                             <div class="e-panel-content">
-                                    <!--   Column Chart element declaration -->
-                                    <ejs-chart id="columnChart" height="162px">
-                                        <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
-                                        <e-series-collection>
-                                            <e-series dataSource="ViewBag.chartSource" xName='month' yName='sales' type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
-                                            </e-series>
-                                        </e-series-collection>
-                                    </ejs-chart>
-                                    <!-- end of column chart element -->
+                                <!--   Column Chart element declaration -->
+                                <ejs-chart id="columnChart" height="162px">
+                                    <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
+                                    <e-series-collection>
+                                        <e-series dataSource="chartData" xName='month' yName='sales' type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
+                                        </e-series>
+                                    </e-series-collection>
+                                </ejs-chart>
+                                <!-- end of column chart element -->
                             </div>
                         </div>
                     </div>
@@ -36,19 +79,19 @@
                                 </div>
                             </div>
                             <div class="e-panel-content">
-                                    <!--   Pie Chart element declaration -->
-                                    <ejs-accumulationchart id="pieChart1" enableAnimation="false" enableSmartLabels="true" height="162px">
-                                        <e-accumulationchart-tooltipsettings enable="true" format="${point.x} : <b>${point.y}%</b>"></e-accumulationchart-tooltipsettings>
-                                        <e-accumulationchart-legendsettings visible="false">
-                                        </e-accumulationchart-legendsettings>
-                                        <e-accumulation-series-collection>
-                                            <e-accumulation-series dataSource="ViewBag.pieSource1" xName="x" yName="y" radius="70%" name="Browser">
-                                                <e-accumulationseries-datalabel name="text" visible="true" position="Inside">
-                                                </e-accumulationseries-datalabel>
-                                            </e-accumulation-series>
-                                        </e-accumulation-series-collection>
-                                    </ejs-accumulationchart>
-                                    <!-- end of pie chart element -->
+                                <!--   Pie Chart element declaration -->
+                                <ejs-accumulationchart id="pieChart1" enableAnimation="false" enableSmartLabels="true" height="162px">
+                                    <e-accumulationchart-tooltipsettings enable="true" format="${point.x} : <b>${point.y}%</b>"></e-accumulationchart-tooltipsettings>
+                                    <e-accumulationchart-legendsettings visible="false">
+                                    </e-accumulationchart-legendsettings>
+                                    <e-accumulation-series-collection>
+                                        <e-accumulation-series dataSource="pieData1" xName="x" yName="y" radius="70%" name="Browser">
+                                            <e-accumulationseries-datalabel name="text" visible="true" position="Inside">
+                                            </e-accumulationseries-datalabel>
+                                        </e-accumulation-series>
+                                    </e-accumulation-series-collection>
+                                </ejs-accumulationchart>
+                                <!-- end of pie chart element -->
                             </div>
                         </div>
                     </div>
@@ -64,15 +107,15 @@
                                 </div>
                             </div>
                             <div class="e-panel-content">
-                                    <!--   Line Chart element declaration -->
-                                    <ejs-chart id="lineChart" height="162px">
-                                        <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
-                                        <e-series-collection>
-                                            <e-series dataSource="ViewBag.lineSource" xName='x' yName='y' type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
-                                            </e-series>
-                                        </e-series-collection>
-                                    </ejs-chart>
-                                    <!-- end of line chart element -->
+                                <!--   Line Chart element declaration -->
+                                <ejs-chart id="lineChart" height="162px">
+                                    <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
+                                    <e-series-collection>
+                                        <e-series dataSource="lineData" xName='x' yName='y' type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
+                                        </e-series>
+                                    </e-series-collection>
+                                </ejs-chart>
+                                <!-- end of line chart element -->
                             </div>
                         </div>
                     </div>
@@ -129,9 +172,9 @@
         height: 30px
     }
 
-    .e-dashboard-layout.e-control .e-panel .e-panel-header div {
-        text-align: center;
-    }
+        .e-dashboard-layout.e-control .e-panel .e-panel-header div {
+            text-align: center;
+        }
 
     .header {
         padding: 5px;
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/resize-panel/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/resize-panel/CSHTML.cs
new file mode 100644
index 0000000000..85c1596770
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/resize-panel/CSHTML.cs
@@ -0,0 +1,4 @@
+public class ddCellSpacingModel
+{
+    public double[]? cellSpacing { get; set; }
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/resize-panel/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/resize-panel/tagHelper
index ebc50986f9..982df4bb71 100644
--- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/resize-panel/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/resize-panel/tagHelper
@@ -1,7 +1,11 @@
-@model WebApplication.Controllers.HomeController.spacingModel
+@{
+    ...
+    ddCellSpacingModel modelValue = new ddCellSpacingModel();
+    modelValue.cellSpacing = new double[] { 10, 10 };
+}
 
 <div>
-    <ejs-dashboardlayout id="dashboard_default" columns="5"  allowResizing="true"  created="onCreated" cellSpacing="@Model.cellSpacing">
+    <ejs-dashboardlayout id="dashboard_default" columns="5" allowResizing="true" created="onCreated" cellSpacing="@modelValue.cellSpacing">
         <e-dashboardlayout-panels>
             <e-dashboardlayout-panel sizeX="1" sizeY="1" row="0" col="0" content="<div class='content'>0</div>">
             </e-dashboardlayout-panel>
@@ -21,12 +25,12 @@
     </ejs-dashboardlayout>
 </div>
 <script>
-//Dashboard Layout's created event function
-function onCreated(args) {
-    // resizePanel("id", sizeX, sizeY)
-    this.resizePanel("layout_4", 1, 1);
-    this.resizePanel("layout_5", 2, 1);
-}
+    //Dashboard Layout's created event function
+    function onCreated(args) {
+        // resizePanel("id", sizeX, sizeY)
+        this.resizePanel("layout_4", 1, 1);
+        this.resizePanel("layout_5", 2, 1);
+    }
 
 </script>
 <style>
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/resizing-panels/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/resizing-panels/CSHTML.cs
new file mode 100644
index 0000000000..8f927ec7ac
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/resizing-panels/CSHTML.cs
@@ -0,0 +1,5 @@
+public class ddCellSpacingModel
+{
+    public double[]? cellSpacing { get; set; }
+    public string[] handles { get; set; }
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/resizing-panels/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/resizing-panels/tagHelper
index a78cf2f0b1..f3d8d64da0 100644
--- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/resizing-panels/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/resizing-panels/tagHelper
@@ -1,6 +1,13 @@
+@{
+    ...
+    ddCellSpacingModel modelValue = new ddCellSpacingModel();
+    modelValue.cellSpacing = new double[] { 10, 10 };
+    modelValue.handles = new string[] { "e-south-east", "e-east", "e-west", "e-south-west", "e-south" };
+}
+
 <div>
     <!--  DashboardLayout element declaration -->
-    <ejs-dashboardlayout id="dashboard_default" columns="5" resizableHandles="@Model.handles" allowResizing="true"  resize="onResize" resizeStart="onResizeStart" resizeStop="onResizeStop" cellSpacing="@Model.cellSpacing">
+    <ejs-dashboardlayout id="dashboard_default" columns="5" resizableHandles="@modelValue.handles" allowResizing="true" resize="onResize" resizeStart="onResizeStart" resizeStop="onResizeStop" cellSpacing="@modelValue.cellSpacing">
         <e-dashboardlayout-panels>
             <e-dashboardlayout-panel sizeX="1" sizeY="1" row="0" col="0" content="<div class='content'>0</div>">
             </e-dashboardlayout-panel>
@@ -21,15 +28,15 @@
     <!-- end of dashboardlayout element -->
 </div>
 <script>
-function onResize(args) {
-    console.log("Resizing");
-}
-function onResizeStart(args) {
-    console.log("Resize start");
-}
-function onResizeStop(args) {
-    console.log("Resize Stop");
-}
+    function onResize(args) {
+        console.log("Resizing");
+    }
+    function onResizeStart(args) {
+        console.log("Resize start");
+    }
+    function onResizeStop(args) {
+        console.log("Resize Stop");
+    }
 </script>
 <style>
     /* DashboardLayout element styles  */
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/rtl/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/rtl/CSHTML.cs
new file mode 100644
index 0000000000..d89330ddc4
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/rtl/CSHTML.cs
@@ -0,0 +1,4 @@
+public class cellSpacingModel
+{
+    public double[] cellSpacing { get; set; }
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/rtl/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/rtl/tagHelper
index 37cf76c453..1b86c07ad7 100644
--- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/rtl/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/rtl/tagHelper
@@ -1,7 +1,12 @@
-@model WebApplication.Controllers.HomeController.spacingModel
+@{
+    ...
+    cellSpacingModel modelValue = new cellSpacingModel();
+    modelValue.cellSpacing = new double[] { 10, 10 };
+}
+
 
 <div>
-    <ejs-dashboardlayout id="dashboard_default" columns="5" cellSpacing="@Model.cellSpacing" enableRtl="true">
+    <ejs-dashboardlayout id="dashboard_default" columns="5" cellSpacing="@modelValue.cellSpacing" enableRtl="true">
         <e-dashboardlayout-panels>
             <e-dashboardlayout-panel id="Panel0" sizeX="1" sizeY="1" row="0" col="0" header="<div>Panel 0</div>" content="<div class='content'></div>">
             </e-dashboardlayout-panel>
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/state-maintenance/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/state-maintenance/CSHTML.cs
new file mode 100644
index 0000000000..7baf440c82
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/state-maintenance/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/state-maintenance/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/state-maintenance/tagHelper
index 2e76c5fd3b..1fff913ad2 100644
--- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/state-maintenance/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/state-maintenance/tagHelper
@@ -1,5 +1,8 @@
-@model WebApplication.Controllers.HomeController.spacingModel
-
+@{
+    ...
+    stateSpacingModel modelValue = new stateSpacingModel();
+    modelValue.cellSpacing = new double[] { 20, 20 };
+}
 <div>
     <!--  Button element declaration -->
     <ejs-button id="save" cssClass="e-primary" content="Save"></ejs-button>
@@ -8,7 +11,7 @@
 </div>
 <div style="padding-top: 15px;">
     <!--  DashboardLayout element declaration -->
-    <ejs-dashboardlayout id="dashboard_default" columns="5" created="onCreated" cellSpacing="@Model.cellSpacing">
+    <ejs-dashboardlayout id="dashboard_default" columns="5" created="onCreated" cellSpacing="@modelValue.cellSpacing">
         <e-dashboardlayout-panels>
             <e-dashboardlayout-panel sizeX="1" sizeY="1" row="0" col="0" content="<div class='content'>0</div>">
             </e-dashboardlayout-panel>
@@ -30,12 +33,12 @@
 </div>
 
 <script>
-   document.addEventListener('DOMContentLoaded', function () {
+    document.addEventListener('DOMContentLoaded', function () {
         // Create instances for dashboardlayout element
         var dashboard = document.getElementById('dashboard_default').ej2_instances[0];
         // Save the current panels
         document.getElementById('save').onclick = function (e) {
-          onCreated();
+            onCreated();
         };
         // Restore the initial panels
         document.getElementById('restore').onclick = function (e) {
@@ -43,15 +46,15 @@
         };
     });
     function onCreated() {
-            var dashboard = document.getElementById('dashboard_default').ej2_instances[0];
-            restoreModel = dashboard.serialize();
-            restoreModel[0].content = '<div class="content">0</div>';
-            restoreModel[1].content = '<div class="content">1</div>';
-            restoreModel[2].content = '<div class="content">2</div>';
-            restoreModel[3].content = '<div class="content">3</div>';
-            restoreModel[4].content = '<div class="content">4</div>';
-            restoreModel[5].content = '<div class="content">5</div>';
-            restoreModel[6].content = '<div class="content">6</div>';
+        var dashboard = document.getElementById('dashboard_default').ej2_instances[0];
+        restoreModel = dashboard.serialize();
+        restoreModel[0].content = '<div class="content">0</div>';
+        restoreModel[1].content = '<div class="content">1</div>';
+        restoreModel[2].content = '<div class="content">2</div>';
+        restoreModel[3].content = '<div class="content">3</div>';
+        restoreModel[4].content = '<div class="content">4</div>';
+        restoreModel[5].content = '<div class="content">5</div>';
+        restoreModel[6].content = '<div class="content">6</div>';
     }
 </script>
 
diff --git a/ej2-asp-core-mvc/dashboard-layout/EJ2_ASP.MVC/getting-started.md b/ej2-asp-core-mvc/dashboard-layout/EJ2_ASP.MVC/getting-started.md
index 78022d51d6..441494b2e2 100644
--- a/ej2-asp-core-mvc/dashboard-layout/EJ2_ASP.MVC/getting-started.md
+++ b/ej2-asp-core-mvc/dashboard-layout/EJ2_ASP.MVC/getting-started.md
@@ -49,7 +49,7 @@ Add **Syncfusion.EJ2** namespace reference in `Web.config` under `Views` folder.
 
 ## Add stylesheet and script resources
 
-Here, the theme and script is referred using CDN inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file as follows,
+Here, the theme and script is referred using CDN inside the `<head>` of **~/Pages/Shared/_Layout.cshtml** file as follows,
 
 {% tabs %}
 {% highlight cshtml tabtitle="~/_Layout.cshtml" %}
@@ -69,7 +69,7 @@ N> Checkout the [Themes topic](https://ej2.syncfusion.com/aspnetmvc/documentatio
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> script manager
 
-Also, register the script manager `EJS().ScriptManager()` at the end of `<body>` in the `~/Pages/Shared/_Layout.cshtml` file as follows.
+Also, register the script manager `EJS().ScriptManager()` at the end of `<body>` in the **~/Pages/Shared/_Layout.cshtml** file as follows.
 
 {% tabs %}
 {% highlight cshtml tabtitle="~/_Layout.cshtml" %}
@@ -85,14 +85,14 @@ Also, register the script manager `EJS().ScriptManager()` at the end of `<body>`
 
 ## Add ASP.NET MVC Dashboard Layout control
 
-Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Dashboard Layout control in `~/Views/Home/Index.cshtml` page by the following ways.
+Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Dashboard Layout control in **~/Views/Home/Index.cshtml** page by the following ways.
 
 * Defined the panels property as the attribute in the content template.
 * Using the [Panels](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html#Syncfusion_EJ2_Layouts_DashboardLayout_Panels) property through helper.
 
 ### Setting the panels property using content template
 
-You can render the Dashboard Layout control by adding the panels property as the attribute to the content template. Add the content template with panel definition for Dashboard Layout into your `index.cshtml` page which is present under `Views/Home` folder.
+You can render the Dashboard Layout control by adding the panels property as the attribute to the content template. Add the content template with panel definition for Dashboard Layout into your **index.cshtml** page which is present under **Views/Home** folder.
 
 In the following sample, the dashboard layout is rendered with [Panels](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html#Syncfusion_EJ2_Layouts_DashboardLayout_Panels) property using content template.
 
diff --git a/ej2-asp-core-mvc/dashboard-layout/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/dashboard-layout/EJ2_ASP.NETCORE/getting-started.md
index 2a5e478945..7f66e763a6 100644
--- a/ej2-asp-core-mvc/dashboard-layout/EJ2_ASP.NETCORE/getting-started.md
+++ b/ej2-asp-core-mvc/dashboard-layout/EJ2_ASP.NETCORE/getting-started.md
@@ -38,7 +38,7 @@ Install-Package Syncfusion.EJ2.AspNet.Core -Version {{ site.releaseversion }}
 N> Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core controls are available in [nuget.org.](https://www.nuget.org/packages?q=syncfusion.EJ2) Refer to [NuGet packages topic](https://ej2.syncfusion.com/aspnetcore/documentation/nuget-packages) to learn more about installing NuGet packages in various OS environments. The Syncfusion.EJ2.AspNet.Core NuGet package has dependencies, [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) for JSON serialization and [Syncfusion.Licensing](https://www.nuget.org/packages/Syncfusion.Licensing/) for validating Syncfusion<sup style="font-size:70%">&reg;</sup> license key.
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Tag Helper
-Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper.
+Open **~/Pages/_ViewImports.cshtml** file and import the `Syncfusion.EJ2` TagHelper.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_ViewImports.cshtml" %}
@@ -50,7 +50,7 @@ Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelpe
 
 ## Add stylesheet and script resources
 
-Here, the theme and script is referred using CDN inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file as follows,
+Here, the theme and script is referred using CDN inside the `<head>` of **~/Pages/Shared/_Layout.cshtml** file as follows,
 
 {% tabs %}
 {% highlight cshtml tabtitle="~/_Layout.cshtml" %}
@@ -72,7 +72,7 @@ N> Checkout the [Adding Script Reference](https://ej2.syncfusion.com/aspnetcore/
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Script Manager
 
-Also, register the script manager `<ejs-script>` at the end of `<body>` in the ASP.NET Core application as follows.
+Also, register the script manager `<ejs-scripts>` at the end of `<body>` in the ASP.NET Core application as follows.
 
 {% tabs %}
 {% highlight cshtml tabtitle="~/_Layout.cshtml" %}
@@ -88,14 +88,14 @@ Also, register the script manager `<ejs-script>` at the end of `<body>` in the A
 
 ## Add ASP.NET Core DashboardLayout control
 
-Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core DashboardLayout tag helper in `~/Pages/Index.cshtml` page.
+Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core DashboardLayout tag helper in **~/Pages/Index.cshtml** page.
 
 * Defined the panels property as the attribute in the content template.
 * Using the [`panels`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html#Syncfusion_EJ2_Layouts_DashboardLayout_Panels) property through tag helper.
 
 ### Setting the panels property using content template
 
-DashboardLayout control can be rendered by using the [`ejs-dashboardlayout`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html) tag helper in ASP.NET Core application. Add the below simple code to your `index.cshtml` page which is available within the `Views/Home` folder, to initialize the DashboardLayout.
+DashboardLayout control can be rendered by using the [`ejs-dashboardlayout`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html) tag helper in ASP.NET Core application. Add the below simple code to your **index.cshtml** page which is available within the **Views/Home** folder, to initialize the DashboardLayout.
 
 In the following sample, the dashboardlayout is rendered with [`panels`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html#Syncfusion_EJ2_Layouts_DashboardLayout_Panels) property using content template.
 
diff --git a/ej2-asp-core-mvc/dashboard-layout/adaptive-layout.md b/ej2-asp-core-mvc/dashboard-layout/adaptive-layout.md
index 81a4e319c2..9f1016d3d1 100644
--- a/ej2-asp-core-mvc/dashboard-layout/adaptive-layout.md
+++ b/ej2-asp-core-mvc/dashboard-layout/adaptive-layout.md
@@ -23,8 +23,8 @@ The following sample demonstrates the usage of the [`mediaQuery`](https://help.s
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/dashboard-layout/adaptive-layout/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="HomeController.cs" %}
-{% include code-snippet/dashboard-layout/adaptive-layout/HomeController.cs %}
+{% highlight c# tabtitle="CSHTML.cs" %}
+{% include code-snippet/dashboard-layout/adaptive-layout/CSHTML.cs %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/ej2-asp-core-mvc/dashboard-layout/configuring-layout.md b/ej2-asp-core-mvc/dashboard-layout/configuring-layout.md
index 1eb673f4eb..6fe6c8eb23 100644
--- a/ej2-asp-core-mvc/dashboard-layout/configuring-layout.md
+++ b/ej2-asp-core-mvc/dashboard-layout/configuring-layout.md
@@ -29,8 +29,8 @@ The following sample demonstrates how to modify a cell size using the [`columns`
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/dashboard-layout/modifying-cell-size/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="HomeController.cs" %}
-{% include code-snippet/dashboard-layout/modifying-cell-size/HomeController.cs %}
+{% highlight c# tabtitle="CSHTML.cs" %}
+{% include code-snippet/dashboard-layout/modifying-cell-size/CSHTML.cs %}
 {% endhighlight %}
 {% endtabs %}
 
@@ -60,8 +60,8 @@ The following sample demonstrates the usage of the [`cellSpacing`](https://help.
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/dashboard-layout/cell-spacing/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="HomeController.cs" %}
-{% include code-snippet/dashboard-layout/cell-spacing/HomeController.cs %}
+{% highlight c# tabtitle="CSHTML.cs" %}
+{% include code-snippet/dashboard-layout/cell-spacing/CSHTML.cs %}
 {% endhighlight %}
 {% endtabs %}
 
@@ -91,8 +91,8 @@ In the following sample, the gridlines indicate the cells split-up of the layout
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/dashboard-layout/graphical-representation/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="HomeController.cs" %}
-{% include code-snippet/dashboard-layout/graphical-representation/HomeController.cs %}
+{% highlight c# tabtitle="CSHTML.cs" %}
+{% include code-snippet/dashboard-layout/graphical-representation/CSHTML.cs %}
 {% endhighlight %}
 {% endtabs %}
 
@@ -121,8 +121,8 @@ It is possible to render the Dashboard Layout in right-to-left direction by sett
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/dashboard-layout/rtl/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="HomeController.cs" %}
-{% include code-snippet/dashboard-layout/rtl/HomeController.cs %}
+{% highlight c# tabtitle="CSHTML.cs" %}
+{% include code-snippet/dashboard-layout/rtl/CSHTML.cs %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/ej2-asp-core-mvc/dashboard-layout/floating-panel.md b/ej2-asp-core-mvc/dashboard-layout/floating-panel.md
index 0b809d3617..2658aa4c39 100644
--- a/ej2-asp-core-mvc/dashboard-layout/floating-panel.md
+++ b/ej2-asp-core-mvc/dashboard-layout/floating-panel.md
@@ -21,8 +21,8 @@ The following sample demonstrates how to enable or disable the floating of panel
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/dashboard-layout/floating-panels/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="HomeController.cs" %}
-{% include code-snippet/dashboard-layout/floating-panels/HomeController.cs %}
+{% highlight c# tabtitle="CSHTML.cs" %}
+{% include code-snippet/dashboard-layout/floating-panels/CSHTML.cs %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/dragging-of-panels.md b/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/dragging-of-panels.md
index 87ae013e59..67095b067a 100644
--- a/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/dragging-of-panels.md
+++ b/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/dragging-of-panels.md
@@ -28,8 +28,8 @@ The following sample demonstrates dragging and pushing of panels. For example, w
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/dashboard-layout/drag-and-drop/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="HomeController.cs" %}
-{% include code-snippet/dashboard-layout/drag-and-drop/HomeController.cs %}
+{% highlight c# tabtitle="CSHTML.cs" %}
+{% include code-snippet/dashboard-layout/drag-and-drop/CSHTML.cs %}
 {% endhighlight %}
 {% endtabs %}
 
@@ -60,8 +60,8 @@ The following sample demonstrates customizing the dragging handler of the panels
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/dashboard-layout/dragging-handler/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="HomeController.cs" %}
-{% include code-snippet/dashboard-layout/dragging-handler/HomeController.cs %}
+{% highlight c# tabtitle="CSHTML.cs" %}
+{% include code-snippet/dashboard-layout/dragging-handler/CSHTML.cs %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/moving-panels.md b/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/moving-panels.md
index 837ffa2570..b3be2a3525 100644
--- a/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/moving-panels.md
+++ b/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/moving-panels.md
@@ -33,8 +33,8 @@ The following sample demonstrates moving a panel programatically to a new positi
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/dashboard-layout/moving/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="HomeController.cs" %}
-{% include code-snippet/dashboard-layout/moving/HomeController.cs %}
+{% highlight c# tabtitle="CSHTML.cs" %}
+{% include code-snippet/dashboard-layout/moving/CSHTML.cs %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/resizing-of-panels.md b/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/resizing-of-panels.md
index b0074cdf63..0ede72611e 100644
--- a/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/resizing-of-panels.md
+++ b/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/resizing-of-panels.md
@@ -26,8 +26,8 @@ On resizing a panel in Dashboard layout the following events will be triggered,
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/dashboard-layout/resizing-panels/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="HomeController.cs" %}
-{% include code-snippet/dashboard-layout/resizing-panels/HomeController.cs %}
+{% highlight c# tabtitle="CSHTML.cs" %}
+{% include code-snippet/dashboard-layout/resizing-panels/CSHTML.cs %}
 {% endhighlight %}
 {% endtabs %}
 
@@ -67,8 +67,8 @@ The following sample demonstrates resizing panels programatically in the Dashboa
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/dashboard-layout/resize-panel/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="HomeController.cs" %}
-{% include code-snippet/dashboard-layout/resize-panel/HomeController.cs %}
+{% highlight c# tabtitle="CSHTML.cs" %}
+{% include code-snippet/dashboard-layout/resize-panel/CSHTML.cs %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/ej2-asp-core-mvc/dashboard-layout/panels/position-sizing-of-panels.md b/ej2-asp-core-mvc/dashboard-layout/panels/position-sizing-of-panels.md
index 943f685a80..4d55a5d836 100644
--- a/ej2-asp-core-mvc/dashboard-layout/panels/position-sizing-of-panels.md
+++ b/ej2-asp-core-mvc/dashboard-layout/panels/position-sizing-of-panels.md
@@ -40,8 +40,8 @@ The panels within the layout can be easily positioned or ordered using the [`row
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/dashboard-layout/panel-position/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="HomeController.cs" %}
-{% include code-snippet/dashboard-layout/panel-position/HomeController.cs %}
+{% highlight c# tabtitle="CSHTML.cs" %}
+{% include code-snippet/dashboard-layout/panel-position/CSHTML.cs %}
 {% endhighlight %}
 {% endtabs %}
 
@@ -69,8 +69,8 @@ A panel's size can be varied easily by defining the [`sizeX`](https://help.syncf
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/dashboard-layout/panel-size/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="HomeController.cs" %}
-{% include code-snippet/dashboard-layout/panel-size/HomeController.cs %}
+{% highlight c# tabtitle="CSHTML.cs" %}
+{% include code-snippet/dashboard-layout/panel-size/CSHTML.cs %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/ej2-asp-core-mvc/dashboard-layout/panels/setting-header-of-panels.md b/ej2-asp-core-mvc/dashboard-layout/panels/setting-header-of-panels.md
index 13284703ae..323bb3d84d 100644
--- a/ej2-asp-core-mvc/dashboard-layout/panels/setting-header-of-panels.md
+++ b/ej2-asp-core-mvc/dashboard-layout/panels/setting-header-of-panels.md
@@ -19,8 +19,8 @@ The dashboard layout component is mostly used to represent the data used for mon
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/dashboard-layout/content-panel/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="HomeController.cs" %}
-{% include code-snippet/dashboard-layout/content-panel/HomeController.cs %}
+{% highlight c# tabtitle="CSHTML.cs" %}
+{% include code-snippet/dashboard-layout/content-panel/CSHTML.cs %}
 {% endhighlight %}
 {% endtabs %}
 
@@ -52,8 +52,8 @@ The following sample demonstrates how to add ej2-chart components as the [`conte
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/dashboard-layout/placing-content/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="HomeController.cs" %}
-{% include code-snippet/dashboard-layout/placing-content/HomeController.cs %}
+{% highlight c# tabtitle="CSHTML.cs" %}
+{% include code-snippet/dashboard-layout/placing-content/CSHTML.cs %}
 {% endhighlight %}
 {% endtabs %}
 

From 6c44cb1d1d6bc320c5b53760cc880087e7b5f297 Mon Sep 17 00:00:00 2001
From: suba-1997 <subalakshmi.r@syncfusion.com>
Date: Thu, 23 Jan 2025 16:29:11 +0530
Subject: [PATCH 2/3] 934883: Test and resolve issues in UG all sections - ASP
 core MVC Dashboard Layout control.

---
 .../EJ2_ASP.MVC/getting-started.md            |  4 ++--
 .../dashboard-layout/accessibility.md         |  6 +++---
 .../dashboard-layout/adaptive-layout.md       |  6 +++---
 .../dashboard-layout/configuring-layout.md    |  8 ++++----
 .../dashboard-layout/floating-panel.md        |  8 ++++----
 .../dragging-of-panels.md                     | 10 +++++-----
 .../interaction-with-panels/moving-panels.md  |  4 ++--
 .../resizing-of-panels.md                     |  8 ++++----
 ej2-asp-core-mvc/dashboard-layout/overview.md |  6 +++---
 .../panels/add-remove-panels.md               |  8 ++++----
 .../panels/position-sizing-of-panels.md       |  6 +++---
 .../panels/setting-header-of-panels.md        | 12 +++++------
 .../dashboard-layout/state-maintenance.md     |  6 +++---
 ej2-asp-core-mvc/dashboard-layout/style.md    | 20 +++++++++----------
 14 files changed, 56 insertions(+), 56 deletions(-)

diff --git a/ej2-asp-core-mvc/dashboard-layout/EJ2_ASP.MVC/getting-started.md b/ej2-asp-core-mvc/dashboard-layout/EJ2_ASP.MVC/getting-started.md
index 441494b2e2..31fd283a54 100644
--- a/ej2-asp-core-mvc/dashboard-layout/EJ2_ASP.MVC/getting-started.md
+++ b/ej2-asp-core-mvc/dashboard-layout/EJ2_ASP.MVC/getting-started.md
@@ -94,7 +94,7 @@ Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Dashbo
 
 You can render the Dashboard Layout control by adding the panels property as the attribute to the content template. Add the content template with panel definition for Dashboard Layout into your **index.cshtml** page which is present under **Views/Home** folder.
 
-In the following sample, the dashboard layout is rendered with [Panels](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html#Syncfusion_EJ2_Layouts_DashboardLayout_Panels) property using content template.
+In the following sample, the Dashboard Layout is rendered with [Panels](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html#Syncfusion_EJ2_Layouts_DashboardLayout_Panels) property using content template.
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
@@ -113,7 +113,7 @@ Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (m
 
 You can render the Dashboard Layout control by using the **panels** property through helper.
 
-In the following sample, the dashboard layout is rendered with [Panels](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html#Syncfusion_EJ2_Layouts_DashboardLayout_Panels) property using tag helper.
+In the following sample, the Dashboard Layout is rendered with [Panels](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html#Syncfusion_EJ2_Layouts_DashboardLayout_Panels) property using tag helper.
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
diff --git a/ej2-asp-core-mvc/dashboard-layout/accessibility.md b/ej2-asp-core-mvc/dashboard-layout/accessibility.md
index 0d77eaf304..14507d82fd 100644
--- a/ej2-asp-core-mvc/dashboard-layout/accessibility.md
+++ b/ej2-asp-core-mvc/dashboard-layout/accessibility.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Accessibility in ##Platform_Name## Dashboard Layout Component
-description: Learn here all about Accessibility in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more.
+title: Accessibility in ##Platform_Name## Dashboard Layout control
+description: Learn here all about Accessibility in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Accessibility
 publishingplatform: ##Platform_Name##
@@ -11,7 +11,7 @@ documentation: ug
 
 # Accessibility
 
-The Dashboard Layout component has been designed with keeping the `WAI-ARIA` specifications in mind and applying the `WAI-ARIA` roles, states, and properties. This component is characterized by ARIA accessibility support, which makes navigation easy for people who use assistive technologies (AT).
+The Dashboard Layout control has been designed with keeping the `WAI-ARIA` specifications in mind and applying the `WAI-ARIA` roles, states, and properties. This control is characterized by ARIA accessibility support, which makes navigation easy for people who use assistive technologies (AT).
 
 ## ARIA attributes
 
diff --git a/ej2-asp-core-mvc/dashboard-layout/adaptive-layout.md b/ej2-asp-core-mvc/dashboard-layout/adaptive-layout.md
index 9f1016d3d1..36d5d579bc 100644
--- a/ej2-asp-core-mvc/dashboard-layout/adaptive-layout.md
+++ b/ej2-asp-core-mvc/dashboard-layout/adaptive-layout.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Adaptive Layout in ##Platform_Name## Dashboard Layout Component
-description: Learn here all about Adaptive Layout in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more.
+title: Adaptive Layout in ##Platform_Name## Dashboard Layout control
+description: Learn here all about Adaptive Layout in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Adaptive Layout
 publishingplatform: ##Platform_Name##
@@ -13,7 +13,7 @@ documentation: ug
 
 The control is provided with built-in responsive support, where panels within the layout get adjusted based on their parent element's dimensions to accommodate any resolution which relieves the burden of building responsive dashboards.
 
-The dashboard layout is designed to automatically adapt with lower resolutions by transforming the entire layout into a stacked one, so that the panels will be displayed in a vertical column. By default, whenever the screen resolution meets 600px or lower resolutions this layout transformation occurs. This transformation can be modified for any user defined resolution by defining the [`mediaQuery`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~MediaQuery.html) property of the component.
+The Dashboard Layout is designed to automatically adapt with lower resolutions by transforming the entire layout into a stacked one, so that the panels will be displayed in a vertical column. By default, whenever the screen resolution meets 600px or lower resolutions this layout transformation occurs. This transformation can be modified for any user defined resolution by defining the [`mediaQuery`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~MediaQuery.html) property of the control.
 
 The following sample demonstrates the usage of the [`mediaQuery`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~MediaQuery.html) property to turn out the layout into a stacked one in user defined resolution. Here, whenever the window size reaches 700px or lesser, the layout becomes a stacked layout.
 
diff --git a/ej2-asp-core-mvc/dashboard-layout/configuring-layout.md b/ej2-asp-core-mvc/dashboard-layout/configuring-layout.md
index 6fe6c8eb23..d7199a4c9b 100644
--- a/ej2-asp-core-mvc/dashboard-layout/configuring-layout.md
+++ b/ej2-asp-core-mvc/dashboard-layout/configuring-layout.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Configuring Layout in ##Platform_Name## Dashboard Layout Component
-description: Learn here all about Configuring Layout in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more.
+title: Configuring Layout in ##Platform_Name## Dashboard Layout control
+description: Learn here all about Configuring Layout in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Configuring Layout
 publishingplatform: ##Platform_Name##
@@ -13,7 +13,7 @@ documentation: ug
 
 The entire layout dimensions are assigned based on the height and width of the parent element. Hence, a responsive or static layout can be created by assigning a percentage or static dimension values to the parent element. The layout adapts to mobile resolutions by transforming the entire layout into a stacked orientation, so that, the panels will be displayed in a vertical column.
 
-The **Dashboard Layout** is a grid structured component which can be split into subsections of equal size known as cells. The total number of cells in each row is defined by using the [`columns`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~Columns.html) property of the component. The width of each cell will be auto calculated based on the total number of cells placed in a row and the height of a cell will be same as that of its width. However, the height of these cells can also be configured to any desired size using the [`cellAspectRatio`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~CellAspectRatio.html) property (cellwidth/cellheight ratio) which defines the cell width to height ratio.
+The **Dashboard Layout** is a grid structured control which can be split into subsections of equal size known as cells. The total number of cells in each row is defined by using the [`columns`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~Columns.html) property of the control. The width of each cell will be auto calculated based on the total number of cells placed in a row and the height of a cell will be same as that of its width. However, the height of these cells can also be configured to any desired size using the [`cellAspectRatio`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~CellAspectRatio.html) property (cellwidth/cellheight ratio) which defines the cell width to height ratio.
 
 The number of rows within the layout has no limits and can have any number of rows based on the panels count and position. Panels which acts as data containers will be placed or positioned over these cells.
 
@@ -111,7 +111,7 @@ In the following sample, the gridlines indicate the cells split-up of the layout
 
 ![Graphical representation of the layout](./images/graphical_representation.PNG)
 
-## Rendering component in right-to-left direction
+## Rendering control in right-to-left direction
 
 It is possible to render the Dashboard Layout in right-to-left direction by setting the [enableRtl](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~EnableRtl.html) API to true.
 
diff --git a/ej2-asp-core-mvc/dashboard-layout/floating-panel.md b/ej2-asp-core-mvc/dashboard-layout/floating-panel.md
index 2658aa4c39..73e58fed5b 100644
--- a/ej2-asp-core-mvc/dashboard-layout/floating-panel.md
+++ b/ej2-asp-core-mvc/dashboard-layout/floating-panel.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Floating Panel in ##Platform_Name## Dashboard Layout Component
-description: Learn here all about Floating Panel in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more.
+title: Floating Panel in ##Platform_Name## Dashboard Layout control
+description: Learn here all about Floating Panel in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Floating Panel
 publishingplatform: ##Platform_Name##
@@ -11,9 +11,9 @@ documentation: ug
 
 # Floating panels
 
-The floating functionality of the component allows to effectively use the entire layout for the panel's placement. If the floating functionality is enabled, the panels within the layout get floated upwards automatically to occupy the empty cells available in previous rows. This functionality can be enabled or disabled using the [`allowFloating`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~AllowFloating.html) property of the component.
+The floating functionality of the control allows to effectively use the entire layout for the panel's placement. If the floating functionality is enabled, the panels within the layout get floated upwards automatically to occupy the empty cells available in previous rows. This functionality can be enabled or disabled using the [`allowFloating`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~AllowFloating.html) property of the control.
 
-The following sample demonstrates how to enable or disable the floating of panels in the DashboardLayout component using [`allowFloating`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~AllowFloating.html) property.
+The following sample demonstrates how to enable or disable the floating of panels in the DashboardLayout control using [`allowFloating`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~AllowFloating.html) property.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
diff --git a/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/dragging-of-panels.md b/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/dragging-of-panels.md
index 67095b067a..a4f85008ab 100644
--- a/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/dragging-of-panels.md
+++ b/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/dragging-of-panels.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Dragging Of Panels in ##Platform_Name## Dashboard Layout Component | Syncfusion
-description: Learn here all about Dragging Of Panels in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more.
+title: Dragging Of Panels in ##Platform_Name## Dashboard Layout control | Syncfusion
+description: Learn here all about Dragging Of Panels in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Dragging Of Panels
 publishingplatform: ##Platform_Name##
@@ -9,13 +9,13 @@ documentation: ug
 ---
 
 
-# Dragging of Panels in ##Platform_Name## Dashboard Layout Component
+# Dragging of Panels in ##Platform_Name## Dashboard Layout control
 
-The Dashboard Layout component is provided with dragging functionality to drag and reorder the panels within the layout. While dragging a panel, a holder will be highlighted below the panel indicating the panel placement on panel drop. This helps the user to decide whether to place the panel in the current position or revert to previous position without disturbing the layout.
+The Dashboard Layout control is provided with dragging functionality to drag and reorder the panels within the layout. While dragging a panel, a holder will be highlighted below the panel indicating the panel placement on panel drop. This helps the user to decide whether to place the panel in the current position or revert to previous position without disturbing the layout.
 
 If one or more panels collide while dragging, then the colliding panels will be pushed towards the left or right or top or bottom direction where an adaptive space for the collided panel is available. The position changes of these collided panels will be updated dynamically during dragging of a panel, so the user can conclude whether to place the panel in the current position or not.
 
-While dragging a panel in Dashboard layout the following dragging events will be triggered,
+While dragging a panel in Dashboard Layout the following dragging events will be triggered,
 * [`dragStart`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~DragStart.html) - Triggers when panel drag starts
 * [`drag`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~Drag.html) - Triggers when panel is being dragged
 * [dragStop](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~DragStop.html) - Triggers when panel drag stops
diff --git a/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/moving-panels.md b/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/moving-panels.md
index b3be2a3525..1fa8eacc7a 100644
--- a/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/moving-panels.md
+++ b/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/moving-panels.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Moving Panels in ##Platform_Name## Dashboard Layout Component
-description: Learn here all about Moving Panels in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more.
+title: Moving Panels in ##Platform_Name## Dashboard Layout control
+description: Learn here all about Moving Panels in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Moving Panels
 publishingplatform: ##Platform_Name##
diff --git a/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/resizing-of-panels.md b/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/resizing-of-panels.md
index 0ede72611e..17af02a431 100644
--- a/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/resizing-of-panels.md
+++ b/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/resizing-of-panels.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Resizing Of Panels in ##Platform_Name## Dashboard Layout Component
-description: Learn here all about Resizing of Panels in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more.
+title: Resizing Of Panels in ##Platform_Name## Dashboard Layout control
+description: Learn here all about Resizing of Panels in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Resizing Of Panels
 publishingplatform: ##Platform_Name##
@@ -11,11 +11,11 @@ documentation: ug
 
 # Resizing of panels
 
-The DashboardLayout component is also provided with the panel resizing functionality which can be enabled or disabled using the [`allowResizing`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~AllowResizing.html) 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.
+The DashboardLayout control is also provided with the panel resizing functionality which can be enabled or disabled using the [`allowResizing`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~AllowResizing.html) 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.
 
 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`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~ResizableHandles.html) property.
 
-On resizing a panel in Dashboard layout the following events will be triggered,
+On resizing a panel in Dashboard Layout the following events will be triggered,
 * [resizeStart](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~ResizeStart.html) - Triggers when panel resize starts
 * [resize](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~Resize.html) - Triggers when panel is being resized
 * [resizeStop](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~ResizeStop.html) - Triggers when panel resize stops
diff --git a/ej2-asp-core-mvc/dashboard-layout/overview.md b/ej2-asp-core-mvc/dashboard-layout/overview.md
index 9045018df3..00c0562fbd 100644
--- a/ej2-asp-core-mvc/dashboard-layout/overview.md
+++ b/ej2-asp-core-mvc/dashboard-layout/overview.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Overview in ##Platform_Name## Dashboard Layout Component
-description: Learn here all about Overview in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more.
+title: Overview in ##Platform_Name## Dashboard Layout control
+description: Learn here all about Overview in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Index
 publishingplatform: ##Platform_Name##
@@ -10,7 +10,7 @@ documentation: ug
 
 # Overview
 
-The **DashboardLayout** is a grid structured layout control that helps to create a dashboard with panels. Panels hold the UI components and allows to resize, reorder, drag-n-drop, remove and add options. This allows users to easily place the components at the desired position within the grid layout.
+The **DashboardLayout** is a grid structured layout control that helps to create a dashboard with panels. Panels hold the UI controls and allows to resize, reorder, drag-n-drop, remove and add options. This allows users to easily place the controls at the desired position within the grid layout.
 
 ## Key features
 
diff --git a/ej2-asp-core-mvc/dashboard-layout/panels/add-remove-panels.md b/ej2-asp-core-mvc/dashboard-layout/panels/add-remove-panels.md
index e7427c23cf..5a76b191d1 100644
--- a/ej2-asp-core-mvc/dashboard-layout/panels/add-remove-panels.md
+++ b/ej2-asp-core-mvc/dashboard-layout/panels/add-remove-panels.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Add Remove Panels in ##Platform_Name## Dashboard Layout Component
-description: Learn here all about how to add or remove panels in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more.
+title: Add Remove Panels in ##Platform_Name## Dashboard Layout control
+description: Learn here all about how to add or remove panels in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Add Remove Panels
 publishingplatform: ##Platform_Name##
@@ -11,7 +11,7 @@ documentation: ug
 
 # Adding and removing panels dynamically
 
-In real-time cases, the data being presented within the dashboard should be updated frequently which includes adding or removing the data dynamically within the dashboard. This can be easily achieved by using the `addPanel` and `removePanel` public methods of the component.
+In real-time cases, the data being presented within the dashboard should be updated frequently which includes adding or removing the data dynamically within the dashboard. This can be easily achieved by using the `addPanel` and `removePanel` public methods of the control.
 
 ## Add or remove panels dynamically
 
@@ -24,7 +24,7 @@ dashboard.removeAll();
 
 ```
 
-The following sample demonstrates how to add and remove the panels dynamically in the dashboard layout component. Here, panels can be added in any desired position of required size by selecting them in the numeric boxes and clicking add button and remove them by selecting the ID of the panel.
+The following sample demonstrates how to add and remove the panels dynamically in the Dashboard Layout control. Here, panels can be added in any desired position of required size by selecting them in the numeric boxes and clicking add button and remove them by selecting the ID of the panel.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
diff --git a/ej2-asp-core-mvc/dashboard-layout/panels/position-sizing-of-panels.md b/ej2-asp-core-mvc/dashboard-layout/panels/position-sizing-of-panels.md
index 4d55a5d836..928f9f7e76 100644
--- a/ej2-asp-core-mvc/dashboard-layout/panels/position-sizing-of-panels.md
+++ b/ej2-asp-core-mvc/dashboard-layout/panels/position-sizing-of-panels.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Position Sizing Of Panels in ##Platform_Name## Dashboard Layout Component
-description: Learn here all about Position Sizing of Panels in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more.
+title: Position Sizing Of Panels in ##Platform_Name## Dashboard Layout control
+description: Learn here all about Position Sizing of Panels in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Position Sizing Of Panels
 publishingplatform: ##Platform_Name##
@@ -11,7 +11,7 @@ documentation: ug
 
 # Panels
 
-Panels are the basic building blocks of the dashboard layout component. They act as a container for the data to be visualized or presented. These panels can be positioned or resized for effective presentation of the data.
+Panels are the basic building blocks of the Dashboard Layout control. They act as a container for the data to be visualized or presented. These panels can be positioned or resized for effective presentation of the data.
 
 The below table represents all the available panel properties and the corresponding functionalities
 
diff --git a/ej2-asp-core-mvc/dashboard-layout/panels/setting-header-of-panels.md b/ej2-asp-core-mvc/dashboard-layout/panels/setting-header-of-panels.md
index 323bb3d84d..6299b47757 100644
--- a/ej2-asp-core-mvc/dashboard-layout/panels/setting-header-of-panels.md
+++ b/ej2-asp-core-mvc/dashboard-layout/panels/setting-header-of-panels.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Setting Header Of Panels in ##Platform_Name## Dashboard Layout Component
-description: Learn here all about Setting Header of Panels in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more.
+title: Setting Header Of Panels in ##Platform_Name## Dashboard Layout control
+description: Learn here all about Setting Header of Panels in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Setting Header Of Panels
 publishingplatform: ##Platform_Name##
@@ -11,7 +11,7 @@ documentation: ug
 
 # Header and content of panels
 
-The dashboard layout component is mostly used to represent the data used for monitoring or managing a process. These data or any HTML template can be placed as the [`content`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayoutPanel~Content.html) of a panel using the content property. Also, word or phrase that summarize the panel’s content can be added as the header on the top of each panel using the [`header`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayoutPanel~Header.html) property of the panel.
+The Dashboard Layout control is mostly used to represent the data used for monitoring or managing a process. These data or any HTML template can be placed as the [`content`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayoutPanel~Content.html) of a panel using the content property. Also, word or phrase that summarize the panel’s content can be added as the header on the top of each panel using the [`header`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayoutPanel~Header.html) property of the panel.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
@@ -40,11 +40,11 @@ The dashboard layout component is mostly used to represent the data used for mon
 
 ## Placing components as content
 
-In a dashboard, components like charts, grids, maps, gauges, and more can be used to present complex data. Such components can be placed as the panel content by assigning the corresponding component element as the `content template` of the panel.
+In a dashboard, controls like charts, grids, maps, gauges, and more can be used to present complex data. Such controls can be placed as the panel content by assigning the corresponding control element as the `content template` of the panel.
 
-N> You must assign the empty div element inside the content template to add the component as content and also define the .e-panel, .e-panel-container, .e-panel-header, and .e-panel-content classes while rendering the DashboardLayout component using content template.
+N> You must assign the empty div element inside the content template to add the control as content and also define the .e-panel, .e-panel-container, .e-panel-header, and .e-panel-content classes while rendering the DashboardLayout control using content template.
 
-The following sample demonstrates how to add ej2-chart components as the [`content`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayoutPanel~Content.html) for each panel in the DashboardLayout component.
+The following sample demonstrates how to add ej2-chart controls as the [`content`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayoutPanel~Content.html) for each panel in the DashboardLayout control.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
diff --git a/ej2-asp-core-mvc/dashboard-layout/state-maintenance.md b/ej2-asp-core-mvc/dashboard-layout/state-maintenance.md
index be34234031..c69c12e474 100644
--- a/ej2-asp-core-mvc/dashboard-layout/state-maintenance.md
+++ b/ej2-asp-core-mvc/dashboard-layout/state-maintenance.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: State Maintenance in ##Platform_Name## Dashboard Layout Component
-description: Learn here all about State Maintenance in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more.
+title: State Maintenance in ##Platform_Name## Dashboard Layout control
+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
 publishingplatform: ##Platform_Name##
@@ -11,7 +11,7 @@ documentation: ug
 
 # Panel state maintenance
 
-The current layout structure of the Dashboard Layout component can be obtained and saved to construct another dashboard with same panel structure using the `serialize` public method of the component. This method returns the component's current panel setting which can be used to construct a dashboard with the same layout settings.
+The current layout structure of the Dashboard Layout control can be obtained and saved to construct another dashboard with same panel structure using the `serialize` public method of the control. This method returns the control's current panel setting which can be used to construct a dashboard with the same layout settings.
 
 The following sample demonstrates how to save and restore the state of the panels using the serialize method. Click Save to store the panel's settings and click Restore to restore the previously saved panel settings.
 
diff --git a/ej2-asp-core-mvc/dashboard-layout/style.md b/ej2-asp-core-mvc/dashboard-layout/style.md
index a51e44197d..6e9604d812 100644
--- a/ej2-asp-core-mvc/dashboard-layout/style.md
+++ b/ej2-asp-core-mvc/dashboard-layout/style.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Style in ##Platform_Name## Dashboard Layout Component
-description: Learn here all about Style in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more.
+title: Style in ##Platform_Name## Dashboard Layout control
+description: Learn here all about Style in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Style
 publishingplatform: ##Platform_Name##
@@ -13,9 +13,9 @@ documentation: ug
 
 The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference.
 
-## Customizing the dashboard layout panel header
+## Customizing the Dashboard Layout panel header
 
-Use the following CSS to customize the dashboard layout panel header.
+Use the following CSS to customize the Dashboard Layout panel header.
 
 ```css
 .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
@@ -25,9 +25,9 @@ Use the following CSS to customize the dashboard layout panel header.
 }
 ```
 
-## Customizing the dashboard layout panel content
+## Customizing the Dashboard Layout panel content
 
-Use the following CSS to customize the dashboard layout panel content.
+Use the following CSS to customize the Dashboard Layout panel content.
 
 ```css
 .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-content {
@@ -36,9 +36,9 @@ Use the following CSS to customize the dashboard layout panel content.
 }
 ```
 
-## Customizing the dashboard layout panel resize icon
+## Customizing the Dashboard Layout panel resize icon
 
-Use the following CSS to customize the dashboard layout resize icon.
+Use the following CSS to customize the Dashboard Layout resize icon.
 
 ```css
 .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double{
@@ -49,9 +49,9 @@ Use the following CSS to customize the dashboard layout resize icon.
 }
 ```
 
-## Customizing the dashboard layout panel background
+## Customizing the Dashboard Layout panel background
 
-Use the following CSS to customize the dashboard layout panel background.
+Use the following CSS to customize the Dashboard Layout panel background.
 
 ```css
 .e-dashboardlayout.e-control.e-responsive {

From 28c1db80381207a2a874e01c3e126209c2d354f7 Mon Sep 17 00:00:00 2001
From: suba-1997 <subalakshmi.r@syncfusion.com>
Date: Thu, 23 Jan 2025 16:37:58 +0530
Subject: [PATCH 3/3] 934883: Test and resolve issues in UG all sections - ASP
 core MVC Dashboard Layout control.

---
 .../dragging-handler/CSHTML.cs                | 21 ++++++++
 .../dragging-handler/tagHelper                | 50 +++++++++++++++++--
 2 files changed, 67 insertions(+), 4 deletions(-)
 create mode 100644 ej2-asp-core-mvc/code-snippet/dashboard-layout/dragging-handler/CSHTML.cs

diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/dragging-handler/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/dragging-handler/CSHTML.cs
new file mode 100644
index 0000000000..e8949d6e67
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/dragging-handler/CSHTML.cs
@@ -0,0 +1,21 @@
+public class componentSpacingModel
+{
+    public double[]? cellSpacing { get; set; }
+}
+public class ChartData
+{
+    public string? month;
+    public double sales;
+}
+public class LineData
+{
+    public double x;
+    public double y;
+}
+
+public class PieData
+{
+    public string x;
+    public double y;
+    public string? text;
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/dragging-handler/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/dragging-handler/tagHelper
index 8748005581..6e4e91b18d 100644
--- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/dragging-handler/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/dragging-handler/tagHelper
@@ -1,6 +1,48 @@
+@{
+    ...
+    componentSpacingModel modelValue = new componentSpacingModel();
+    modelValue.cellSpacing = new double[] { 10, 10 };
+
+    List<ChartData> chartData = new List<ChartData>
+        {
+            new ChartData { month = "Jan", sales = 35, },
+            new ChartData { month = "Feb", sales = 28, },
+            new ChartData { month = "Mar", sales = 34, },
+            new ChartData { month = "Apr", sales = 32, },
+            new ChartData { month = "May", sales = 40, },
+            new ChartData { month = "Jun", sales = 32, },
+            new ChartData { month = "Jul", sales = 35, },
+            new ChartData { month = "Aug", sales = 55, },
+            new ChartData { month = "Sep", sales = 38, },
+            new ChartData { month = "Oct", sales = 30, },
+            new ChartData { month = "Nov", sales = 25, },
+            new ChartData { month = "Dec", sales = 32, }
+        };
+
+    List<LineData> lineData = new List<LineData>
+        {
+            new LineData { x = 2013, y = 28, },
+            new LineData { x = 2014, y = 25, },
+            new LineData { x = 2015, y = 26, },
+            new LineData { x = 2016, y = 27, },
+            new LineData { x = 2017, y = 32, },
+            new LineData { x = 2018, y = 35, }
+        };
+
+    List<PieData> pieData1 = new List<PieData>
+        {
+            new PieData { x = "Chrome", y = 37, text = "37%", },
+            new PieData { x = "UC Browser", y = 17, text = "17%", },
+            new PieData { x = "iPhone", y = 19, text = "19%", },
+            new PieData { x = "Others", y = 4, text = "4%", },
+            new PieData { x = "Opera", y = 11, text = "11%", },
+            new PieData { x = "Android", y = 12, text = "12%", }
+        };
+}
+
 <div>
     <!--  Dashboardlayout element declaration -->
-    <ejs-dashboardlayout id="dashboard_default" columns="6" draggableHandle=".e-panel-header" cellSpacing="@Model.cellSpacing">
+    <ejs-dashboardlayout id="dashboard_default" columns="6" draggableHandle=".e-panel-header" cellSpacing="@modelValue.cellSpacing">
         <e-dashboardlayout-panels>
             <e-dashboardlayout-panel id="Panel1" sizeX="3" sizeY="2" row="0" col="3" header="<div class='header'>Last year sales comparison</div><span class='handler e-icons burg-icon'></span>" content="#column">
             </e-dashboardlayout-panel>
@@ -17,7 +59,7 @@
     <ejs-chart id="columnChart" height="162px">          
         <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
         <e-series-collection>
-            <e-series dataSource="ViewBag.chartSource" xName='month' yName='sales' type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"> 
+            <e-series dataSource="chartData" xName='month' yName='sales' type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"> 
             </e-series>
         </e-series-collection>
     </ejs-chart>
@@ -29,7 +71,7 @@
     <ejs-chart id="lineChart" height="162px">
         <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
         <e-series-collection>
-            <e-series dataSource="ViewBag.lineSource" xName='x' yName='y' type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
+            <e-series dataSource="lineData" xName='x' yName='y' type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
             </e-series>
         </e-series-collection>
     </ejs-chart>
@@ -43,7 +85,7 @@
         <e-accumulationchart-legendsettings visible="false">
         </e-accumulationchart-legendsettings>
         <e-accumulation-series-collection>
-            <e-accumulation-series dataSource="ViewBag.pieSource1" xName="x" yName="y" radius="70%" name="Browser">
+            <e-accumulation-series dataSource="pieData1" xName="x" yName="y" radius="70%" name="Browser">
                 <e-accumulationseries-datalabel name="text" visible="true" position="Inside">
                 </e-accumulationseries-datalabel>
             </e-accumulation-series>