syncfusion-content · kmkrish001 · Jan 23, 2025 · Jan 23, 2025 · Jan 23, 2025 · Jan 23, 2025
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
@@ -0,0 +1,4 @@
+public class adaptiveSpacingModel
+{
+    public double[]? cellSpacing { get; set; }
+}
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
@@ -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
@@ -0,0 +1,4 @@
+public class panelCellSpacingModel
+{
+    public double[]? cellSpacing { get; set; }
+}
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
@@ -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>
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
@@ -0,0 +1,4 @@
+public class cellSpacingModel
+{
+    public double[] cellSpacing { get; set; }
+}
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
@@ -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
@@ -0,0 +1,4 @@
+  public class panelCellSpacingModel
+  {
+      public double[]? cellSpacing { get; set; }
+  }
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
@@ -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
@@ -0,0 +1,4 @@
+public class ddCellSpacingModel
+{
+    public double[]? cellSpacing { get; set; }
+}
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
@@ -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>
+</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
@@ -0,0 +1,4 @@
+public class ddCellSpacingModel
+{
+    public double[]? cellSpacing { get; set; }
+}
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
@@ -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,23 +28,23 @@
 </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;
         font-size: 20px;
         text-align: center;
         line-height: 90px;
     }
-</style>
+</style>
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
@@ -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;
+}
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
@@ -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>

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
@@ -0,0 +1,5 @@
+public class floatingSpacingModel
+{
+    public double[]? cellSpacing { get; set; }
+}
+
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
@@ -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
@@ -0,0 +1,4 @@
+public class cellSpacingModel
+{
+    public double[] cellSpacing { get; set; }
+}
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
@@ -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
@@ -0,0 +1,5 @@
+public class cellSpacingModel
+{
+    public double[] cellSpacing { get; set; }
+    public double aspectRatio { get; set; }
+}
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
@@ -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
@@ -0,0 +1,4 @@
+public class ddCellSpacingModel
+{
+    public double[]? cellSpacing { get; set; }
+}