diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/custombutton/custombutton.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/custombutton/custombutton.cs
index f4aa9e9e92..831800a274 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/custombutton/custombutton.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/custombutton/custombutton.cs
@@ -1,6 +1,5 @@
- public IActionResult Index()
- {
-   var orders= OrderDetails.GetAllRecords();
-   ViewBag.DataSource = orders;            
-   return View();
- }
\ No newline at end of file
+public IActionResult Index()
+{
+  ViewBag.DataSource = OrderDetails.GetAllRecords();           
+  return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/custombutton/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/custombutton/razor
index bb0f7cd9a8..919f80fa86 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/custombutton/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/custombutton/razor
@@ -1,22 +1,40 @@
-@Html.EJS().Grid("DialogTemplateEdit").DataSource((IEnumerable<object>)ViewBag.DataSource).ActionComplete("actionComplete").Columns(col =>
-   {
-       col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-       col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = true, minLength = 3 }).Add();
-       col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add();
-   }).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete" }).Render()
- 
+@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("348px").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true" }).Add();
+    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").ValidationRules(new { required = "true",min=1, max=1000 }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipName").HeaderText("Ship Name").Width("150").ValidationRules(new { required = "true" }).Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").ValidationRules(new { required = "true" }).Width("150").Add();
+}).ActionComplete("actionComplete").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
 <script>
-    function actionComplete(args) {
-        if (args.requestType === 'beginEdit' || args.requestType === 'add') {
-            let newFooterButton = {
-                buttonModel: { content: 'custom' },
-                click: onCustomButtonClick
-            };
-            args.dialog.buttons.push(newFooterButton);
-            args.dialog.refresh();
-        }
+function actionComplete(args) {
+    var grid = document.getElementById('grid').ej2_instances[0];
+    if (args.requestType === 'beginEdit' || args.requestType === 'add') {
+        args.dialog.buttons = [
+            {
+                buttonModel: { content: 'Discard', cssClass: 'e-primary custom-button-style' },
+                click: () => {
+                    grid.editModule.closeEdit();
+                }
+            },
+            {
+                buttonModel: { content: 'Submit', cssClass: 'e-success custom-button-style' },
+                click: () => {
+                    grid.editModule.endEdit();
+                }
+            }
+        ];
+        args.dialog.refresh();
     }
-    function onCustomButtonClick() {
-        alert('Add/Edit dialog custom footer button clicked');
+}
+</script>
+<style>
+    .e-footer-content .e-btn.custom-button-style {
+        border-radius: 4px;
+        font-size: 15px;
     }
-</script>
\ No newline at end of file
+
+    .e-footer-content .e-btn.e-success.custom-button-style {
+        background: #a1c595;
+    }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/custombutton/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/custombutton/tagHelper
index 897d79fc5e..7c35424522 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/custombutton/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/custombutton/tagHelper
@@ -1,25 +1,42 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" actionComplete="actionComplete" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true">
+<ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="273px" toolbar="@(new List<string>() { "Add", "Edit", "Delete","Update","Cancel" })" actionComplete="actionComplete">
     <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings>
-    <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>
-    <e-grid-columns>
-        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column>
-        <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" width="150"></e-grid-column>
-        <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-grid-column>
-    </e-grid-columns>
+        <e-grid-columns>
+            <e-grid-column field="OrderID" headerText="Order ID" validationRules="@(new { required=true})" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
+            <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" type="string" width="120"></e-grid-column>
+            <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" validationRules="@(new { required=true, min=1,max=1000})" editType="numericedit" width="120"></e-grid-column>
+            <e-grid-column field="ShipName" headerText="Ship Name" width="150" validationRules="@(new { required=true})"></e-grid-column>
+            <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150" validationRules="@(new { required=true})"></e-grid-column>
+        </e-grid-columns>
 </ejs-grid>
-
 <script>
-    function actionComplete(args) {
-        if (args.requestType === 'beginEdit' || args.requestType === 'add') {
-            let newFooterButton = {
-                buttonModel: { content: 'custom' },
-                click: onCustomButtonClick
-            };
-            args.dialog.buttons.push(newFooterButton);
-            args.dialog.refresh();
-        }
-    }
-    function onCustomButtonClick() {
-        alert('Add/Edit dialog custom footer button clicked');
+function actionComplete(args) {
+    var grid = document.getElementById('grid').ej2_instances[0];
+    if (args.requestType === 'beginEdit' || args.requestType === 'add') {
+        args.dialog.buttons = [
+            {
+                buttonModel: { content: 'Discard', cssClass: 'e-primary custom-button-style' },
+                click: () => {
+                    grid.editModule.closeEdit();
+                }
+            },
+            {
+                buttonModel: { content: 'Submit', cssClass: 'e-success custom-button-style' },
+                click: () => {
+                    grid.editModule.endEdit();
+                }
+            }
+        ];
+        args.dialog.refresh();
     }
+}
 </script>
+<style>
+    .e-footer-content .e-btn.custom-button-style {
+        border-radius: 4px;
+        font-size: 15px;
+    }
+
+    .e-footer-content .e-btn.e-success.custom-button-style {
+        background: #a1c595;
+    }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/dialog.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/dialog.cs
index 77d8fe70cf..686c81f8f8 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/dialog.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/dialog.cs
@@ -1,6 +1,5 @@
 public IActionResult Index()
 {
-    var Order = OrderDetails.GetAllRecords();
-    ViewBag.DataSource = Order;
+    ViewBag.DataSource = OrderDetails.GetAllRecords();
     return View();
 } 
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/razor
index 8de6e388c3..2ab1cb5d0e 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/razor
@@ -1,34 +1,27 @@
-@using Syncfusion.EJ2
-
-@section ControlsSection{
-    <div class="control-section">
-        @Html.EJS().Grid("DialogTemplateEdit").DataSource((IEnumerable<object>)ViewBag.dataSource).ActionComplete("actionComplete").Columns(col =>
-   {
-       col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-       col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = true, minLength = 3 }).Add();
-       col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add();
-   }).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
-    </div>
-   
-    <script>
-
-         ej.base.L10n.load({
-            'en-US': {
-                'grid': {
-                    'SaveButton': 'Submit',
-                    'CancelButton': 'Discard'
-                }
-            }
-        });
-
-        function actionComplete(args) {
-            if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
-                var dialog = args.dialog;
-                dialog.showCloseIcon = false;
-                dialog.height = 400;
-                // change the header of the dialog
-                dialog.header = args.requestType === 'beginEdit' ? 'Edit Record of ' + args.rowData['CustomerID'] : 'New Customer';
+@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("348px").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true" }).Add();
+    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").ValidationRules(new { required = "true",min=1, max=1000 }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").ValidationRules(new { required = "true" }).Width("150").Add();
+}).ActionComplete("actionComplete").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
+<script>
+   ej.base.L10n.load({
+        'en-US': {
+            'grid': {
+                'SaveButton': 'Submit',
+                'CancelButton': 'Discard'
             }
         }
-    </script>
-}
+    });
+    function actionComplete(args) {
+        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
+            var dialog = args.dialog;
+            dialog.showCloseIcon = false;
+            dialog.height = 360;
+            dialog.width = 300;
+            dialog.header = args.requestType === 'beginEdit' ? 'Edit Record of ' + args.rowData['CustomerID'] : 'New Customer';
+        }
+    }
+</script>
+
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/tagHelper
index c4fa6c3d34..ddef9c0d04 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/tagHelper
@@ -1,17 +1,14 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" actionComplete="actionComplete" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true">
+<ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="273px" toolbar="@(new List<string>() { "Add", "Edit", "Delete","Update","Cancel" })" actionComplete="actionComplete">
     <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings>
-    <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>
     <e-grid-columns>
-        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column>
-        <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" width="150"></e-grid-column>
-        <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-grid-column>
+        <e-grid-column field="OrderID" headerText="Order ID" validationRules="@(new { required=true})" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" type="string" width="120"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" validationRules="@(new { required=true, min=1, max=1000})" editType="numericedit" width="120"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150" validationRules="@(new { required=true})"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
-
 <script>
-
-    ej.base.L10n.load({
+   ej.base.L10n.load({
         'en-US': {
             'grid': {
                 'SaveButton': 'Submit',
@@ -19,15 +16,13 @@
             }
         }
     });
-
     function actionComplete(args) {
         if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
-                var dialog = args.dialog;
-                dialog.showCloseIcon = false;
-                dialog.height = 400;
-                // change the header of the dialog
-                dialog.header = args.requestType === 'beginEdit' ? 'Edit Record of ' + args.rowData['CustomerID'] : 'New Customer';
-            }
+            var dialog = args.dialog;
+            dialog.showCloseIcon = false;
+            dialog.height = 360;
+            dialog.width = 300;
+            dialog.header = args.requestType === 'beginEdit' ? 'Edit Record of ' + args.rowData['CustomerID'] : 'New Customer';
+        }
     }
-
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/dialog.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/dialog.cs
index f6f0126ac7..4019df2042 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/dialog.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/dialog.cs
@@ -1,6 +1,5 @@
 public IActionResult Index()
 {
-    var Order = OrderDetails.GetAllRecords();
-    ViewBag.DataSource = Order;
+    ViewBag.DataSource = OrderDetails.GetAllRecords();
     return View();
 } 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/razor
index 71eb2c9d7e..6561b5e764 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/razor
@@ -1,9 +1,8 @@
-@Html.EJS().Grid("DialogEdit").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
+@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("348px").Columns(col =>
 {
     col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true", minLength=3 }).Add();
-    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
-    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
-
-}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
+    col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true" }).Add();
+    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").ValidationRules(new { required = "true",min=1, max=1000 }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipName").HeaderText("Ship Name").Width("150").ValidationRules(new { required = "true" }).Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").ValidationRules(new { required = "true" }).Width("150").Add();
+}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/tagHelper
index 6ce4d99f84..ee242e9ce8 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/tagHelper
@@ -1,9 +1,10 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="273" toolbar="@(new List<string>() { "Add", "Edit", "Delete","Update","Cancel" })">
+<ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="273px" toolbar="@(new List<string>() { "Add", "Edit", "Delete","Update","Cancel" })">
     <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings>
         <e-grid-columns>
             <e-grid-column field="OrderID" headerText="Order ID" validationRules="@(new { required=true})" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
-            <e-grid-column field="CustomerID" headerText="Customer ID" validationRules="@(new { required=true, minLength=3})" type="string" width="120"></e-grid-column>
-            <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>
-            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
+            <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" type="string" width="120"></e-grid-column>
+            <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" validationRules="@(new { required=true, min=1, max=1000})" editType="numericedit" width="120"></e-grid-column>
+            <e-grid-column field="ShipName" headerText="Ship Name" width="150" validationRules="@(new { required=true})"></e-grid-column>
+            <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150" validationRules="@(new { required=true})"></e-grid-column>
         </e-grid-columns>
 </ejs-grid>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs
index 77d8fe70cf..686c81f8f8 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs
@@ -1,6 +1,5 @@
 public IActionResult Index()
 {
-    var Order = OrderDetails.GetAllRecords();
-    ViewBag.DataSource = Order;
+    ViewBag.DataSource = OrderDetails.GetAllRecords();
     return View();
 } 
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/razor
index c30d497891..2a791dcbb2 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/razor
@@ -1,35 +1,40 @@
-@using Syncfusion.EJ2
-
-@Html.EJS().Grid("DialogTemplateEdit").DataSource((IEnumerable<object>)ViewBag.DataSource).ActionBegin("actionBegin").Columns(col =>
+@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("348px").Columns(col =>
 {
-   col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("CustomerID").HeaderText("Customer Name").Width("150").Visible(false).Add();
-   col.Field("Freight").HeaderText("Freight").EditType("numericedit").Format("C2").Width("150").Add();
-   col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add();
-
-}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
-
+    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true" }).Add();
+    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").ValidationRules(new { required = "true",min=1, max=1000 }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").ValidationRules(new { required = "true" }).Width("150").Add();
+}).ActionBegin("actionBegin").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
 <script>
     function actionBegin(args) {
-        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
-            for (var i = 0; i < this.columns.length; i++) {
-               if (this.columns[i].field == "CustomerID") {
-                   this.columns[i].visible = true;
-               }
-               else if (this.columns[i].field == "ShipCountry") {
-                   this.columns[i].visible = false;
-               }
+        var grid = document.getElementById('grid').ej2_instances[0];
+        if (args.requestType === 'beginEdit' ) {
+            for (var i = 0; i < grid.columns.length; i++) {
+                if (grid.columns[i].field == "CustomerID") {
+                    grid.columns[i].visible = true;
+                }
+                else if (grid.columns[i].field == "ShipCountry") {
+                    grid.columns[i].visible = false;
+                }
+            }
+        }
+        else if(args.requestType === 'add')
+        {
+            for (var i = 0; i < grid.columns.length; i++) {
+                if (grid.columns[i].field == "CustomerID") {
+                    grid.columns[i].visible = true;
+                }
             }
         }
-         if (args.requestType === 'save') {
-            for (var i = 0; i < this.columns.length; i++) {
-                if (this.columns[i].field == "CustomerID") {
-                    this.columns[i].visible = false;
+        else if (args.requestType === 'save') {
+            for (var i = 0; i < grid.columns.length; i++) {
+                if (grid.columns[i].field == "CustomerID") {
+                    grid.columns[i].visible = false;
                 }
-                else if (this.columns[i].field == "ShipCountry") {
-                    this.columns[i].visible = true;
-                    }
+                else if (grid.columns[i].field == "ShipCountry") {
+                    grid.columns[i].visible = true;
                 }
+            }
         }
     }
-</script>
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/tagHelper
index 6258056c8d..166d8d9740 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/tagHelper
@@ -1,33 +1,40 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource"  toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true" actionBegin="actionBegin">
+<ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="273px" toolbar="@(new List<string>() { "Add", "Edit", "Delete","Update","Cancel" })" actionBegin="actionBegin">
     <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings>
-    <e-grid-pagesettings pageCount="5 "></e-grid-pagesettings>
-    <e-grid-columns>
-        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column>
-        <e-grid-column field="CustomerID" headerText="Customer Name" visible="false" width="150"></e-grid-column>
-        <e-grid-column field="Freight" headerText="Freight" editType="numericedit" width="150" format="C2"></e-grid-column>
-        <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-grid-column>
-    </e-grid-columns>
+        <e-grid-columns>
+            <e-grid-column field="OrderID" headerText="Order ID" validationRules="@(new { required=true})" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
+            <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" type="string" width="120"></e-grid-column>
+            <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" validationRules="@(new { required=true, min=1, max=1000})" editType="numericedit" width="120"></e-grid-column>
+            <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150" validationRules="@(new { required=true})"></e-grid-column>
+        </e-grid-columns>
 </ejs-grid>
-
 <script>
     function actionBegin(args) {
-        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
-            for (var i = 0; i < this.columns.length; i++) {
-                if (this.columns[i].field == "CustomerID") {
-                    this.columns[i].visible = true;
+        var grid = document.getElementById('grid').ej2_instances[0];
+        if (args.requestType === 'beginEdit' ) {
+            for (var i = 0; i < grid.columns.length; i++) {
+                if (grid.columns[i].field == "CustomerID") {
+                    grid.columns[i].visible = true;
                 }
-                else if (this.columns[i].field == "ShipCountry") {
-                    this.columns[i].visible = false;
+                else if (grid.columns[i].field == "ShipCountry") {
+                    grid.columns[i].visible = false;
                 }
             }
         }
-        if (args.requestType === 'save') {
-            for (var i = 0; i < this.columns.length; i++) {
-                if (this.columns[i].field == "CustomerID") {
-                    this.columns[i].visible = false;
+        else if(args.requestType === 'add')
+        {
+            for (var i = 0; i < grid.columns.length; i++) {
+                if (grid.columns[i].field == "CustomerID") {
+                    grid.columns[i].visible = true;
                 }
-                else if (this.columns[i].field == "ShipCountry") {
-                    this.columns[i].visible = true;
+            }
+        }
+        else if (args.requestType === 'save') {
+            for (var i = 0; i < grid.columns.length; i++) {
+                if (grid.columns[i].field == "CustomerID") {
+                    grid.columns[i].visible = false;
+                }
+                else if (grid.columns[i].field == "ShipCountry") {
+                    grid.columns[i].visible = true;
                 }
             }
         }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/wizardediting/dialog.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/wizardediting/dialog.cs
index da9dcb1404..d9ebad91a3 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/wizardediting/dialog.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/wizardediting/dialog.cs
@@ -1,6 +1,5 @@
 public IActionResult Index()
 {
-    var Order = OrderDetails.GetAllRecords();
-    ViewBag.DataSource = Order;
+    ViewBag.DataSource = OrderDetails.GetAllRecords();
     return View();
 }
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/wizardediting/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/wizardediting/razor
index 17b314dd33..f8fb88a2db 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/wizardediting/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/wizardediting/razor
@@ -1,121 +1,166 @@
-@Html.EJS().Grid("DialogTemplateEdit").DataSource((IEnumerable<object>)ViewBag.DataSource).ActionComplete("actionComplete").Columns(col =>
+@using Newtonsoft.Json
+@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ActionComplete("actionComplete").Height("348px").Columns(col =>
 {
-   col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = true, minLength = 3 }).Add();
-   col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add();
-
-}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).Template("#dialogtemplate"); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
-    
-
+  col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+  col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = true, minLength = 3 }).Add();
+  col.Field("Freight").HeaderText("Freight").Width("150").Add();
+  col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+  col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add();
+  col.Field("Verified").HeaderText("Verified").Width("150").Type("boolean").DisplayAsCheckBox(true).Add();
+}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).Template("#dialogtemplate"); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
 <script>
-     function actionComplete(args) {
-         if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
-            var countryData = ej.data.DataUtil.distinct(this.dataSource, 'ShipCountry', true);
-                new ej.dropdowns.DropDownList({
-                    value: args.rowData.ShipCountry, popupHeight: '300px', floatLabelType: 'Always',
-                    dataSource: countryData, fields: { text: 'ShipCountry', value: 'ShipCountry' }, placeholder: 'Ship Country'
-                }, args.form.elements.namedItem('ShipCountry'));
-                new ej.buttons.CheckBox({ label: 'Verified', checked: args.rowData.Verified }, args.form.elements.namedItem('Verified'));
-                // Set initail Focus
-                if (args.requestType === 'beginEdit') {
-                    (args.form.elements.namedItem('CustomerID')).focus();
-                }
-                initializeWizard();
-            }
+  var shipCountryData = ej.data.DataUtil.distinct(@Html.Raw(JsonConvert.SerializeObject(ViewBag.dataSource)), 'ShipCountry', true);
+  var shipCityData = ej.data.DataUtil.distinct(@Html.Raw(JsonConvert.SerializeObject(ViewBag.dataSource)), 'ShipCity', true)
+  function actionComplete(args) {
+    if (args.requestType === 'beginEdit' || args.requestType === 'add') {
+      args.dialog.element.querySelector('.e-footer-content').classList.add('e-hide');
+      new ej.dropdowns.DropDownList(
+        {
+          value: args.rowData.ShipCountry,
+          popupHeight: '300px',
+          floatLabelType: 'Always',
+          dataSource: shipCountryData,
+          fields: { text: 'ShipCountry', value: 'ShipCountry' },
+          placeholder: 'Ship Country'
+        },
+        args.form.elements.namedItem('ShipCountry')
+      );
+      var freightInput = new ej.inputs.NumericTextBox({
+        floatLabelType: 'Always',
+        placeholder: 'Freight'
+      });
+      freightInput.appendTo('#Freight');
+      new ej.dropdowns.DropDownList(
+       {
+          value: args.rowData.ShipCity,
+          popupHeight: '300px',
+          floatLabelType: 'Always',
+          dataSource: shipCityData,
+          fields: { text: 'ShipCity', value: 'ShipCity' },
+          placeholder: 'Ship City'
+        },
+        args.form.elements.namedItem('ShipCity')
+      );
+      new ej.buttons.CheckBox(
+        {
+          floatLabelType: 'Always',
+          label: 'Verified',
+          checked: args.rowData.Verified,
+        },
+        args.form.elements.namedItem('Verified')
+      );
+      if (args.requestType === 'beginEdit') {
+        args.form.elements.namedItem('CustomerID').focus();
+      }
+      initializeWizard();
     }
-
-    function initializeWizard() {
-        var currentTab = 0;
-
-        document.getElementById('nextBtn').onclick = function () {
-            var grid = document.getElementById("DialogTemplateEdit").ej2_instances[0];
-            var valid = true;
-            [].slice.call(document.getElementById('tab' + currentTab).querySelectorAll('[name]')).forEach(element => {
-                element.form.ej2_instances[0].validate(element.name);
-                if (element.getAttribute('aria-invalid') === 'true') {
-                    valid = false;
-                }
-            });
-            if (!valid) {
-                return
-            }
-            if (this.innerHTML !== 'SUBMIT') {
-                currentTab++;
-                nextpre(currentTab);
-            } else {
-                grid.endEdit();
-            }
-        }
-
-        document.getElementById('prevBtn').onclick = function () {
-            var valid = true;
-            [].slice.call(document.getElementById('tab' + currentTab).querySelectorAll('[name]')).forEach(element => {
-                element.form.ej2_instances[0].validate(element.name);
-                if (element.getAttribute('aria-invalid') === 'true') {
-                    valid = false;
-                }
-            });
-            if (!valid) {
-                return
-            }
-            currentTab--;
-            nextpre(currentTab);
-        }
-
-        function nextpre(current) {
-            var tabs = [].slice.call(document.getElementsByClassName('tab'))
-            tabs.forEach(element => element.style.display = 'none');
-            tabs[current].style.display = '';
-            if (current) {
-                document.getElementById('prevBtn').style.display = '';
-                document.getElementById('nextBtn').innerHTML = 'SUBMIT';
-            } else {
-                document.getElementById('prevBtn').style.display = 'none';
-                document.getElementById('nextBtn').innerHTML = 'NEXT';
-            }
+  }
+  function initializeWizard() {
+    var currentTab = 0;
+    document.getElementById('nextButton').onclick = function () {
+      if (validate()) {
+        currentTab++;
+        handleTabNavigation(currentTab);
+      }
+    };
+    function validate() {
+      var isValid = true;
+      [].slice.call(document.getElementById('tab' + currentTab).querySelectorAll('[name]')).forEach((element) => {
+        element.form.ej2_instances[0].validate(element.name);
+        if (element.getAttribute('aria-invalid') === 'true') {
+          isValid = false;
         }
+      });
+      if (!isValid) {
+        return false;
+      }
+      return true;
+    }
+    document.getElementById('previousButton').onclick = function () {
+      if (validate()) {
+        currentTab--;
+        handleTabNavigation(currentTab);
+      }
+     };
+     document.getElementById('saveButton').onclick = function () {
+      var grid = document.getElementById("grid").ej2_instances[0];
+      grid.endEdit();
+     };
+  }
+  function handleTabNavigation(current) {
+    var tabs = [].slice.call(document.getElementsByClassName('tab'));
+    tabs.forEach((element) => (element.style.display = 'none'));
+    tabs[current].style.display = '';
+    if (current === 2) {
+      document.getElementById('previousButton').style.display = '';
+      document.getElementById('nextButton').style.display = 'none';
     }
- </script>
-
- <script id='dialogtemplate' type="text/x-template">
-     <div>
-        <div id="tab0" class='tab'>
-           <div class="form-row">
-              <div class="form-group col-md-6">
-                 <div class="e-float-input e-control-wrapper">
-                    <input id="OrderID" required name="OrderID" type="text" value="${if(isAdd)} '' ${else} ${OrderID} ${/if}" disabled="${if(isAdd)} '' ${else} disabled ${/if}" />
-                    <span class="e-float-line"></span>
-                    <label class="e-float-text e-label-top" for="OrderID">Order ID</label>
-                 </div>
-              </div>
-           </div>
-           <div class="form-row">
-              <div class="form-group col-md-6">
-                 <div class="e-float-input e-control-wrapper">
-                    <input id="CustomerID" required name="CustomerID" type="text" value="${if(isAdd)} '' ${else} ${CustomerID} ${/if}" />
-                    <span class="e-float-line"></span>
-                    <label class="e-float-text e-label-top" for="CustomerID">Customer ID</label>
-                 </div>
-              </div>
-           </div>
+    if (!current) {
+      document.getElementById('previousButton').style.display = 'none';
+      document.getElementById('nextButton').style.display = '';
+    } else {
+      document.getElementById('previousButton').style.display = '';
+    }
+  }
+</script>
+<script id="dialogtemplate" type="text/x-template">
+    <div id="tab0" class='tab'>
+        <div class="form-row">
+        <div class="form-group col-md-6">
+            <div class="e-float-input e-control-wrapper">
+            <input id="OrderID" required name="OrderID" type="text" value=${if(isAdd)} '' ${else} ${OrderID} ${ /if} ${if(isAdd)} '' ${else} disabled ${ /if} />
+            <span class="e-float-line"></span>
+            <label class="e-float-text e-label-top" for="OrderID">Order ID</label>
+            </div>
+        </div>
+        </div>
+        <div class="form-row">
+        <div class="form-group col-md-6">
+            <div class="e-float-input e-control-wrapper">
+            <input id="CustomerID" required name="CustomerID" type="text" value=${if(isAdd)} '' ${else} ${CustomerID} ${ /if} />
+            <span class="e-float-line"></span>
+            <label class="e-float-text e-label-top" for="CustomerID">Customer ID</label>
+            </div>
+        </div>
+        </div>
+    </div>
+    <div id="tab1" style="display: none" class='tab'>
+        <div class="form-row">
+            <div class="form-group col-md-6">
+                <input id="Freight" required name="Freight" type="text" value=${if(isAdd)} '' ${else} ${Freight} ${ /if} />
+            </div>
+        </div>
+        <div class="form-row">
+            <div class="form-group col-md-6">
+                <input id="ShipCity" required name="ShipCity" type="text" value=${if(isAdd)} '' ${else} ${ShipCity} ${ /if} />
+            </div>
         </div>
-        <div id=tab1 style="display: none" class='tab'>
-           <div class="form-row">
-              <div class="form-group col-md-6">
-                 <input type="text" name="ShipCountry" id="ShipCountry" value="${if(isAdd)} '' ${else} ${ShipCountry} ${/if}" />
-              </div>
+    </div>
+    <div id=tab2 style="display: none" class='tab'>
+        <div class="form-row">
+            <div class="form-group col-md-6">
+              <input type="text" name="ShipCountry" id="ShipCountry" value=${if(isAdd)} '' ${else} ${ShipCountry} ${ /if} />
             </div>
-            <div class="form-row">
-               <div class="form-group col-md-6">
-                  <input type="checkbox" name="Verified" id="Verified" checked="${if(Verified)} checked ${/if}" />
-               </div>
-             </div>
-         </div>
-         <div id='footer'>
-            <button id="prevBtn" class="e-info e-btn" type="button" style="display: none; float: left; margin-left: 11px;">Previous</button>
-
-            <button id="nextBtn" class="e-info e-btn" type="button" style="float: right">Next</button>
-          </div>
+        </div>
+        <div class="form-row">
+            <div class="form-group col-md-6">
+                <input type="checkbox" name="Verified" id="Verified" ${if(Verified)} checked ${ /if} />
+            </div>
+        </div>
+    </div>
+    <div id='footer'>
+        <div style='float:left'>
+            <button id="previousButton" class="e-info e-btn" type="button" style="display: none; float: left">Previous</button>
+        </div>
+        <div style='float:right'>
+            <button id="saveButton" class="e-info e-btn" type="button" style="margin-right:10px;margin-left:10px">Save</button>
+            <button id="nextButton" class="e-info e-btn" type="button">Next</button>
+        </div>
     </div>
 </script>
-
+<style>
+  .form-group.col-md-6 {
+    width: 250px;
+    margin-bottom:20px
+  }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/wizardediting/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/wizardediting/tagHelper
index c7bae7eb2b..c452d7413b 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/wizardediting/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/wizardediting/tagHelper
@@ -1,129 +1,168 @@
-@{
-    ViewData["Title"] = "DialogTemplate";
-}
-
-@model TestApplication.Models.OrdersDetails
-
-<div class="control-section">
-    <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" actionComplete="actionComplete" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true">
-        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings>
-        <e-grid-pagesettings pageCount="5 "></e-grid-pagesettings>
-        <e-grid-columns>
-            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column>
-            <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" width="150"></e-grid-column>
-            <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-grid-column>
-            <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
-        </e-grid-columns>
-    </ejs-grid>
-</div>
-
-<script id='dialogtemplate' type="text/x-template">
-    <div>
-        <div id="tab0" class='tab'>
-            <div class="form-row">
-                <div class="form-group col-md-6">
-                    <div class="e-float-input e-control-wrapper">
-                        <input id="OrderID" required name="OrderID" type="text" value="${if(isAdd)} '' ${else} ${OrderID} ${/if}" disabled="${if(isAdd)} '' ${else} disabled ${/if}" />
-                        <span class="e-float-line"></span>
-                        <label class="e-float-text e-label-top" for="OrderID">Order ID</label>
-                    </div>
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-group col-md-6">
-                    <div class="e-float-input e-control-wrapper">
-                        <input id="CustomerID" required name="CustomerID" type="text" value="${if(isAdd)} '' ${else} ${CustomerID} ${/if}" />
-                        <span class="e-float-line"></span>
-                        <label class="e-float-text e-label-top" for="CustomerID">Customer ID</label>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div id=tab1 style="display: none" class='tab'>
-            <div class="form-row">
-                <div class="form-group col-md-6">
-                    <input type="text" name="ShipCountry" id="ShipCountry" value="${if(isAdd)} '' ${else} ${ShipCountry} ${/if}" />
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-group col-md-6">
-                    <input type="checkbox" name="Verified" id="Verified" checked="${if(Verified)} checked ${/if}" />
-                </div>
-            </div>
-        </div>
-        <div id='footer'>
-            <button id="prevBtn" class="e-info e-btn" type="button" style="display: none; float: left; margin-left: 11px;">Previous</button>
-
-            <button id="nextBtn" class="e-info e-btn" type="button" style="float: right">Next</button>
-        </div>
-    </div>
-</script>
-
+@using Newtonsoft.Json
+<ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="348px" actionComplete="actionComplete" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true">
+    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings>
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" width="150"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" width="150"></e-grid-column>
+        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-grid-column>
+        <e-grid-column field="Verified" headerText="Verified" type="boolean" displayAsCheckBox="true" width="150"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
 <script>
-    function actionComplete(args) {
-        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
-            let countryData = ej.data.DataUtil.distinct(this.dataSource, 'ShipCountry', true);
-            new ej.dropdowns.DropDownList({
-                value: args.rowData.ShipCountry, popupHeight: '300px', floatLabelType: 'Always',
-                dataSource: countryData, fields: { text: 'ShipCountry', value: 'ShipCountry' }, placeholder: 'Ship Country'
-            }, args.form.elements.namedItem('ShipCountry'));
-            new ej.buttons.CheckBox({ label: 'Verified', checked: args.rowData.Verified }, args.form.elements.namedItem('Verified'));
-            // Set initail Focus
-            if (args.requestType === 'beginEdit') {
-                (args.form.elements.namedItem('CustomerID')).focus();
-            }
-            initializeWizard();
-        }
+  var shipCountryData = ej.data.DataUtil.distinct(@Html.Raw(JsonConvert.SerializeObject(ViewBag.dataSource)), 'ShipCountry', true);
+  var shipCityData = ej.data.DataUtil.distinct(@Html.Raw(JsonConvert.SerializeObject(ViewBag.dataSource)), 'ShipCity', true)
+  function actionComplete(args) {
+    if (args.requestType === 'beginEdit' || args.requestType === 'add') {
+      args.dialog.element.querySelector('.e-footer-content').classList.add('e-hide');
+      new ej.dropdowns.DropDownList(
+        {
+          value: args.rowData.ShipCountry,
+          popupHeight: '300px',
+          floatLabelType: 'Always',
+          dataSource: shipCountryData,
+          fields: { text: 'ShipCountry', value: 'ShipCountry' },
+          placeholder: 'Ship Country'
+        },
+        args.form.elements.namedItem('ShipCountry')
+      );
+      var freightInput = new ej.inputs.NumericTextBox({
+        floatLabelType: 'Always',
+        placeholder: 'Freight'
+      });
+      freightInput.appendTo('#Freight');
+      new ej.dropdowns.DropDownList(
+       {
+          value: args.rowData.ShipCity,
+          popupHeight: '300px',
+          floatLabelType: 'Always',
+          dataSource: shipCityData,
+          fields: { text: 'ShipCity', value: 'ShipCity' },
+          placeholder: 'Ship City'
+        },
+        args.form.elements.namedItem('ShipCity')
+      );
+      new ej.buttons.CheckBox(
+        {
+          floatLabelType: 'Always',
+          label: 'Verified',
+          checked: args.rowData.Verified,
+        },
+        args.form.elements.namedItem('Verified')
+      );
+      if (args.requestType === 'beginEdit') {
+        args.form.elements.namedItem('CustomerID').focus();
+      }
+      initializeWizard();
     }
-    function initializeWizard() {
-        var currentTab = 0;
-
-        document.getElementById('nextBtn').onclick = function () {
-            var valid = true;
-            var grid = document.getElementById("Grid").ej2_instances[0];
-            [].slice.call(document.getElementById('tab' + currentTab).querySelectorAll('[name]')).forEach(element => {
-                element.form.ej2_instances[0].validate(element.name);
-                if (element.getAttribute('aria-invalid') === 'true') {
-                    valid = false;
-                }
-            });
-            if (!valid) {
-                return
-            }
-            if (this.innerHTML !== 'SUBMIT') {
-                currentTab++;
-                nextpre(currentTab);
-            } else {
-                grid.endEdit();
-            }
-        }
-
-        document.getElementById('prevBtn').onclick = function () {
-            var valid = true;
-            [].slice.call(document.getElementById('tab' + currentTab).querySelectorAll('[name]')).forEach(element => {
-                element.form.ej2_instances[0].validate(element.name);
-                if (element.getAttribute('aria-invalid') === 'true') {
-                    valid = false;
-                }
-            });
-            if (!valid) {
-                return
-            }
-            currentTab--;
-            nextpre(currentTab);
+  }
+  function initializeWizard() {
+    var currentTab = 0;
+    document.getElementById('nextButton').onclick = function () {
+      if (validate()) {
+        currentTab++;
+        handleTabNavigation(currentTab);
+      }
+    };
+    function validate() {
+      var isValid = true;
+      [].slice.call(document.getElementById('tab' + currentTab).querySelectorAll('[name]')).forEach((element) => {
+        element.form.ej2_instances[0].validate(element.name);
+        if (element.getAttribute('aria-invalid') === 'true') {
+          isValid = false;
         }
+      });
+      if (!isValid) {
+        return false;
+      }
+      return true;
     }
-
-    function nextpre(current) {
-        var tabs = [].slice.call(document.getElementsByClassName('tab'))
-        tabs.forEach(element => element.style.display = 'none');
-        tabs[current].style.display = '';
-        if (current) {
-            document.getElementById('prevBtn').style.display = '';
-            document.getElementById('nextBtn').innerHTML = 'SUBMIT';
-        } else {
-            document.getElementById('prevBtn').style.display = 'none';
-            document.getElementById('nextBtn').innerHTML = 'NEXT';
-        }
+    document.getElementById('previousButton').onclick = function () {
+      if (validate()) {
+        currentTab--;
+        handleTabNavigation(currentTab);
+      }
+     };
+     document.getElementById('saveButton').onclick = function () {
+      var grid = document.getElementById("grid").ej2_instances[0];
+      grid.endEdit();
+     };
+  }
+  function handleTabNavigation(current) {
+    var tabs = [].slice.call(document.getElementsByClassName('tab'));
+    tabs.forEach((element) => (element.style.display = 'none'));
+    tabs[current].style.display = '';
+    if (current === 2) {
+      document.getElementById('previousButton').style.display = '';
+      document.getElementById('nextButton').style.display = 'none';
+    }
+    if (!current) {
+      document.getElementById('previousButton').style.display = 'none';
+      document.getElementById('nextButton').style.display = '';
+    } else {
+      document.getElementById('previousButton').style.display = '';
     }
+  }
+</script>
+<script id="dialogtemplate" type="text/x-template">
+  <div id="tab0" class='tab'>
+    <div class="form-row">
+      <div class="form-group col-md-6">
+        <div class="e-float-input e-control-wrapper">
+          <input id="OrderID" required name="OrderID" type="text" value=${if(isAdd)} '' ${else} ${OrderID} ${ /if} ${if(isAdd)} '' ${else} disabled ${ /if} />
+          <span class="e-float-line"></span>
+          <label class="e-float-text e-label-top" for="OrderID">Order ID</label>
+        </div>
+      </div>
+    </div>
+    <div class="form-row">
+      <div class="form-group col-md-6">
+        <div class="e-float-input e-control-wrapper">
+          <input id="CustomerID" required name="CustomerID" type="text" value=${if(isAdd)} '' ${else} ${CustomerID} ${ /if} />
+          <span class="e-float-line"></span>
+          <label class="e-float-text e-label-top" for="CustomerID">Customer ID</label>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="tab1" style="display: none" class='tab'>
+    <div class="form-row">
+      <div class="form-group col-md-6">
+        <input id="Freight" required name="Freight" type="text" value=${if(isAdd)} '' ${else} ${Freight} ${ /if} />
+      </div>
+    </div>
+    <div class="form-row">
+      <div class="form-group col-md-6">
+        <input id="ShipCity" required name="ShipCity" type="text" value=${if(isAdd)} '' ${else} ${ShipCity} ${ /if} />
+      </div>
+    </div>
+  </div>
+<div id=tab2 style="display: none" class='tab'>
+  <div class="form-row">
+    <div class="form-group col-md-6">
+      <input type="text" name="ShipCountry" id="ShipCountry" value=${if(isAdd)} '' ${else} ${ShipCountry} ${ /if} />
+    </div>
+   </div>
+   <div class="form-row">
+      <div class="form-group col-md-6">
+        <input type="checkbox" name="Verified" id="Verified" ${if(Verified)} checked ${ /if} />
+      </div>
+   </div>
+</div>
+<div id='footer'>
+   <div style='float:left'>
+      <button id="previousButton" class="e-info e-btn" type="button" style="display: none; float: left">Previous</button>
+   </div>
+   <div style='float:right'>
+      <button id="saveButton" class="e-info e-btn" type="button" style="margin-right:10px;margin-left:10px">Save</button>
+      <button id="nextButton" class="e-info e-btn" type="button">Next</button>
+   </div>
+</div>
 </script>
+<style>
+  .form-group.col-md-6 {
+    width: 250px;
+    margin-bottom:20px
+  }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/add-params-for-filtering/excelfilter.cs b/ej2-asp-core-mvc/code-snippet/grid/how-to/add-params-for-filtering/excelfilter.cs
deleted file mode 100644
index b1bb45d97b..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/add-params-for-filtering/excelfilter.cs
+++ /dev/null
@@ -1,21 +0,0 @@
- public IActionResult Index()
-        {
-            if (orders.Count() == 0)
-                DataSource();
-            ViewBag.Datasource = orders;            
-            return View();
-        }
-
-        public void DataSource()
-        {
-            int code = 10000;
-            for (int i = 1; i < 10; i++)
-            {
-                orders.Add(new OrderDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
-                orders.Add(new OrderDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
-                orders.Add(new OrderDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
-                orders.Add(new OrderDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
-                orders.Add(new OrderDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
-                code += 5;
-            }
-        }
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/add-params-for-filtering/razor b/ej2-asp-core-mvc/code-snippet/grid/how-to/add-params-for-filtering/razor
deleted file mode 100644
index cc5274a8ce..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/add-params-for-filtering/razor
+++ /dev/null
@@ -1,10 +0,0 @@
-
-   @Html.EJS().Grid("ExcelFilter").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowFiltering().FilterSettings(Filter => Filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).Columns(col =>
-   {
-       col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Filter((new { @params = new { showSpinButton = false } }).Add();
-       col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
-       col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
-       col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-       col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
-
-   }).AllowPaging().Render()
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/add-params-for-filtering/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/how-to/add-params-for-filtering/tagHelper
deleted file mode 100644
index 000a021adc..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/add-params-for-filtering/tagHelper
+++ /dev/null
@@ -1,14 +0,0 @@
-@{
-
-    var filterParams = new { params = new {showSpinButton ="false"};};
-}
-
-<ejs-grid id="Grid" dataSource=@ViewBag.DataSource  allowFiltering="true" height="273">
-    <e-grid-filterSettings type="Menu"></e-grid-filterSettings>
-    <e-grid-columns>
-        <e-grid-column field="OrderID" filter=filterParams headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
-        <e-grid-column field="CustomerID" headerText="Customer ID"  width="120"></e-grid-column>       
-        <e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
-        <e-grid-column field="ShipName" headerText="Ship Name" width="100"></e-grid-column>
-    </e-grid-columns>
-</ejs-grid>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/collapse-grouped-rows/collapseall.cs b/ej2-asp-core-mvc/code-snippet/grid/how-to/collapse-grouped-rows/collapseall.cs
deleted file mode 100644
index 4019df2042..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/collapse-grouped-rows/collapseall.cs
+++ /dev/null
@@ -1,5 +0,0 @@
-public IActionResult Index()
-{
-    ViewBag.DataSource = OrderDetails.GetAllRecords();
-    return View();
-} 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/collapse-grouped-rows/razor b/ej2-asp-core-mvc/code-snippet/grid/how-to/collapse-grouped-rows/razor
deleted file mode 100644
index e5d1e8a056..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/collapse-grouped-rows/razor
+++ /dev/null
@@ -1,19 +0,0 @@
-@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).DataBound("bound").Columns(col =>
-{
-   col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
-   col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
-   col.Field("ShipCountry").HeaderText("Ship Country").Width("150").EditType("dropdownedit").Add();
-
-}).AllowPaging().AllowGrouping().GroupSettings(group => group.Columns(new string[] { "ShipCountry" })).Render()
-
-<script>
-    var initial = true;
-    function bound() {
-        if (initial === true) {
-            this.groupModule.collapseAll();
-            initial = false;
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/collapse-grouped-rows/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/how-to/collapse-grouped-rows/tagHelper
deleted file mode 100644
index 75d3b1eff9..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/collapse-grouped-rows/tagHelper
+++ /dev/null
@@ -1,20 +0,0 @@
-
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowGrouping="true" dataBound="bound">
-<e-grid-groupsettings columns="@(new string[] {"ShipCountry"})"></e-grid-groupsettings>
-    <e-grid-columns>
-        <e-grid-column field="OrderID"  headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>                
-        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>                
-        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>                               
-        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150" editType='dropdownedit'></e-grid-column>                
-    </e-grid-columns>
-</ejs-grid>
-
-<script>
-    var initial = true;
-    function bound() {
-        if (initial === true) {
-            this.groupModule.collapseAll();
-            initial = false;
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/databasedselection/databasedselection.cs b/ej2-asp-core-mvc/code-snippet/grid/how-to/databasedselection/databasedselection.cs
deleted file mode 100644
index da9dcb1404..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/databasedselection/databasedselection.cs
+++ /dev/null
@@ -1,6 +0,0 @@
-public IActionResult Index()
-{
-    var Order = OrderDetails.GetAllRecords();
-    ViewBag.DataSource = Order;
-    return View();
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/databasedselection/razor b/ej2-asp-core-mvc/code-snippet/grid/how-to/databasedselection/razor
deleted file mode 100644
index 26db403b1b..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/databasedselection/razor
+++ /dev/null
@@ -1,25 +0,0 @@
-
-@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
-{
-   col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
-   col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
-   col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("150").Add();
-   col.Field("ShipCity").HeaderText("Ship City").Width("120").Add();
-   col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
-
-}).AllowPaging().DataBound("dataBound").RowDataBound("rowDataBound").SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).Render()
-
-<script>
-    var selIndex = [];
-    function rowDataBound(args) {
-        if (args.data['EmployeeID'] > 3) {
-            selIndex.push(parseInt(args.row.getAttribute('aria-rowindex')));
-        }
-    }
-    function dataBound(args) {
-        if (selIndex.length) {
-            this.selectRows(selIndex);
-            selIndex = [];
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/databasedselection/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/how-to/databasedselection/tagHelper
deleted file mode 100644
index 889ee721e1..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/databasedselection/tagHelper
+++ /dev/null
@@ -1,30 +0,0 @@
-<div id="GridParent">
-    <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="315" allowSelection="true" allowPaging="true" dataBound="dataBound" rowDataBound="rowDataBound">
-        <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
-        <e-grid-columns>
-            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
-            <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>
-            <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column>
-            <e-grid-column field="ShipCity" headerText="Ship City" width="120"></e-grid-column>
-            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
-        </e-grid-columns>
-    </ejs-grid>
-</div>
-
-<script>
-
-    var selIndex = [];
-
-    function rowDataBound(args) {
-        if (args.data['EmployeeID'] > 3) {
-            selIndex.push(parseInt(args.row.getAttribute('aria-rowindex')));
-        }
-    }
-
-    function dataBound(args) {
-        if (selIndex.length) {
-            this.selectRows(selIndex);
-            selIndex = [];
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/disable-sorting-excel/disable-sorting-excel.cs b/ej2-asp-core-mvc/code-snippet/grid/how-to/disable-sorting-excel/disable-sorting-excel.cs
deleted file mode 100644
index 4019df2042..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/disable-sorting-excel/disable-sorting-excel.cs
+++ /dev/null
@@ -1,5 +0,0 @@
-public IActionResult Index()
-{
-    ViewBag.DataSource = OrderDetails.GetAllRecords();
-    return View();
-} 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/disable-sorting-excel/razor b/ej2-asp-core-mvc/code-snippet/grid/how-to/disable-sorting-excel/razor
deleted file mode 100644
index 1f9ac0b502..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/disable-sorting-excel/razor
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
-{
-    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
-    col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
-    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
-
-}).AllowFiltering().AllowPaging().FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).Render()
-
-<style>
-
-    .e-excel-ascending,
-    .e-excel-descending,
-    .e-separator.e-excel-separator {
-       display: none;
-    }
-</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/disable-sorting-excel/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/how-to/disable-sorting-excel/tagHelper
deleted file mode 100644
index 4173c0adfb..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/disable-sorting-excel/tagHelper
+++ /dev/null
@@ -1,20 +0,0 @@
-
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowFiltering="true">
-    <e-grid-filterSettings type="Excel" ></e-grid-filterSettings>
-    <e-grid-columns>
-        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
-        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
-        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
-        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
-    </e-grid-columns>
-</ejs-grid>
-
-<style>
-
-    .e-excel-ascending,
-    .e-excel-descending,
-    .e-separator.e-excel-separator {
-       display: none;
-    }
-
-</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/disablegrid.cs b/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/disablegrid.cs
index da9dcb1404..d9ebad91a3 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/disablegrid.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/disablegrid.cs
@@ -1,6 +1,5 @@
 public IActionResult Index()
 {
-    var Order = OrderDetails.GetAllRecords();
-    ViewBag.DataSource = Order;
+    ViewBag.DataSource = OrderDetails.GetAllRecords();
     return View();
 }
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/razor b/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/razor
index 01a35a75e3..003f328434 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/razor
@@ -1,37 +1,32 @@
-@Html.EJS().Button("element").Content("Enable/Disable Grid").Render()
-
-
-@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
+<div style="padding-bottom: 20px">
+  @Html.EJS().Button("element").Content("Enable/Disable Grid").Render()
+</div>
+@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("348px").Columns(col =>
 {
-   col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").Add();
+   col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
    col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
-   col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").Add();
+   col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
-
 }).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
-
-
 <style>
     .disablegrid {
         pointer-events: none;
         opacity: 0.4;
     }
-
     .wrapper {
         cursor: not-allowed;
     }
 </style>
-
 <script>
     document.getElementById('element').onclick = function () {
-        var gridInst = document.getElementById("Grid").ej2_instances[0];
-        if (gridInst.element.classList.contains('disablegrid')) {
-            gridInst.element.classList.remove('disablegrid');
-            document.getElementById("GridParent").classList.remove('wrapper');
+        var grid = document.getElementById("grid").ej2_instances[0];
+        if (grid.element.classList.contains('disablegrid')) {
+            grid.element.classList.remove('disablegrid');
+            document.getElementById("gridParent").classList.remove('wrapper');
         }
         else {
-            gridInst.element.classList.add('disablegrid');
-            document.getElementById("GridParent").classList.add('wrapper');
+            grid.element.classList.add('disablegrid');
+            document.getElementById("gridParent").classList.add('wrapper');
         }
     }
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/tagHelper
index 3863cdf903..99883ee0a0 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/tagHelper
@@ -1,37 +1,35 @@
-<ejs-button id="element" content="Enable/Disable Grid" cssClass="e-small"></ejs-button>
-
-<div id="GridParent">
-    <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="315" allowPaging="true" toolbar='@new List<string> {"Add","Edit","Delete","Cancel" }'>
+<div style="padding-bottom: 20px">
+  <ejs-button id="element" content="Enable/Disable Grid" cssClass="e-small"></ejs-button>
+</div>
+<div id="gridParent">
+    <ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="315px" allowPaging="true" toolbar='@new List<string> {"Add","Edit","Delete","Cancel" }'>
         <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings>
         <e-grid-columns>
             <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
-            <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>
+            <e-grid-column field="CustomerID" headerText="Customer Name" type="string" width="120"></e-grid-column>
             <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>
             <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
         </e-grid-columns>
     </ejs-grid>
 </div>
-
 <style>
     .disablegrid {
         pointer-events: none;
         opacity: 0.4;
     }
-
     .wrapper {
         cursor: not-allowed;
     }
 </style>
-
 <script>
     document.getElementById('element').onclick = function () {
-        var gridInst = document.getElementById("Grid").ej2_instances[0];
-        if (gridInst.element.classList.contains('disablegrid')) {
-            gridInst.element.classList.remove('disablegrid');
-            document.getElementById("GridParent").classList.remove('wrapper');
+        var grid = document.getElementById("grid").ej2_instances[0];
+        if (grid.element.classList.contains('disablegrid')) {
+            grid.element.classList.remove('disablegrid');
+            document.getElementById("gridParent").classList.remove('wrapper');
         } else {
-            gridInst.element.classList.add('disablegrid');
-            document.getElementById("GridParent").classList.add('wrapper');
+            grid.element.classList.add('disablegrid');
+            document.getElementById("gridParent").classList.add('wrapper');
         }
     }
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/group-page-size/group-page-size.cs b/ej2-asp-core-mvc/code-snippet/grid/how-to/group-page-size/group-page-size.cs
deleted file mode 100644
index f6f0126ac7..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/group-page-size/group-page-size.cs
+++ /dev/null
@@ -1,6 +0,0 @@
-public IActionResult Index()
-{
-    var Order = OrderDetails.GetAllRecords();
-    ViewBag.DataSource = Order;
-    return View();
-} 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/group-page-size/razor b/ej2-asp-core-mvc/code-snippet/grid/how-to/group-page-size/razor
deleted file mode 100644
index 8d358ab921..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/group-page-size/razor
+++ /dev/null
@@ -1,17 +0,0 @@
-<script>
-    var old = ej.grids.Data.prototype.generateQuery;
-    ej.grids.Data.prototype.generateQuery = function () {
-        var query = old.call(this, true);
-        this.pageQuery(query);
-        return query;
-    };
-</script>
-
-@Html.EJS().Grid("FlatGrid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowSorting().Columns(col =>
-{
-   col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
-   col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
-
-}).AllowPaging().PageSettings(page => page.PageSize(5)).AllowGrouping().GroupSettings(group=>group.Columns(new string[] { "ShipCountry" })).Render()
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/group-page-size/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/how-to/group-page-size/tagHelper
deleted file mode 100644
index 882df4f79a..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/group-page-size/tagHelper
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-    var old = ej.grids.Data.prototype.generateQuery;
-    ej.grids.Data.prototype.generateQuery = function () {
-        var query = old.call(this, true);
-        this.pageQuery(query);
-        return query;
-    };
-</script>
-
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowGrouping="true" allowPaging="true">
-    <e-grid-groupSettings showDropArea="true" columns="@(new string[] { "ShipCountry"})"></e-grid-groupSettings>
-    <e-grid-pagesettings pageSize=5></e-grid-pagesettings>
-    <e-grid-columns>
-        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
-        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>
-        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
-        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
-    </e-grid-columns>
-</ejs-grid>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/hidearrow/hidearrow.cs b/ej2-asp-core-mvc/code-snippet/grid/how-to/hidearrow/hidearrow.cs
deleted file mode 100644
index da9dcb1404..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/hidearrow/hidearrow.cs
+++ /dev/null
@@ -1,6 +0,0 @@
-public IActionResult Index()
-{
-    var Order = OrderDetails.GetAllRecords();
-    ViewBag.DataSource = Order;
-    return View();
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/hidearrow/razor b/ej2-asp-core-mvc/code-snippet/grid/how-to/hidearrow/razor
deleted file mode 100644
index 0e95add8c4..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/hidearrow/razor
+++ /dev/null
@@ -1,53 +0,0 @@
-@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Load("load").RowDataBound("rowDataBound").Columns(col =>
-{
-    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").Add();
-    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
-    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").Add();
-    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
-
-}).AllowPaging().Render()
-
-<style>
-    .e-row[aria-selected="true"] .e-customizedExpandcell {
-        background-color: #e0e0e0;
-    }
-
-    .e-grid.e-gridhover tr[role='row']:hover {
-        background-color: #eee;
-    }
-</style>
-
-<script>
-    function load(args) {
-        var grid = document.getElementById('Grid').ej2_instances[0]
-        grid.childGrid = {
-            dataSource: dataManger,
-            queryString: 'EmployeeID',
-            allowPaging: true,
-            columns: [
-                { field: 'Order', headerText: 'Order ID', textAlign: 'Right', width: 120 },
-                { field: 'EmployeeID', headerText: 'Employee ID', width: 120 },
-                { field: 'ShipName', headerText: 'Ship Name', width: 150 }
-            ],
-        }
-    }
-    var dataManger = [{ Order: 100, ShipName: 'Berlin', EmployeeID: 2 },
-        { Order: 101, ShipName: 'Capte', EmployeeID: 3 },
-        { Order: 102, ShipName: 'Marlon', EmployeeID: 4 },
-        { Order: 103, ShipName: 'Black pearl', EmployeeID: 5 },
-        { Order: 104, ShipName: 'Pearl', EmployeeID: 6 },
-        { Order: 105, ShipName: 'Noth bay', EmployeeID: 7 },
-        { Order: 106, ShipName: 'baratna', EmployeeID: 8 },
-        { Order: 107, ShipName: 'Charge', EmployeeID: 9 },
-    ];
-
-    function rowDataBound(args) {
-        var filter = args.data.EmployeeID;
-        var data = new ej.data.DataManager(this.childGrid.dataSource).executeLocal(new ej.data.Query().where("EmployeeID", "equal", parseInt(filter), true));
-        if (data.length == 0) {
-            //here hide which parent row has no child records
-            args.row.querySelector('td').innerHTML = " ";
-            args.row.querySelector('td').className = "e-customizedExpandcell";
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/hidearrow/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/how-to/hidearrow/tagHelper
deleted file mode 100644
index 000f2ef3b6..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/hidearrow/tagHelper
+++ /dev/null
@@ -1,56 +0,0 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true" load="load" rowDataBound="rowDataBound">
-    <e-grid-columns>
-        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
-        <e-grid-column field="EmployeeID" headerText="Employee ID" width="120"></e-grid-column>
-        <e-grid-column field="OrderDate" headerText="Order Date" width="120" format="yMd"></e-grid-column>
-        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
-        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
-    </e-grid-columns>
-</ejs-grid>
-    
-<style>
-    .e-row[aria-selected="true"] .e-customizedExpandcell {
-        background-color: #e0e0e0;
-    }
-    
-    .e-grid.e-gridhover tr[role='row']:hover {
-        background-color: #eee;
-    }
-</style>
-
-<script>
-    function load(args) {
-        var grid = document.getElementById('Grid').ej2_instances[0]
-        grid.childGrid = {
-            dataSource: dataManger,
-            queryString: 'EmployeeID',
-            allowPaging: true,
-            columns: [
-                { field: 'Order', headerText: 'Order ID', textAlign: 'Right', width: 120 },
-                { field: 'EmployeeID', headerText: 'Employee ID', width: 120 },
-                { field: 'ShipName', headerText: 'Ship Name', width: 150 }
-            ],
-        }
-    }
-        
-    var dataManger = [ { Order: 100, ShipName: 'Berlin', EmployeeID: 2 },
-        { Order: 101, ShipName: 'Capte', EmployeeID: 3 },
-        { Order: 102, ShipName: 'Marlon', EmployeeID: 4 },
-        { Order: 103, ShipName: 'Black pearl', EmployeeID: 5 },
-        { Order: 104, ShipName: 'Pearl', EmployeeID: 6 },
-        { Order: 105, ShipName: 'Noth bay', EmployeeID: 7 },
-        { Order: 106, ShipName: 'baratna', EmployeeID: 8 },
-        { Order: 107, ShipName: 'Charge', EmployeeID: 9 },
-    ];
-
-    function rowDataBound(args) {
-        var filter = args.data.EmployeeID;
-        var data = new ej.data.DataManager(this.childGrid.dataSource).executeLocal(new ej.data.Query().where("EmployeeID", "equal", parseInt(filter), true));
-        if (data.length == 0) {
-            //here hide which parent row has no child records
-            args.row.querySelector('td').innerHTML = " ";
-            args.row.querySelector('td').className = "e-customizedExpandcell";
-        }
-    }
-    
-</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/hierarchyprint/razor b/ej2-asp-core-mvc/code-snippet/grid/how-to/hierarchyprint/razor
deleted file mode 100644
index cb8d8f5842..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/hierarchyprint/razor
+++ /dev/null
@@ -1,65 +0,0 @@
-@{
-   var SecondChildGrid = new Syncfusion.EJ2.Grids.Grid() { DataSource = (IEnumerable<object>)ViewBag.CustomerDataSource,
-       QueryString = "CustomerID",
-       Columns = new List<Syncfusion.EJ2.Grids.GridColumn>
-       {
-         new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="90", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },
-         new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCountry", HeaderText="Ship Country", Width="90" },
-        }
-   };
-   var ChildGrid = new Syncfusion.EJ2.Grids.Grid() { DataSource = (IEnumerable<object>)ViewBag.DataSource,
-          QueryString = "EmployeeID",
-          Columns = new List<Syncfusion.EJ2.Grids.GridColumn>
-          {
-            new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120" },
-            new Syncfusion.EJ2.Grids.GridColumn(){ Field="Freight", HeaderText="Freight", Width="120", Format="C2", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },
-            new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName", HeaderText="Ship Name", Width="150" },
-            new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" },
-          },
-          ChildGrid = SecondChildGrid
-      };
- }
-                
-@Html.EJS().Grid("HierarchyPrint").DataSource((IEnumerable<object>)ViewBag.EmpDataSource).HierarchyPrintMode(Syncfusion.EJ2.Grids.HierarchyGridPrintMode.Expanded).Columns(col =>
-{
-   col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("FirstName").HeaderText("Name").Width("125").Add();
-   col.Field("Title").HeaderText("Title").Width("180").Add();
-   col.Field("City").HeaderText("City").Width("135").Add();
-
-}).AllowSorting().AllowPaging().PageSettings(page => page.PageSize(5)).Toolbar(new List<string>() { "Print"}).ChildGrid(ChildGrid).ActionBegin("actionBegin").Load("load").Render()
-
-                
-<script>
-
-    var expandedChildGrid = {};
-
-    function actionBegin(args) {
-        if (args.requestType === 'paging') {
-           expandedChildGrid = ej.base.extend({}, expandedChildGrid, getExpandedState(this, 'Expanded', args.previousPage));
-        }
-    }
-
-    function load() {
-        this.on(ej.grids.printGridInit, printInit, this);
-    }
-
-    function printInit(gridModel) {
-        gridModel.printgrid.expandedRows = ej.base.extend({}, expandedChildGrid, gridModel.expandedRows);
-    }
-
-    function getExpandedState(gObj, hierarchyPrintMode, currentPage) {
-         var obj = {};
-         var rows = gObj.getRowsObject();
-         for (var i = 0; i < rows.length; i++) {
-             var row = rows[i];
-             if (row.isExpand && !row.isDetailRow) {
-                var index = gObj.allowPaging ? row.index + (currentPage * gObj.pageSettings.pageSize) - gObj.pageSettings.pageSize : row.index;
-                obj[index] = {};
-                obj[index].isExpand = true;
-                obj[index].gridModel = ej.grids.getPrintGridModel(row.childGrid, hierarchyPrintMode);
-             }
-         }
-         return obj;
-     }
- </script>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/hierarchyprint/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/how-to/hierarchyprint/tagHelper
deleted file mode 100644
index 964817c1a9..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/hierarchyprint/tagHelper
+++ /dev/null
@@ -1,69 +0,0 @@
- @{
-     var SecondChildGrid = new Syncfusion.EJ2.Grids.Grid() {
-         DataSource = (IEnumerable<object>)ViewBag.DataSource,
-         QueryString = "CustomerID",
-         Columns = new List<Syncfusion.EJ2.Grids.GridColumn>
-         {
-            new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="90", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },
-            new Syncfusion.EJ2.Grids.GridColumn(){ Field="Country", HeaderText="Country", Width="90" },
-         }
-     };
-  }
-
-@{ 
-    var ChildGrid = new Syncfusion.EJ2.Grids.Grid() {
-        DataSource = (IEnumerable<object>)ViewBag.DataSource,
-        QueryString = "EmployeeID",
-        Columns = new List<Syncfusion.EJ2.Grids.GridColumn>
-        {
-           new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120" },
-           new Syncfusion.EJ2.Grids.GridColumn(){ Field="Freight", HeaderText="Freight", Width="120", Format="C2", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },
-           new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName", HeaderText="Ship Name", Width="150" },
-           new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" },
-        },
-        ChildGrid = SecondChildGrid
-    };
-}
-
-<ejs-grid id="HierarchyPrint" dataSource="@ViewBag.EmpDataSource" childGrid="ChildGrid" hierarchyPrintMode="Expanded" toolbar="@(new List<string>() {"Print" })" actionBegin="actionBegin" load="load" allowPaging="true">
-   <e-grid-pageSettings pageSize="3"></e-grid-pageSettings>
-   <e-grid-columns>
-         <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="125"></e-grid-column>
-         <e-grid-column field="FirstName" headerText="Name" width="120"></e-grid-column>
-         <e-grid-column field="LastName" headerText="Last Name" width="170"></e-grid-column>
-         <e-grid-column field="City" headerText="City" textAlign="Right" width="135"></e-grid-column>
-    </e-grid-columns>
-</ejs-grid>
-
-<script>
-    var expandedChildGrid = {};
-
-    function actionBegin(args) {
-        if (args.requestType === 'paging') {
-           expandedChildGrid = ej.base.extend({}, expandedChildGrid, getExpandedState(this, 'Expanded', args.previousPage));
-        }
-    }
-
-    function load() {
-        this.on(ej.grids.printGridInit, printInit, this);
-    }
-
-    function printInit(gridModel) {
-        gridModel.printgrid.expandedRows = ej.base.extend({}, expandedChildGrid, gridModel.expandedRows);
-    }
-
-    function getExpandedState(gObj, hierarchyPrintMode, currentPage) {
-         var obj = {};
-         var rows = gObj.getRowsObject();
-         for (var i = 0; i < rows.length; i++) {
-             var row = rows[i];
-             if (row.isExpand && !row.isDetailRow) {
-                var index = gObj.allowPaging ? row.index + (currentPage * gObj.pageSettings.pageSize) - gObj.pageSettings.pageSize : row.index;
-                obj[index] = {};
-                obj[index].isExpand = true;
-                obj[index].gridModel = ej.grids.getPrintGridModel(row.childGrid, hierarchyPrintMode);
-             }
-          }
-          return obj;
-     }
-</script>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/open-dropdown-popup/open-dropdown-popup.cs b/ej2-asp-core-mvc/code-snippet/grid/how-to/open-dropdown-popup/open-dropdown-popup.cs
deleted file mode 100644
index 4bd8a95ac9..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/open-dropdown-popup/open-dropdown-popup.cs
+++ /dev/null
@@ -1,6 +0,0 @@
-    public IActionResult Index()
-    {
-        var Order = OrderDetails.GetAllRecords();
-        ViewBag.DataSource = Order;
-        return View();
-    }
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/open-dropdown-popup/razor b/ej2-asp-core-mvc/code-snippet/grid/how-to/open-dropdown-popup/razor
deleted file mode 100644
index 7ce4c95131..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/open-dropdown-popup/razor
+++ /dev/null
@@ -1,35 +0,0 @@
-@Html.EJS().Grid("Grid").ActionComplete("onActionComplete").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowPaging().Columns(col =>
-{
-    col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(100).IsPrimaryKey(true).Add();
-    col.Field("CustomerID").HeaderText("Customer ID").Width(120).Add();
-    col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(120).Format("C2").Add();
-    col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width(150).Add();
-}).Load("load").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
-
-<script>
-    var isDropdown = false;
-    
-    function load(args) {
-        var instance = document.getElementById('Grid').ej2_instances[0];
-        instance.element.addEventListener('mouseup', function (e) {
-            if (e.target.classList.contains("e-rowcell")) {
-              if (instance.isEdit)
-                  instance.endEdit();
-              var rowInfo = instance.getRowInfo(e.target);
-              if (rowInfo.column.field === "ShipCountry")
-                  isDropdown = true;
-              instance.selectRow(rowInfo.rowIndex);
-              instance.startEdit();
-            }
-        });
-    }  
-
-    function onActionComplete(args) {
-        if (args.requestType =="beginEdit" && isDropdown) {
-            isDropdown = false;
-            var dropdownObj = args.form.querySelector('.e-dropdownlist').ej2_instances[0];
-            dropdownObj.element.focus();
-            dropdownObj.showPopup();
-        }
-    } 
-</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/open-dropdown-popup/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/how-to/open-dropdown-popup/tagHelper
deleted file mode 100644
index 6a2c3d5248..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/open-dropdown-popup/tagHelper
+++ /dev/null
@@ -1,37 +0,0 @@
-<ejs-grid id="Grid" actionComplete="onActionComplete" dataSource="ViewBag.DataSource" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Update", "Cancel"})" load="load">
-    <e-grid-editSettings allowAdding="true" allowEditing="true" allowDeleting="true" mode="Normal"></e-grid-editSettings>
-    <e-grid-columns>
-        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100" isPrimaryKey="true"></e-grid-column>
-        <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
-        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" width="120" format="C2"></e-grid-column>
-        <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-grid-column>
-    </e-grid-columns>
-</ejs-grid>
-    
-<script>
-    var isDropdown = false;
-    
-    function load(args) {
-        var instance = document.getElementById('Grid').ej2_instances[0];
-        instance.element.addEventListener('mouseup', function (e) {
-            if (e.target.classList.contains("e-rowcell")) {
-              if (instance.isEdit)
-                  instance.endEdit();
-              var rowInfo = instance.getRowInfo(e.target);
-              if (rowInfo.column.field === "ShipCountry")
-                  isDropdown = true;
-              instance.selectRow(rowInfo.rowIndex);
-              instance.startEdit();
-            }
-        });
-    }  
-
-    function onActionComplete(args) {
-        if (args.requestType =="beginEdit" && isDropdown) {
-            isDropdown = false;
-            var dropdownObj = args.form.querySelector('.e-dropdownlist').ej2_instances[0];
-            dropdownObj.element.focus();
-            dropdownObj.showPopup();
-        }
-    }      
-</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/pagerdropdown/razor b/ej2-asp-core-mvc/code-snippet/grid/how-to/pagerdropdown/razor
deleted file mode 100644
index 32b723ef06..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/pagerdropdown/razor
+++ /dev/null
@@ -1,9 +0,0 @@
-@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
-{
-   col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
-   col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
-   col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
-
-}).AllowPaging().PageSettings(page => { page.PageSizes((new string[] { "5", "10", "All" })); }).Render()
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/pagerdropdown/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/how-to/pagerdropdown/tagHelper
deleted file mode 100644
index c8035935b9..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/pagerdropdown/tagHelper
+++ /dev/null
@@ -1,9 +0,0 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true"> 
-<e-grid-pagesettings pageSizes="@(new string[] { "5", "10" , "All" })"></e-grid-pagesettings>
-    <e-grid-columns>
-        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
-        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
-        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
-        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
-    </e-grid-columns>
-</ejs-grid>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/row-cell-index/razor b/ej2-asp-core-mvc/code-snippet/grid/how-to/row-cell-index/razor
deleted file mode 100644
index 362026973f..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/row-cell-index/razor
+++ /dev/null
@@ -1,16 +0,0 @@
-@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).RowSelected("rowSelected").Columns(col =>
-{
-   col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
-   col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
-   col.Field("ShipCountry").HeaderText("Ship Country").Width("150").EditType("dropdownedit").Add();
-
-}).AllowPaging().Render()
-
-<script>
-    function rowSelected(args) {
-        alert("row index: " + args.row.getAttribute('aria-rowindex'));
-        alert("column index: " + args.target.getAttribute('aria-colindex'));
-    }
-</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/row-cell-index/rowcellidx.cs b/ej2-asp-core-mvc/code-snippet/grid/how-to/row-cell-index/rowcellidx.cs
deleted file mode 100644
index 4019df2042..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/row-cell-index/rowcellidx.cs
+++ /dev/null
@@ -1,5 +0,0 @@
-public IActionResult Index()
-{
-    ViewBag.DataSource = OrderDetails.GetAllRecords();
-    return View();
-} 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/row-cell-index/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/how-to/row-cell-index/tagHelper
deleted file mode 100644
index 96fa118b36..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/row-cell-index/tagHelper
+++ /dev/null
@@ -1,16 +0,0 @@
-
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" rowSelected="rowSelected">
-    <e-grid-columns>
-        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
-        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>
-        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>
-        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150" editType='dropdownedit'></e-grid-column>
-    </e-grid-columns>
-</ejs-grid>
-
-<script>
-    function rowSelected(args) {
-        alert("row index: " + args.row.getAttribute('aria-rowindex'));
-        alert("column index: " + args.target.getAttribute('aria-colindex'));
-    }
-</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/single-click-inline-edit/razor b/ej2-asp-core-mvc/code-snippet/grid/how-to/single-click-inline-edit/razor
deleted file mode 100644
index 967bfec17a..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/single-click-inline-edit/razor
+++ /dev/null
@@ -1,22 +0,0 @@
-@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowPaging().Columns(col =>
-{
-    col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(100).IsPrimaryKey(true).Add();
-    col.Field("CustomerID").HeaderText("Customer ID").Width(120).Add();
-    col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(120).Format("C2").Add();
-    col.Field("ShipCountry").HeaderText("Ship Country").Width(150).Add();
-}).Load("load").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
-
-<script>
-    function load(args) {
-        var instance = document.getElementById('Grid').ej2_instances[0];
-        instance.element.addEventListener('mouseup', function (e) {
-            if (e.target.classList.contains("e-rowcell")) {
-                if (instance.isEdit)
-                    instance.endEdit();
-                var index = parseInt(e.target.getAttribute("Index"));
-                instance.selectRow(index);
-                instance.startEdit();
-            };
-        });
-    }
-</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/single-click-inline-edit/single-click-normal-edit.cs b/ej2-asp-core-mvc/code-snippet/grid/how-to/single-click-inline-edit/single-click-normal-edit.cs
deleted file mode 100644
index 4bd8a95ac9..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/single-click-inline-edit/single-click-normal-edit.cs
+++ /dev/null
@@ -1,6 +0,0 @@
-    public IActionResult Index()
-    {
-        var Order = OrderDetails.GetAllRecords();
-        ViewBag.DataSource = Order;
-        return View();
-    }
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/single-click-inline-edit/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/how-to/single-click-inline-edit/tagHelper
deleted file mode 100644
index 17ebdaf11d..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/single-click-inline-edit/tagHelper
+++ /dev/null
@@ -1,24 +0,0 @@
-<ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Update", "Cancel"})" load="load">
-    <e-grid-editSettings allowAdding="true" allowEditing="true" allowDeleting="true" mode="Normal"></e-grid-editSettings>
-    <e-grid-columns>
-        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100" isPrimaryKey="true"></e-grid-column>
-        <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
-        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" width="120" format="C2"></e-grid-column>
-        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
-    </e-grid-columns>
-</ejs-grid>
-    
-<script>
-    function load(args) {
-        var instance = document.getElementById('Grid').ej2_instances[0];
-        instance.element.addEventListener('mouseup', function (e) {
-            if (e.target.classList.contains("e-rowcell")) {
-                if (instance.isEdit)
-                    instance.endEdit();
-                var index = parseInt(e.target.getAttribute("Index"));
-                instance.selectRow(index);
-                instance.startEdit();
-            };
-        });
-    }        
-</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/titleprint/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/how-to/titleprint/tagHelper
deleted file mode 100644
index 206a458867..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/titleprint/tagHelper
+++ /dev/null
@@ -1,23 +0,0 @@
-<div id="GridParent">
-    <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" toolbar="@(new List<string>() { "Print" })" beforePrint="beforePrint" height="315" allowPaging="true">
-        <e-grid-columns>
-            <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
-            <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>
-            <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>
-            <e-grid-column field="ShipCity" headerText="Ship City" width="120"></e-grid-column>
-            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
-        </e-grid-columns>
-    </ejs-grid>
-</div>
-
-<script>
-    function beforePrint(args) {
-    var div = document.createElement("Div")
-        div.innerHTML = "Title here"
-        div.style.textAlign = 'center';
-        div.style.color = 'red';
-        div.style.padding = '10px 0';
-        div.style.fontSize = '25px';
-        args.element.insertBefore(div, args.element.childNodes[0]);
-}
-</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/titleprint/titleprint.cs b/ej2-asp-core-mvc/code-snippet/grid/how-to/titleprint/titleprint.cs
deleted file mode 100644
index da9dcb1404..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/titleprint/titleprint.cs
+++ /dev/null
@@ -1,6 +0,0 @@
-public IActionResult Index()
-{
-    var Order = OrderDetails.GetAllRecords();
-    ViewBag.DataSource = Order;
-    return View();
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/pagerdropdown/pagerdropdown.cs b/ej2-asp-core-mvc/code-snippet/grid/print/print-add-title/print.cs
similarity index 98%
rename from ej2-asp-core-mvc/code-snippet/grid/how-to/pagerdropdown/pagerdropdown.cs
rename to ej2-asp-core-mvc/code-snippet/grid/print/print-add-title/print.cs
index 4019df2042..d9ebad91a3 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/pagerdropdown/pagerdropdown.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-add-title/print.cs
@@ -2,4 +2,4 @@ public IActionResult Index()
 {
     ViewBag.DataSource = OrderDetails.GetAllRecords();
     return View();
-} 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/titleprint/razor b/ej2-asp-core-mvc/code-snippet/grid/print/print-add-title/razor
similarity index 84%
rename from ej2-asp-core-mvc/code-snippet/grid/how-to/titleprint/razor
rename to ej2-asp-core-mvc/code-snippet/grid/print/print-add-title/razor
index f3b94304a3..89d6a9f926 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/titleprint/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-add-title/razor
@@ -1,22 +1,19 @@
-
-@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
+@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("348px").Columns(col =>
 {
    col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
    col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
     col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("ShipCity").HeaderText("Ship City").Width("120").Add();
    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
-
 }).AllowPaging().BeforePrint("beforePrint").Toolbar(new List<string>() { "Print" }).Render()
-
 <script>
     function beforePrint(args) {
-    var div = document.createElement("Div")
+        var div = document.createElement("Div")
         div.innerHTML = "Title here"
         div.style.textAlign = 'center';
         div.style.color = 'red';
         div.style.padding = '10px 0';
         div.style.fontSize = '25px';
         args.element.insertBefore(div, args.element.childNodes[0]);
-}
+    }
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-add-title/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/print-add-title/tagHelper
new file mode 100644
index 0000000000..c0a713b817
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-add-title/tagHelper
@@ -0,0 +1,20 @@
+<ejs-grid id="grid" dataSource="@ViewBag.DataSource" toolbar="@(new List<string>() { "Print" })" beforePrint="beforePrint" height="315" allowPaging="true">
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer Name" type="string" width="120"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>
+        <e-grid-column field="ShipCity" headerText="Ship City" width="120"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
+   </e-grid-columns>
+</ejs-grid>
+<script>
+    function beforePrint(args) {
+        var div = document.createElement("Div")
+        div.innerHTML = "Title here"
+        div.style.textAlign = 'center';
+        div.style.color = 'red';
+        div.style.padding = '10px 0';
+        div.style.fontSize = '25px';
+        args.element.insertBefore(div, args.element.childNodes[0]);
+    }
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/hierarchyprint/hierarchyprint.cs b/ej2-asp-core-mvc/code-snippet/grid/print/print-expanded-state/hierarchyprint.cs
similarity index 72%
rename from ej2-asp-core-mvc/code-snippet/grid/how-to/hierarchyprint/hierarchyprint.cs
rename to ej2-asp-core-mvc/code-snippet/grid/print/print-expanded-state/hierarchyprint.cs
index f205693de8..000a47ca09 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/hierarchyprint/hierarchyprint.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-expanded-state/hierarchyprint.cs
@@ -1,7 +1,7 @@
 public IActionResult Index()
 {
     ViewBag.DataSource =  OrdersDetails.GetAllRecords();;
-    ViewBag.EmpDataSource = EmployeeView.GetAllRecords();
+    ViewBag.EmployeeDataSource = EmployeeView.GetAllRecords();
     ViewBag.CustomerDataSource = Customer.GetAllRecords();
     return View();
 } 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-expanded-state/razor b/ej2-asp-core-mvc/code-snippet/grid/print/print-expanded-state/razor
new file mode 100644
index 0000000000..0da1446fcd
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-expanded-state/razor
@@ -0,0 +1,59 @@
+@{
+   var secondChildGrid = new Syncfusion.EJ2.Grids.Grid() { DataSource = (IEnumerable<object>)ViewBag.CustomerDataSource,
+       QueryString = "CustomerID",
+       Columns = new List<Syncfusion.EJ2.Grids.GridColumn>
+       {
+         new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="90", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },
+         new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCountry", HeaderText="Ship Country", Width="90" },
+        }
+   };
+   var childGrid = new Syncfusion.EJ2.Grids.Grid() { DataSource = (IEnumerable<object>)ViewBag.DataSource,
+          QueryString = "EmployeeID",
+          Columns = new List<Syncfusion.EJ2.Grids.GridColumn>
+          {
+            new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120" },
+            new Syncfusion.EJ2.Grids.GridColumn(){ Field="Freight", HeaderText="Freight", Width="120", Format="C2", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },
+            new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName", HeaderText="Ship Name", Width="150" },
+            new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" },
+          },
+          ChildGrid = secondChildGrid
+      };
+}
+                
+@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.EmployeeDataSource).HierarchyPrintMode(Syncfusion.EJ2.Grids.HierarchyGridPrintMode.Expanded).Columns(col =>
+{
+   col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+   col.Field("FirstName").HeaderText("First Name").Width("125").Add();
+   col.Field("Title").HeaderText("Title").Width("180").Add();
+   col.Field("City").HeaderText("City").Width("135").Add();
+}).AllowPaging().PageSettings(page => page.PageSize(4)).Toolbar(new List<string>() { "Print"}).ChildGrid(childGrid).ActionBegin("actionBegin").Load("load").Render();            
+<script>
+    var persistedExpandedRows = {};
+    function actionBegin(eventArgs) {
+        if (eventArgs.requestType === 'paging') {
+            persistedExpandedRows = ej.base.extend({}, persistedExpandedRows, getExpandedState(this, 'Expanded', eventArgs.previousPage));
+        }
+    }
+    function load() {
+        this.on(ej.grids.printGridInit, printInit, this);
+    }
+    function printInit(gridInstance) {
+        gridInstance.printgrid.expandedRows = ej.base.extend({}, persistedExpandedRows, gridInstance.expandedRows);
+    }
+    function getExpandedState(gridObject, hierarchyPrintMode, currentPage) {
+        var expandedRowState = {};
+        var gridRows = gridObject.getRowsObject();
+        for (var rowIndex = 0; rowIndex < gridRows.length; rowIndex++) {
+            var gridRow = gridRows[rowIndex];
+            if (gridRow.isExpand && !gridRow.isDetailRow) {
+                var expandedIndex = gridObject.allowPaging
+                    ? gridRow.index + (currentPage * gridObject.pageSettings.pageSize) - gridObject.pageSettings.pageSize
+                    : gridRow.index;
+                expandedRowState[expandedIndex] = {};
+                expandedRowState[expandedIndex].isExpand = true;
+                expandedRowState[expandedIndex].gridModel = ej.grids.getPrintGridModel(gridRow.childGrid, hierarchyPrintMode);
+            }
+        }
+        return expandedRowState;
+    }
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-expanded-state/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/print-expanded-state/tagHelper
new file mode 100644
index 0000000000..fe4fadaf08
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-expanded-state/tagHelper
@@ -0,0 +1,64 @@
+@{
+    var secondChildGrid = new Syncfusion.EJ2.Grids.Grid() {
+        DataSource = (IEnumerable<object>)ViewBag.CustomerDataSource,
+        QueryString = "CustomerID",
+        Columns = new List<Syncfusion.EJ2.Grids.GridColumn>
+        {
+            new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="90", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },
+            new Syncfusion.EJ2.Grids.GridColumn(){ Field="Country", HeaderText="Country", Width="90" },
+        }
+    };
+}
+@{ 
+    var childGrid = new Syncfusion.EJ2.Grids.Grid() {
+        DataSource = (IEnumerable<object>)ViewBag.DataSource,
+        QueryString = "EmployeeID",
+        Columns = new List<Syncfusion.EJ2.Grids.GridColumn>
+        {
+           new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120" },
+           new Syncfusion.EJ2.Grids.GridColumn(){ Field="Freight", HeaderText="Freight", Width="120", Format="C2", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },
+           new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName", HeaderText="Ship Name", Width="150" },
+           new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" },
+        },
+        ChildGrid = secondChildGrid
+    };
+}
+<ejs-grid id="grid" dataSource="@ViewBag.EmployeeDataSource" childGrid="childGrid" hierarchyPrintMode="Expanded" toolbar="@(new List<string>() {"Print" })" actionBegin="actionBegin" load="load" allowPaging="true">
+   <e-grid-pageSettings pageSize="4"></e-grid-pageSettings>
+   <e-grid-columns>
+        <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="125"></e-grid-column>
+        <e-grid-column field="FirstName" headerText="First Name" width="120"></e-grid-column>
+        <e-grid-column field="LastName" headerText="Last Name" width="170"></e-grid-column>
+        <e-grid-column field="City" headerText="City" textAlign="Right" width="135"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<script>
+    var persistedExpandedRows = {};
+    function actionBegin(eventArgs) {
+        if (eventArgs.requestType === 'paging') {
+            persistedExpandedRows = ej.base.extend({}, persistedExpandedRows, getExpandedState(this, 'Expanded', eventArgs.previousPage));
+        }
+    }
+    function load() {
+        this.on(ej.grids.printGridInit, printInit, this);
+    }
+    function printInit(gridInstance) {
+        gridInstance.printgrid.expandedRows = ej.base.extend({}, persistedExpandedRows, gridInstance.expandedRows);
+    }
+    function getExpandedState(gridObject, hierarchyPrintMode, currentPage) {
+        var expandedRowState = {};
+        var gridRows = gridObject.getRowsObject();
+        for (var rowIndex = 0; rowIndex < gridRows.length; rowIndex++) {
+            var gridRow = gridRows[rowIndex];
+            if (gridRow.isExpand && !gridRow.isDetailRow) {
+                var expandedIndex = gridObject.allowPaging
+                    ? gridRow.index + (currentPage * gridObject.pageSettings.pageSize) - gridObject.pageSettings.pageSize
+                    : gridRow.index;
+                expandedRowState[expandedIndex] = {};
+                expandedRowState[expandedIndex].isExpand = true;
+                expandedRowState[expandedIndex].gridModel = ej.grids.getPrintGridModel(gridRow.childGrid, hierarchyPrintMode);
+            }
+        }
+        return expandedRowState;
+    }
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/sort-comparer/razor b/ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/razor
similarity index 100%
rename from ej2-asp-core-mvc/code-snippet/grid/how-to/sort-comparer/razor
rename to ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/razor
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/sort-comparer/sort-comparer.cs b/ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/sort-comparer.cs
similarity index 100%
rename from ej2-asp-core-mvc/code-snippet/grid/how-to/sort-comparer/sort-comparer.cs
rename to ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/sort-comparer.cs
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/sort-comparer/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/tagHelper
similarity index 100%
rename from ej2-asp-core-mvc/code-snippet/grid/how-to/sort-comparer/tagHelper
rename to ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/tagHelper
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/dialog-editing.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/dialog-editing.md
index 228d6014ee..2559102b33 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/dialog-editing.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/dialog-editing.md
@@ -8,23 +8,13 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
+# Dialog editing in ASP.NET MVC Grid component
 
-# Dialog Editing in ##Platform_Name## Grid Component
+Dialog editing is a feature in the Grid component that allows you to edit the data of the currently selected row using a dialog window. With dialog editing, you can easily modify cell values and save the changes back to the data source.This feature is particularly beneficial in scenarios where you need to quickly modify data without navigating to a separate page or view, and it streamlines the process of editing multiple cells.
 
-In dialog edit mode, when you start editing the currently selected row data will be shown on a dialog. You can change the cell values and save edited data to the data source. To enable Dialog edit, set the [`Mode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) of [`EditSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html) as **Dialog**.
+To enable dialog editing in grid component, you need to set the [EditSettings.Mode](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) property to **Dialog**. This property determines the editing mode for the grid, and when set to **Dialog**, it enables the dialog editing feature.
 
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/edit/dialog/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Dialog.cs" %}
-{% include code-snippet/grid/edit/dialog/dialog.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+Here's an example how to enable dialog editing in the ASP.NET MVC grid component:
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
@@ -34,35 +24,18 @@ In dialog edit mode, when you start editing the currently selected row data will
 {% include code-snippet/grid/edit/dialog/dialog.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
-
 
+![Dialog editing](../images/editing/dialog-edit.png)
 
 ## Customize edit dialog
 
-You can customize the appearance of the edit dialog in the [`ActionComplete`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridBuilder-1.html#Syncfusion_EJ2_Grids_GridBuilder_1_ActionComplete_System_String_) event based on **requestType** as **beginEdit** or **add**.
-
-In the following example, the dialog's properties like header text, showCloseIcon, height have been changed while editing and adding the records.
-
-Also the locale text for the **Save** and **Cancel** buttons has been changed by overriding the default locale strings.
-
-You can refer the Grid [`Default text`](../global-local/) list for more localization.
+The edit dialog in the Grid component allows you to customize its appearance and behavior based on the type of action being performed, such as editing or adding a record. You can modify properties like header text, showCloseIcon, and height to tailor the edit dialog to your specific requirements. Additionally, you can override default localization strings to provide custom text for buttons or other elements within the dialog.
 
-{% if page.publishingplatform == "aspnet-core" %}
+To customize the edit dialog, you need to handle the [ActionComplete](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event of the Grid component and perform the necessary modifications based on the **requestType** parameter. The **requestType** parameter identifies the type of action being performed, such as **beginEdit** for editing a record or **add** for adding a new record.
 
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/edit/customizedialog/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Dialog.cs" %}
-{% include code-snippet/grid/edit/customizedialog/dialog.cs %}
-{% endhighlight %}
-{% highlight c# tabtitle="Dialog.cs" %}
-{% include code-snippet/grid/edit/customizedialog/dialog.cs %}
-{% endhighlight %}
-{% endtabs %}
+>You can refer the Grid [Default text](../global-local/) list for more localization.
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+The following example that demonstrates how to customize the edit dialog using the `ActionComplete` event:
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
@@ -71,39 +44,19 @@ You can refer the Grid [`Default text`](../global-local/) list for more localiza
 {% highlight c# tabtitle="Dialog.cs" %}
 {% include code-snippet/grid/edit/customizedialog/dialog.cs %}
 {% endhighlight %}
-{% highlight c# tabtitle="Dialog.cs" %}
-{% include code-snippet/grid/edit/customizedialog/dialog.cs %}
-{% endhighlight %}
 {% endtabs %}
-{% endif %}
 
+![Customize edit dialog](../images/editing/dialog-customize.png)
 
-
-> The Grid add or edit dialog element has the max-height property, which is calculated based on the available window height. So, in the normal window (1920 x 1080), it is possible to set the dialog’s height up to 658px.
+> The Grid add or edit dialog element has the max-height property, which is calculated based on the available window height. So, in the normal window (1920 x 1080), it is possible to set the dialog's height up to 658px.
 
 ## Show or hide columns in dialog editing
 
-The Grid has the option to show hidden columns or hide visible columns while editing in the dialog edit mode by using the [ActionBegin](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin) event of the Grid.
-
-In the `ActionBegin` event, when the `requestType` is `beginEdit` or `add`, the column will be shown or hidden using the [Visible](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Visible) property of [Column](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridColumn.html). When the `requestType` is `save`, the properties will be reset to their original state.
-
-In the following example, the CustomerID column is rendered as a hidden column, and the ShipCountry column is rendered as a visible column. In the edit mode, the CustomerID column will be changed to a visible state and the ShipCountry column will be changed to a hidden state.
-
-{% if page.publishingplatform == "aspnet-core" %}
+The show or hide columns in dialog editing feature in the grid allows you to dynamically control the visibility of columns while editing in the dialog edit mode. This feature is useful when you want to display specific columns based on the type of action being performed, such as editing an existing record or adding a new record. To achieve this, you can utilize the [ActionBegin](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin) event of the Grid. 
 
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/edit/show-hide-edit-dialog/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Dialog.cs" %}
-{% include code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs %}
-{% endhighlight %}
-{% highlight c# tabtitle="Dialog.cs" %}
-{% include code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs %}
-{% endhighlight %}
-{% endtabs %}
+The `ActionBegin` event is triggered whenever an action is initiated in the grid, such as editing, adding, or deleting a record. Within the event handler, you can check the **requestType** parameter to determine the type of action being performed. If the **requestType** is `beginEdit` or `add`, you can modify the visibility of columns using the `Column.Visible` property. This property is used to determine whether a column should be displayed or hidden. Then, when the **requestType** is `save`, you can reset the column visibility to its initial state using the `Column.Visible` property.
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+In the following example, the **CustomerID** column is rendered as a hidden column, and the **ShipCountry** column is rendered as a visible column. In the edit mode, the **CustomerID** column will be changed to a visible state and the **ShipCountry** column will be changed to a hidden state.
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
@@ -112,35 +65,17 @@ In the following example, the CustomerID column is rendered as a hidden column,
 {% highlight c# tabtitle="Dialog.cs" %}
 {% include code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs %}
 {% endhighlight %}
-{% highlight c# tabtitle="Dialog.cs" %}
-{% include code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs %}
-{% endhighlight %}
 {% endtabs %}
-{% endif %}
-
 
+![Show or hide columns in dialog editing](../images/editing/dialog-show-hide.png)
 
 ## Use wizard like dialog editing
 
-Wizard helps you create intuitive step-by-step forms to fill. You can achieve the wizard like editing by using the dialog template feature. It support your own editing template by defining [`Mode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) of [`EditSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html) as **Dialog** and [`Template`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Template) as SCRIPT element ID or HTML string which holds the template.
-
-The following example demonstrate the wizard like editing in the grid with the obtrusive Validation.
+Wizard-like dialog editing is a powerful feature in the Grid component that enables the creation of intuitive step-by-step forms. This feature provides a structured approach to form completion or data entry by breaking down the process into manageable steps.This feature is particularly useful when you have complex forms that need to be broken down into smaller sections to guide you through the data entry process.
 
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/edit/wizardediting/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Dialog.cs" %}
-{% include code-snippet/grid/edit/wizardediting/dialog.cs %}
-{% endhighlight %}
-{% highlight c# tabtitle="Dialog.cs" %}
-{% include code-snippet/grid/edit/wizardediting/dialog.cs %}
-{% endhighlight %}
-{% endtabs %}
+To achieve wizard-like dialog editing in the grid component, you can use the dialog template feature. This feature allows you to define your own custom editing template using the [EditSettings.Mode](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) property set to  **Dialog** and the [EditSettings.Template](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Template) property to specify the template variable that defines the editors for each step of the wizard.
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+The following example demonstrate the wizard like editing in the grid with the unobtrusive validation.
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
@@ -149,38 +84,23 @@ The following example demonstrate the wizard like editing in the grid with the o
 {% highlight c# tabtitle="Dialog.cs" %}
 {% include code-snippet/grid/edit/wizardediting/dialog.cs %}
 {% endhighlight %}
-{% highlight c# tabtitle="Dialog.cs" %}
-{% include code-snippet/grid/edit/wizardediting/dialog.cs %}
-{% endhighlight %}
 {% endtabs %}
-{% endif %}
 
+![Use wizard like dialog editing](../images/editing/dialog-tabs-multiple.gif)
 
-## Customize Add/Edit Dialog footer
+## Customize add/edit dialog footer
 
-In dialog edit mode, a dialog will show up when editing the currently selected row or adding a new row. By default, you can save or cancel the edited changes by clicking the Save or Cancel button in the dialog's footer. Along with these buttons, it is possible to add a custom button in the footer section using the [ActionComplete](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridBuilder-1.html#Syncfusion_EJ2_Grids_GridBuilder_1_ActionComplete_System_String_) event of the Grid.
+The Customize add/edit dialog footer feature in the grid allows you to modify the footer section of the dialog that appears when editing the currently selected row or adding a new row. By default, the dialog displays two buttons in the footer section: Save and Cancel, which allow you to save or discard the changes made in the dialog. This feature is particularly helpful when you want to add custom buttons to the dialog's footer, implement specific actions, or customize the appearance of the buttons, such as changing their color or size in the dialog's footer. This can be achieved using the [ActionComplete](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event of the Grid component.
 
 In the following sample, using the `dialog` argument of the `ActionComplete` event, the action for the custom button can be customized.
 
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/edit/custombutton/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Dialog-Footer.cs" %}
-{% include code-snippet/grid/edit/custombutton/custombutton.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/grid/edit/custombutton/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Dialog-Footer.cs" %}
+{% highlight c# tabtitle="custombutton.cs" %}
 {% include code-snippet/grid/edit/custombutton/custombutton.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
\ No newline at end of file
+
+![Customize add/edit dialog footer](../images/editing/dialog-footer.png)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/add-params-for-filtering.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/add-params-for-filtering.md
deleted file mode 100644
index 596546ee29..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/add-params-for-filtering.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-layout: post
-title: Add Params For Filtering in ##Platform_Name## Grid Component
-description: Learn here all about Add Params For Filtering in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Add Params For Filtering
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Customizing Filter Dialog by using an additional Parameter
-
-You can customize the default settings of the components which are used in Menu filter by using params of filter property in column definition. In the below sample, OrderID and Freight Columns are numeric columns, while open the filter dialog then you can see that NumericTextBox with spin button is displayed to change/set the filter value. Now using the params option we hide the spin button in NumericTextBox for OrderID Column.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/add-params-for-filtering/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Excelfilter.cs" %}
-{% include code-snippet/grid/how-to/add-params-for-filtering/excelfilter.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/add-params-for-filtering/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Excelfilter.cs" %}
-{% include code-snippet/grid/how-to/add-params-for-filtering/excelfilter.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/avoid-typescript-compilation.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/avoid-typescript-compilation.md
index 9936ccfb35..24ddfe70f3 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/avoid-typescript-compilation.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/avoid-typescript-compilation.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Avoid Typescript Compilation in ##Platform_Name## Grid Component
+title: Avoid TypeScript Compilation in the Syncfusion Grid Component for ##Platform_Name##
 description: Learn here all about Avoid Typescript Compilation in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Avoid Typescript Compilation
@@ -8,7 +8,6 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-
 # Avoid TypeScript Compilation
 
 **Syncfusion.EJ2.Javascript** includes typescript declaration files. If your application is not configured to compile typescript then exception may occur. To resolve this we need to prevent the typescript compilation during MS build process by adding the below line in **.csproj** file.
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/collapse-grouped-rows-at-initial-render.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/collapse-grouped-rows-at-initial-render.md
deleted file mode 100644
index d0511abcd0..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/collapse-grouped-rows-at-initial-render.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-layout: post
-title: Collapse Grouped Rows At Initial Render in ##Platform_Name## Grid Component
-description: Learn here all about Collapse Grouped Rows At Initial Render in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Collapse Grouped Rows At Initial Render
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Collapse all grouped rows at initial render
-
-You can collapse all the grouped rows at initial rendering by using [`DataBound`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DataBound) event with **collapseAll** method of the grid.
-
-In the below demo, all the grouped rows are collapsed at initial rendering.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/collapse-grouped-rows/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Collapseall.cs" %}
-{% include code-snippet/grid/how-to/collapse-grouped-rows/collapseall.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/collapse-grouped-rows/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Collapseall.cs" %}
-{% include code-snippet/grid/how-to/collapse-grouped-rows/collapseall.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/complex-column-as-foreign-key-column.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/complex-column-as-foreign-key-column.md
deleted file mode 100644
index c10e37b678..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/complex-column-as-foreign-key-column.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-layout: post
-title: Complex Column As Foreign Key Column in ##Platform_Name## Grid Component
-description: Learn here all about Complex Column As Foreign Key Column in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Complex Column As Foreign Key Column
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Set complex column as Foreignkey column
-
-The following example shows how to set the complex column as foreign key column.
-
-In the following example, **Employee.EmployeeID** is a complex column and also declared as a foreign column which shows **FirstName** column from foreign data.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/foreignkey/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Foreignkey.cs" %}
-{% include code-snippet/grid/columns/foreignkey/foreignkey.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/foreignkey/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Foreignkey.cs" %}
-{% include code-snippet/grid/columns/foreignkey/foreignkey.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/customize-pager-drop-down.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/customize-pager-drop-down.md
deleted file mode 100644
index d90c040d93..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/customize-pager-drop-down.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-layout: post
-title: Customize Pager Drop Down in ##Platform_Name## Grid Component
-description: Learn here all about Customize Pager Drop Down in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Customize Pager Drop Down
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Customize Pager DropDown
-
-To customize default values of pager dropdown, you need to define in [`PageSizes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_PageSizes) property as array of strings.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/pagerdropdown/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Pagerdropdown.cs" %}
-{% include code-snippet/grid/how-to/pagerdropdown/pagerdropdown.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/pagerdropdown/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Pagerdropdown.cs" %}
-{% include code-snippet/grid/how-to/pagerdropdown/pagerdropdown.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/display-null-values-at-bottom.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/display-null-values-at-bottom.md
deleted file mode 100644
index 671a01bbd4..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/display-null-values-at-bottom.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-layout: post
-title: Display Null Values At Bottom in ##Platform_Name## Grid Component
-description: Learn here all about Display Null Values At Bottom in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Display Null Values At Bottom
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Display the null date values at bottom of the Grid while perform sorting
-
-By default the null values are displayed at bottom of the Grid row while perform sorting in ascending order. As well as this values are displayed at top of the Grid row while perform sorting with descending order. But you can customize this default order to display the null values at always bottom row of the Grid by using [`SortComparer`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_SortComparer) property of [`Column`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html).
-
-In the below code we have displayed the null date values at bottom of the Grid row while sorting the **OrderDate** column in both ways.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/sort-comparer/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Sort-comparer.cs" %}
-{% include code-snippet/grid/how-to/sort-comparer/sort-comparer.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/sort-comparer/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Sort-comparer.cs" %}
-{% include code-snippet/grid/how-to/sort-comparer/sort-comparer.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/enable-disable-grid-and-its-actions.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/enable-disable-grid-and-its-actions.md
index 15225b8087..e8481ef087 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/enable-disable-grid-and-its-actions.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/enable-disable-grid-and-its-actions.md
@@ -8,12 +8,9 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
+# Enable disable grid and its actions in ASP.Net MVC Grid component
 
-# Enable/Disable Grid and its actions
-
-You can enable/disable the Grid and its actions by applying/removing corresponding CSS styles.
-
-To enable/disable the grid and its actions, follow the given steps:
+You can enable or disable the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net MVC Grid and its actions by applying or removing specific CSS styles. This functionality is particularly useful in scenarios where interactions need to be restricted. Follow the steps below to implement this feature.
 
 **Step 1**: Create CSS class with custom style to override the default style of Grid.
 
@@ -28,19 +25,19 @@ To enable/disable the grid and its actions, follow the given steps:
 
 ```
 
-**Step 2**: Add/Remove the custom CSS class to the Grid in the click event handler of Button.
+**Step 2**: Add/Remove the CSS class to the Grid in the click event handler of Button.
 
 ```typescript
     <script>
         document.getElementById('element').onclick = function () {
-            var gridInst = document.getElementById("Grid").ej2_instances[0];
-            if (gridInst.element.classList.contains('disablegrid')) {
-                gridInst.element.classList.remove('disablegrid');
-                document.getElementById("GridParent").classList.remove('wrapper');
+            var grid = document.getElementById("grid").ej2_instances[0];
+            if (grid.element.classList.contains('disablegrid')) {
+                grid.element.classList.remove('disablegrid');
+                document.getElementById("gridParent").classList.remove('wrapper');
             }
             else {
-                gridInst.element.classList.add('disablegrid');
-                document.getElementById("GridParent").classList.add('wrapper');
+                grid.element.classList.add('disablegrid');
+                document.getElementById("gridParent").classList.add('wrapper');
             }
         }
     </script>
@@ -49,27 +46,13 @@ To enable/disable the grid and its actions, follow the given steps:
 
 In the below demo, the button click will enable/disable the Grid and its actions.
 
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/disablegrid/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Disablegrid.cs" %}
-{% include code-snippet/grid/how-to/disablegrid/disablegrid.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/grid/how-to/disablegrid/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Disablegrid.cs" %}
+{% highlight c# tabtitle="disablegrid.cs" %}
 {% include code-snippet/grid/how-to/disablegrid/disablegrid.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
-
 
+![Enable disable grid and its actions](../images/howto-enable-disable.gif)
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/enable-editing-in-single-click.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/enable-editing-in-single-click.md
deleted file mode 100644
index 10c93b7edc..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/enable-editing-in-single-click.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-layout: post
-title: Enable Editing In Single Click in Syncfusion ##Platform_Name## Grid Component
-description: Learn here all about Enable Editing In Single Click in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Enable Editing In Single Click
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Enable editing in single click
-
-## Normal Editing
-
-You can make a row editable on a single click with **Normal** mode of editing in Grid, by using the **startEdit** and **endEdit** methods.
-
-Bind the **mouseup** event for Grid and in the event handler call the **startEdit** and **endEdit**, based on the clicked target element.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/single-click-inline-edit/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Single-click-normal-edit.cs" %}
-{% include code-snippet/grid/how-to/single-click-inline-edit/single-click-normal-edit.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/single-click-inline-edit/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Single-click-normal-edit.cs" %}
-{% include code-snippet/grid/how-to/single-click-inline-edit/single-click-normal-edit.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
-
-### Open dropdown edit popup on single click
-
-You can open the default dropdown edit popup with single click edit by focusing the dropdown element and calling the EJ2 dropdown list's **showPopup** method in the Grid's **ActionComplete** event. In this demo we have used a global flag variable in the **mouseup** event to ensure if the dropdown column is the clicked edit target.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/open-dropdown-popup/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Open-dropdown-popup.cs" %}
-{% include code-snippet/grid/how-to/open-dropdown-popup/open-dropdown-popup.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/open-dropdown-popup/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Open-dropdown-popup.cs" %}
-{% include code-snippet/grid/how-to/open-dropdown-popup/open-dropdown-popup.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/get-row-cell-index.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/get-row-cell-index.md
deleted file mode 100644
index b71e2ac210..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/get-row-cell-index.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-layout: post
-title: Get Row Cell Index in ##Platform_Name## Grid Component
-description: Learn here all about Get Row Cell Index in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Get Row Cell Index
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Get specific row and cell index in Grid
-
-You can get the specific row and cell index of the grid by using [`RowSelected`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_RowSelected) event of the grid. Here, we can get the row and cell index by using **aria-rowindex**(get row Index from **tr** element) and **aria-colindex**(column index from **td** element) attribute.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/row-cell-index/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Rowcellidx.cs" %}
-{% include code-snippet/grid/how-to/row-cell-index/rowcellidx.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/row-cell-index/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Rowcellidx.cs" %}
-{% include code-snippet/grid/how-to/row-cell-index/rowcellidx.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/grid-print.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/grid-print.md
deleted file mode 100644
index 844d674019..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/grid-print.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-layout: post
-title: Grid Print in ##Platform_Name## Grid Component
-description: Learn here all about Grid Print in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Grid Print
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Add a title to the header when using Grid print action
-
-You can add your title in the header through an [`BeforePrint`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Grids.Grid~BeforePrint.html) event. With the help of this event you can add your title element as you want.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/titleprint/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Titleprint.cs" %}
-{% include code-snippet/grid/how-to/titleprint/titleprint.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/titleprint/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Titleprint.cs" %}
-{% include code-snippet/grid/how-to/titleprint/titleprint.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/grouped-row-page-size.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/grouped-row-page-size.md
deleted file mode 100644
index fde249dee1..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/grouped-row-page-size.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-layout: post
-title: Grouped Row Page Size in ##Platform_Name## Grid Component
-description: Learn here all about Grouped Row Page Size in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Grouped Row Page Size
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# How to show grouped rows based on the pageSize
-
-By default, we have displayed the no of records based on the [`PageSize`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_PageSize). If you want to show grouped column rows based on the [`PageSize`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_PageSize) then we suggest you to use the below way.
-
-In the below sample, we have overridden the default **generateQuery** to display the grouped rows instead of grid rows based on the [`PageSize`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_PageSize).
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/group-page-size/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Group-page-size.cs" %}
-{% include code-snippet/grid/how-to/group-page-size/group-page-size.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/group-page-size/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Group-page-size.cs" %}
-{% include code-snippet/grid/how-to/group-page-size/group-page-size.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/hide-sorting-in-excel-filter.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/hide-sorting-in-excel-filter.md
deleted file mode 100644
index 6bb8e18305..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/hide-sorting-in-excel-filter.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-layout: post
-title: Hide Sorting In Excel Filter in ##Platform_Name## Grid Component
-description: Learn here all about Hide Sorting In Excel Filter in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Hide Sorting In Excel Filter
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Hide sorting options on excel filter Dialog
-
-You can hide the sorting options on the excel filter dialog by setting display as none for the following classes.
-
-```css
-    .e-excel-ascending,
-    .e-excel-descending,
-    .e-separator.e-excel-separator {
-    display: none;
-    }
-```
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/disable-sorting-excel/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Disable-sorting-excel.cs" %}
-{% include code-snippet/grid/how-to/disable-sorting-excel/disable-sorting-excel.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/disable-sorting-excel/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Disable-sorting-excel.cs" %}
-{% include code-snippet/grid/how-to/disable-sorting-excel/disable-sorting-excel.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/hide-the-expand-collapse-icon-in-parent-row.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/hide-the-expand-collapse-icon-in-parent-row.md
deleted file mode 100644
index 5a864197dd..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/hide-the-expand-collapse-icon-in-parent-row.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-layout: post
-title: Hide The Expand Collapse Icon In Parent Row in ##Platform_Name## Grid Component
-description: Learn here all about Hide The Expand Collapse Icon In Parent Row in Syncfusion ##Platform_Name## Grid component of syncfusion and more.
-platform: ej2-asp-core-mvc
-control: Hide The Expand Collapse Icon In Parent Row
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Hide the expand/collapse icon in parent row with no record in child grid
-
-By default, the expand/collapse icon will be visible even if the child grid is empty.
-
-You can use [`RowDataBound`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_RowDataBound) event to hide the icon when there are no records in child grid.
-
-To hide the expand/collapse icon in parent row when no records in child grid, follow the given steps:
-
-**Step 1**: Create CSS class with custom style to override the default style of Grid.
-
-```css
-    .e-row[aria-selected="true"] .e-customizedExpandcell {
-        background-color: #e0e0e0;
-    }
-
-    .e-grid.e-gridhover tr[role='row']:hover {
-        background-color: #eee;
-    }
-
-```
-
-**Step 2**: Add the CSS class to the Grid in the [`RowDataBound`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_RowDataBound) event handler of Grid.
-
-```typescript
-
-    function rowDataBound(args) {
-        var filter = args.data.EmployeeID;
-        var data = new ej.data.DataManager(this.childGrid.dataSource).executeLocal(new ej.data.Query().where("EmployeeID", "equal", parseInt(filter), true));
-        if (data.length == 0) {
-            //here hide which parent row has no child records
-            args.row.querySelector('td').innerHTML = " ";
-            args.row.querySelector('td').className = "e-customizedExpandcell";
-        }
-    }
-
-```
-
-In the below demo, the expand/collapse icon in the row with **EmployeeID** as **1** is hidden as it does not have record in child Grid.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/hidearrow/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Hidearrow.cs" %}
-{% include code-snippet/grid/how-to/hidearrow/hidearrow.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/hidearrow/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Hidearrow.cs" %}
-{% include code-snippet/grid/how-to/hidearrow/hidearrow.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/perform-crud-operation-using-anti-forgery-token.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/perform-crud-operation-using-anti-forgery-token.md
index b025e4e9d2..3461d45f97 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/perform-crud-operation-using-anti-forgery-token.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/perform-crud-operation-using-anti-forgery-token.md
@@ -71,19 +71,6 @@ Now assign the custom adaptor to the grid as follows.
 
 ```
 
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/anti-forgery-token/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Anti-forgery-token.cs" %}
-{% include code-snippet/grid/how-to/anti-forgery-token/anti-forgery-token.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/grid/how-to/anti-forgery-token/razor %}
@@ -92,8 +79,5 @@ Now assign the custom adaptor to the grid as follows.
 {% include code-snippet/grid/how-to/anti-forgery-token/anti-forgery-token.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
-
-
 
 N> You can find the full sample at our [GitHub repository](https://github.com/SyncfusionSamples/ej2-mvc-grid-antiforgerytoken).
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/print-the-expanded-state-from-other-pages.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/print-the-expanded-state-from-other-pages.md
deleted file mode 100644
index cf6fbbb090..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/print-the-expanded-state-from-other-pages.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-layout: post
-title: Print The Expanded State From Other Pages in ##Platform_Name## Grid Component
-description: Learn here all about Print The Expanded State From Other Pages in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Print The Expanded State From Other Pages
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Print the expanded state from other pages
-
-By default, the expanded child grids will be printed from the current page alone. You can print the expanded child grids from other pages by using the [`Load`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Load) and [`ActionBegin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin) event.
-
-In the following example, we have printed expanded child grids form other pages.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/hierarchyprint/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Hierarchyprint.cs" %}
-{% include code-snippet/grid/how-to/hierarchyprint/hierarchyprint.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/hierarchyprint/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Hierarchyprint.cs" %}
-{% include code-snippet/grid/how-to/hierarchyprint/hierarchyprint.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/render-both-ej1-and-ej2-grids-in-same-application.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/render-both-ej1-and-ej2-grids-in-same-application.md
index 4217324d79..5b366d7fb0 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/render-both-ej1-and-ej2-grids-in-same-application.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/render-both-ej1-and-ej2-grids-in-same-application.md
@@ -8,7 +8,6 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-
 # Render both EJ1 and EJ2 Grids in same application
 
 To achieve this requirement, you need to use the below code in **_Layout.cshtml** page. Because EJ1 and EJ2 has same library names to perform the different actions. So conflicts may occur when we refer this both controls in same application. To overcome this we need to extend this libraries in ej namespace.
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/select-grid-rows-based-on-certain-condition.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/select-grid-rows-based-on-certain-condition.md
deleted file mode 100644
index c5393e442a..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/select-grid-rows-based-on-certain-condition.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-layout: post
-title: Select Grid Rows Based On Certain Condition in ##Platform_Name## Grid Component
-description: Learn here all about Select Grid Rows Based On Certain Condition in Syncfusion ##Platform_Name## Grid component of syncfusion and more.
-platform: ej2-asp-core-mvc
-control: Select Grid Rows Based On Certain Condition
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Select grid rows based on certain condition
-
-You can select the specific row in the grid based on a certain condition by using the **selectRows** method in the [`DataBound`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DataBound) event of Grid.
-
-In the below demo, we have selected the grid rows only when **EmployeeID** column value greater than **3**.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/databasedselection/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Databasedselection.cs" %}
-{% include code-snippet/grid/how-to/databasedselection/databasedselection.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/databasedselection/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Databasedselection.cs" %}
-{% include code-snippet/grid/how-to/databasedselection/databasedselection.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/print.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/print.md
index 0f9fd50811..a3235eb010 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/print.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/print.md
@@ -150,11 +150,43 @@ Here's a code example that demonstrates how to show a hidden column (CustomerID)
 
 ![Show or hide columns while printing](images/print/print-hide.png)
 
+## Add a title to the header while printing
+
+You can add a title to the header when printing the Syncfusion<sup style="font-size:70%">&reg;</sup> Grid by utilizing the [BeforePrint](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_BeforePrint) event. This event allows you to customize the print layout, including the addition of a title element, ensuring that the printed document is informative and visually appealing.
+
+Here’s an example of how to add a title to your Grid when using the print function:
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/grid/print/print-add-title/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="print.cs" %}
+{% include code-snippet/grid/print/print-add-title/print.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+## Print the expanded state from other pages
+
+By default, when printing, the Syncfusion<sup style="font-size:70%">&reg;</sup> Grid component only includes the expanded child grids visible on the current page. However, you can enhance the printing functionality to include expanded child grids from other pages. This can be achieved using the  [Load](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Load) and [ActionBegin](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin) events, which help manage the expanded state of rows across different pages.
+
+The following example demonstrates how to print the expanded child grids from other pages:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/print/print-expanded-state/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Hierarchyprint.cs" %}
+{% include code-snippet/grid/print/print-expanded-state/hierarchyprint.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Print the expanded state from other pages](../images/print/print-another-page.png)
+
 ## Limitations of printing large data
 
 Printing a large volume of data all at once in the grid can have certain limitations due to potential browser performance issues. Rendering numerous DOM elements on a single page can lead to browser slowdowns or even hang the browser. The grid offers a solution to manage extensive datasets through virtualization. However, it's important to note that virtualization for both rows and columns is not feasible during the printing process.
 
-If printing all the data remains a requirement, an alternative approach is recommended. Exporting the grid data to formats like [Excel](https://ej2.syncfusion.com/aspnetcore/documentation/grid/excel-export/excel-exporting) or [CSV](https://ej2.syncfusion.com/aspnetcore/documentation/grid/excel-export/excel-exporting) or [Pdf](https://ej2.syncfusion.com/aspnetcore/documentation/grid/pdf-export/pdf-export) is advised. This exported data can then be printed using non-web-based applications, mitigating the potential performance challenges associated with printing large datasets directly from the browser.
+If printing all the data remains a requirement, an alternative approach is recommended. Exporting the grid data to formats like [Excel](https://ej2.syncfusion.com/aspnetmvc/documentation/grid/excel-export/excel-exporting) or [CSV](https://ej2.syncfusion.com/aspnetmvc/documentation/grid/excel-export/excel-exporting) or [Pdf](https://ej2.syncfusion.com/aspnetmvc/documentation/grid/pdf-export/pdf-export) is advised. This exported data can then be printed using non-web-based applications, mitigating the potential performance challenges associated with printing large datasets directly from the browser.
 
 ## Retain grid styles while printing
 
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md
index 725505ac85..3c4519dd2e 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md
@@ -116,10 +116,10 @@ The example below demonstrates how to display null values at the bottom of the g
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/sort-comparer/razor %}
+{% include code-snippet/grid/sorting/sort-comparer/razor %}
 {% endhighlight %}
 {% highlight c# tabtitle="sort-comparer.cs" %}
-{% include code-snippet/grid/how-to/sort-comparer/sort-comparer.cs %}
+{% include code-snippet/grid/sorting/sort-comparer/sort-comparer.cs %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/dialog-editing.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/dialog-editing.md
index 3bfd4f31b2..4eb10046ad 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/dialog-editing.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/dialog-editing.md
@@ -8,179 +8,99 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
+# Dialog editing in ASP.NET Core Grid component
 
-# Dialog Editing in ASP.NET Core Grid Component
+Dialog editing is a feature in the Grid component that allows you to edit the data of the currently selected row using a dialog window. With dialog editing, you can easily modify cell values and save the changes back to the data source.This feature is particularly beneficial in scenarios where you need to quickly modify data without navigating to a separate page or view, and it streamlines the process of editing multiple cells.
 
-In dialog edit mode, when you start editing the currently selected row data will be shown on a dialog. You can change the cell values and save edited data to the data source. To enable Dialog edit, set the [`mode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) property of [`e-grid-editSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_EditSettings) tag helper as **Dialog**.
+To enable dialog editing in grid component, you need to set the [editSettings.mode](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) property to **Dialog**. This property determines the editing mode for the grid, and when set to **Dialog**, it enables the dialog editing feature.
 
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/edit/dialog/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Dialog.cs" %}
-{% include code-snippet/grid/edit/dialog/dialog.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+Here's an example how to enable dialog editing in the ASP.NET Core grid component:
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/edit/dialog/razor %}
+{% include code-snippet/grid/edit/dialog/tagHelper %}
 {% endhighlight %}
 {% highlight c# tabtitle="Dialog.cs" %}
 {% include code-snippet/grid/edit/dialog/dialog.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
-
 
+![Dialog editing](../images/editing/dialog-edit.png)
 
 ## Customize edit dialog
 
-You can customize the appearance of the edit dialog in the [`actionComplete`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event based on **requestType** as **beginEdit** or **add**.
-
-In the following example, the dialog's properties like header text, showCloseIcon, height have been changed while editing and adding the records.
-
-Also the locale text for the **Save** and **Cancel** buttons has been changed by overriding the default locale strings.
-
-You can refer the Grid [`Default text`](../global-local/) list for more localization.
+The edit dialog in the Grid component allows you to customize its appearance and behavior based on the type of action being performed, such as editing or adding a record. You can modify properties like header text, showCloseIcon, and height to tailor the edit dialog to your specific requirements. Additionally, you can override default localization strings to provide custom text for buttons or other elements within the dialog.
 
-{% if page.publishingplatform == "aspnet-core" %}
+To customize the edit dialog, you need to handle the [actionComplete](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event of the Grid component and perform the necessary modifications based on the **requestType** parameter. The **requestType** parameter identifies the type of action being performed, such as **beginEdit** for editing a record or **add** for adding a new record.
 
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/edit/customizedialog/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Dialog.cs" %}
-{% include code-snippet/grid/edit/customizedialog/dialog.cs %}
-{% endhighlight %}
-{% highlight c# tabtitle="Dialog.cs" %}
-{% include code-snippet/grid/edit/customizedialog/dialog.cs %}
-{% endhighlight %}
-{% endtabs %}
+>You can refer the Grid [Default text](../global-local/) list for more localization.
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+The following example that demonstrates how to customize the edit dialog using the `actionComplete` event:
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/edit/customizedialog/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Dialog.cs" %}
-{% include code-snippet/grid/edit/customizedialog/dialog.cs %}
+{% include code-snippet/grid/edit/customizedialog/tagHelper %}
 {% endhighlight %}
 {% highlight c# tabtitle="Dialog.cs" %}
 {% include code-snippet/grid/edit/customizedialog/dialog.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
-
 
+![Customize edit dialog](../images/editing/dialog-customize.png)
 
-> The Grid add or edit dialog element has the max-height property, which is calculated based on the available window height. So, in the normal window (1920 x 1080), it is possible to set the dialog’s height up to 658px.
+> The Grid add or edit dialog element has the max-height property, which is calculated based on the available window height. So, in the normal window (1920 x 1080), it is possible to set the dialog's height up to 658px.
 
 ## Show or hide columns in dialog editing
 
-The Grid has the option to show hidden columns or hide visible columns while editing in the dialog edit mode by using the [actionBegin](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin) event of the Grid.
-
-In the `actionBegin` event, when the `requestType` is `beginEdit` or `add`, the column will be shown or hidden using the [visible](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Visible) property of [e-grid-column](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html) tag helper. When the `requestType` is `save`, the properties will be reset to their original state.
-
-In the following example, the CustomerID column is rendered as a hidden column, and the ShipCountry column is rendered as a visible column. In the edit mode, the CustomerID column will be changed to a visible state and the ShipCountry column will be changed to a hidden state.
-
-{% if page.publishingplatform == "aspnet-core" %}
+The show or hide columns in dialog editing feature in the grid allows you to dynamically control the visibility of columns while editing in the dialog edit mode. This feature is useful when you want to display specific columns based on the type of action being performed, such as editing an existing record or adding a new record. To achieve this, you can utilize the [actionBegin](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin) event of the Grid. 
 
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/edit/show-hide-edit-dialog/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Dialog.cs" %}
-{% include code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs %}
-{% endhighlight %}
-{% highlight c# tabtitle="Dialog.cs" %}
-{% include code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs %}
-{% endhighlight %}
-{% endtabs %}
+The `actionBegin` event is triggered whenever an action is initiated in the grid, such as editing, adding, or deleting a record. Within the event handler, you can check the **requestType** parameter to determine the type of action being performed. If the **requestType** is `beginEdit` or `add`, you can modify the visibility of columns using the `column.visible` property. This property is used to determine whether a column should be displayed or hidden. Then, when the **requestType** is `save`, you can reset the column visibility to its initial state using the `column.visible` property.
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+In the following example, the **CustomerID** column is rendered as a hidden column, and the **ShipCountry** column is rendered as a visible column. In the edit mode, the **CustomerID** column will be changed to a visible state and the **ShipCountry** column will be changed to a hidden state.
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/edit/show-hide-edit-dialog/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Dialog.cs" %}
-{% include code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs %}
+{% include code-snippet/grid/edit/show-hide-edit-dialog/tagHelper %}
 {% endhighlight %}
 {% highlight c# tabtitle="Dialog.cs" %}
 {% include code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
-
 
+![Show or hide columns in dialog editing](../images/editing/dialog-show-hide.png)
 
 ## Use wizard like dialog editing
 
-Wizard helps you create intuitive step-by-step forms to fill. You can achieve the wizard like editing by using the dialog template feature. It support your own editing template by defining [`mode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) as **Dialog** and [`template`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Template) as SCRIPT element ID or HTML string which holds the template.
-
-The following example demonstrate the wizard like editing in the grid with the obtrusive Validation.
+Wizard-like dialog editing is a powerful feature in the Grid component that enables the creation of intuitive step-by-step forms. This feature provides a structured approach to form completion or data entry by breaking down the process into manageable steps.This feature is particularly useful when you have complex forms that need to be broken down into smaller sections to guide you through the data entry process.
 
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/edit/wizardediting/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Dialog.cs" %}
-{% include code-snippet/grid/edit/wizardediting/dialog.cs %}
-{% endhighlight %}
-{% highlight c# tabtitle="Dialog.cs" %}
-{% include code-snippet/grid/edit/wizardediting/dialog.cs %}
-{% endhighlight %}
-{% endtabs %}
+To achieve wizard-like dialog editing in the grid component, you can use the dialog template feature. This feature allows you to define your own custom editing template using the [editSettings.mode](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) property set to  **Dialog** and the [editSettings.template](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Template) property to specify the template variable that defines the editors for each step of the wizard.
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+The following example demonstrate the wizard like editing in the grid with the unobtrusive validation.
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/edit/wizardediting/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Dialog.cs" %}
-{% include code-snippet/grid/edit/wizardediting/dialog.cs %}
+{% include code-snippet/grid/edit/wizardediting/tagHelper %}
 {% endhighlight %}
 {% highlight c# tabtitle="Dialog.cs" %}
 {% include code-snippet/grid/edit/wizardediting/dialog.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
 
+![Use wizard like dialog editing](../images/editing/dialog-tabs-multiple.gif)
 
-## Customize Add/Edit Dialog footer
+## Customize add/edit dialog footer
 
-In dialog edit mode, a dialog will show up when editing the currently selected row or adding a new row. By default, you can save or cancel the edited changes by clicking the Save or Cancel button in the dialog's footer. Along with these buttons, it is possible to add a custom button in the footer section using the [ActionComplete](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridBuilder-1.html#Syncfusion_EJ2_Grids_GridBuilder_1_ActionComplete_System_String_) event of the Grid.
+The Customize add/edit dialog footer feature in the grid allows you to modify the footer section of the dialog that appears when editing the currently selected row or adding a new row. By default, the dialog displays two buttons in the footer section: Save and Cancel, which allow you to save or discard the changes made in the dialog. This feature is particularly helpful when you want to add custom buttons to the dialog's footer, implement specific actions, or customize the appearance of the buttons, such as changing their color or size in the dialog's footer. This can be achieved using the [actionComplete](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event of the Grid component.
 
-In the following sample, using the `dialog` argument of the `ActionComplete` event, the action for the custom button can be customized.
-
-{% if page.publishingplatform == "aspnet-core" %}
+In the following sample, using the `dialog` argument of the `actionComplete` event, the action for the custom button can be customized.
 
 {% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
+{% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/grid/edit/custombutton/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Dialog-Footer.cs" %}
+{% highlight c# tabtitle="custombutton.cs" %}
 {% include code-snippet/grid/edit/custombutton/custombutton.cs %}
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/edit/custombutton/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Dialog-Footer.cs" %}
-{% include code-snippet/grid/edit/custombutton/custombutton.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
\ No newline at end of file
+![Customize add/edit dialog footer](../images/editing/dialog-footer.png)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/add-params-for-filtering.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/add-params-for-filtering.md
deleted file mode 100644
index 7cba6cdbbd..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/add-params-for-filtering.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-layout: post
-title: Add Params For Filtering in ##Platform_Name## Grid Component
-description: Learn here all about Add Params For Filtering in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Add Params For Filtering
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Customizing Filter Dialog by using an additional Parameter
-
-You can customize the default settings of the components which are used in Menu filter by using params of filter property in column definition.
-In the below sample, OrderID and Freight Columns are numeric columns, while open the filter dialog then you can see that NumericTextBox with spin button is displayed to change/set the filter value. Now using the params option we hide the spin button in NumericTextBox for OrderID Column.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/add-params-for-filtering/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Excelfilter.cs" %}
-{% include code-snippet/grid/how-to/add-params-for-filtering/excelfilter.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/add-params-for-filtering/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Excelfilter.cs" %}
-{% include code-snippet/grid/how-to/add-params-for-filtering/excelfilter.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/collapse-grouped-rows-at-initial-render.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/collapse-grouped-rows-at-initial-render.md
deleted file mode 100644
index e71964eccc..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/collapse-grouped-rows-at-initial-render.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-layout: post
-title: Collapse Grouped Rows At Initial Render in ##Platform_Name## Grid Component
-description: Learn here all about Collapse Grouped Rows At Initial Render in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Collapse Grouped Rows At Initial Render
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Collapse all grouped rows at initial render
-
-You can collapse all the grouped rows at initial rendering by using [`dataBound`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DataBound) event with  **collapseAll** method of the grid.
-
-In the below demo, all the grouped rows are collapsed at initial rendering.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/collapse-grouped-rows/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Collapseall.cs" %}
-{% include code-snippet/grid/how-to/collapse-grouped-rows/collapseall.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/collapse-grouped-rows/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Collapseall.cs" %}
-{% include code-snippet/grid/how-to/collapse-grouped-rows/collapseall.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/complex-column-as-foreign-key-column.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/complex-column-as-foreign-key-column.md
deleted file mode 100644
index c10e37b678..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/complex-column-as-foreign-key-column.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-layout: post
-title: Complex Column As Foreign Key Column in ##Platform_Name## Grid Component
-description: Learn here all about Complex Column As Foreign Key Column in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Complex Column As Foreign Key Column
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Set complex column as Foreignkey column
-
-The following example shows how to set the complex column as foreign key column.
-
-In the following example, **Employee.EmployeeID** is a complex column and also declared as a foreign column which shows **FirstName** column from foreign data.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/foreignkey/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Foreignkey.cs" %}
-{% include code-snippet/grid/columns/foreignkey/foreignkey.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/foreignkey/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Foreignkey.cs" %}
-{% include code-snippet/grid/columns/foreignkey/foreignkey.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/customize-pager-drop-down.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/customize-pager-drop-down.md
deleted file mode 100644
index 66c77824df..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/customize-pager-drop-down.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-layout: post
-title: Customize Pager Drop Down in ##Platform_Name## Grid Component
-description: Learn here all about Customize Pager Drop Down in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Customize Pager Drop Down
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Customize Pager DropDown
-
-To customize default values of pager dropdown, you need to define [`pageSizes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_PageSizes) as array of strings.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/pagerdropdown/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Pagerdropdown.cs" %}
-{% include code-snippet/grid/how-to/pagerdropdown/pagerdropdown.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/pagerdropdown/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Pagerdropdown.cs" %}
-{% include code-snippet/grid/how-to/pagerdropdown/pagerdropdown.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/display-null-values-at-bottom.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/display-null-values-at-bottom.md
deleted file mode 100644
index cb08d848e4..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/display-null-values-at-bottom.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-layout: post
-title: Display Null Values At Bottom in ##Platform_Name## Grid Component
-description: Learn here all about Display Null Values At Bottom in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Display Null Values At Bottom
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Display the null date values at bottom of the Grid while perform sorting
-
-By default the null values are displayed at bottom of the Grid row while perform sorting in ascending order. As well as this values are displayed at top of the Grid row while perform sorting with descending order. But you can customize this default order to display the null values at always bottom row of the Grid by using [`sortComparer`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_SortComparer) property of [`e-grid-column`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html) tag helper.
-
-In the below code we have displayed the null date values at bottom of the Grid row while sorting the **OrderDate** column in both ways.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/sort-comparer/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Sort-comparer.cs" %}
-{% include code-snippet/grid/how-to/sort-comparer/sort-comparer.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/sort-comparer/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Sort-comparer.cs" %}
-{% include code-snippet/grid/how-to/sort-comparer/sort-comparer.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/enable-disable-grid-and-its-actions.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/enable-disable-grid-and-its-actions.md
index 05596b4385..80093db9b4 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/enable-disable-grid-and-its-actions.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/enable-disable-grid-and-its-actions.md
@@ -8,43 +8,36 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
+# Enable disable grid and its actions in ASP.NET Core Grid component
 
-# Enable/Disable Grid and its actions
+You can enable or disable the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Grid and its actions by applying or removing specific CSS styles. This functionality is particularly useful in scenarios where interactions need to be restricted. Follow the steps below to implement this feature.
 
-You can enable/disable the Grid and its actions by applying/removing corresponding CSS styles.
-
-To enable/disable the grid and its actions, follow the given steps:
-
-**Step 1**:
-
-Create CSS class with custom style to override the default style of Grid.
+**Step 1**: Create CSS class with custom style to override the default style of Grid.
 
 ```css
-    .disablegrid {
-        pointer-events: none;
-        opacity: 0.4;
-    }
-    .wrapper {
-        cursor: not-allowed;
-    }
+        .disablegrid {
+            pointer-events: none;
+            opacity: 0.4;
+        }
+        .wrapper {
+            cursor: not-allowed;
+        }
 
 ```
 
-**Step 2**:
-
-Add/Remove the custom CSS class to the Grid in the click event handler of Button.
+**Step 2**: Add/Remove the CSS class to the Grid in the click event handler of Button.
 
 ```typescript
     <script>
         document.getElementById('element').onclick = function () {
-            var gridInst = document.getElementById("Grid").ej2_instances[0];
-            if (gridInst.element.classList.contains('disablegrid')) {
-                gridInst.element.classList.remove('disablegrid');
-                document.getElementById("GridParent").classList.remove('wrapper');
+            var grid = document.getElementById("grid").ej2_instances[0];
+            if (grid.element.classList.contains('disablegrid')) {
+                grid.element.classList.remove('disablegrid');
+                document.getElementById("gridParent").classList.remove('wrapper');
             }
             else {
-                gridInst.element.classList.add('disablegrid');
-                document.getElementById("GridParent").classList.add('wrapper');
+                grid.element.classList.add('disablegrid');
+                document.getElementById("gridParent").classList.add('wrapper');
             }
         }
     </script>
@@ -53,27 +46,13 @@ Add/Remove the custom CSS class to the Grid in the click event handler of Button
 
 In the below demo, the button click will enable/disable the Grid and its actions.
 
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/disablegrid/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Disablegrid.cs" %}
-{% include code-snippet/grid/how-to/disablegrid/disablegrid.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/disablegrid/razor %}
+{% include code-snippet/grid/how-to/disablegrid/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Disablegrid.cs" %}
+{% highlight c# tabtitle="disablegrid.cs" %}
 {% include code-snippet/grid/how-to/disablegrid/disablegrid.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
-
 
+![Enable disable grid and its actions](../images/howto-enable-disable.gif)
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/enable-editing-in-single-click.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/enable-editing-in-single-click.md
deleted file mode 100644
index 38940dfa31..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/enable-editing-in-single-click.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-layout: post
-title: Enable Editing In Single Click in Syncfusion ##Platform_Name## Grid Component
-description: Learn here all about Enable Editing In Single Click in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Enable Editing In Single Click
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Enable editing in single click
-
-## Normal Editing
-
-You can make a row editable on a single click with **Normal** mode of editing in Grid, by using the **startEdit** and **endEdit** methods.
-
-Bind the **mouseup** event for Grid and in the event handler call the **startEdit** and **endEdit**, based on the clicked target element.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/single-click-inline-edit/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Single-click-normal-edit.cs" %}
-{% include code-snippet/grid/how-to/single-click-inline-edit/single-click-normal-edit.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/single-click-inline-edit/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Single-click-normal-edit.cs" %}
-{% include code-snippet/grid/how-to/single-click-inline-edit/single-click-normal-edit.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
-
-### Open dropdown edit popup on single click
-
-You can open the default dropdown edit popup with single click edit by focusing the dropdown element and calling the EJ2 dropdown list's **showPopup** method in the Grid's **actionComplete** event. In this demo we have used a global flag variable in the **mouseup** event to ensure if the dropdown column is the clicked edit target.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/open-dropdown-popup/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Open-dropdown-popup.cs" %}
-{% include code-snippet/grid/how-to/open-dropdown-popup/open-dropdown-popup.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/open-dropdown-popup/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Open-dropdown-popup.cs" %}
-{% include code-snippet/grid/how-to/open-dropdown-popup/open-dropdown-popup.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/get-row-cell-index.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/get-row-cell-index.md
deleted file mode 100644
index 7825979263..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/get-row-cell-index.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-layout: post
-title: Get Row Cell Index in ##Platform_Name## Grid Component
-description: Learn here all about Get Row Cell Index in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Get Row Cell Index
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Get specific row and cell index in Grid
-
-You can get the specific row and cell index of the grid by using [`rowSelected`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_RowSelected) event of the grid. Here, we can get the row and cell index by using **aria-rowindex**(get row Index from **tr** element) and **aria-colindex**(column index from **td** element) attribute.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/row-cell-index/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Rowcellidx.cs" %}
-{% include code-snippet/grid/how-to/row-cell-index/rowcellidx.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/row-cell-index/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Rowcellidx.cs" %}
-{% include code-snippet/grid/how-to/row-cell-index/rowcellidx.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/grid-print.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/grid-print.md
deleted file mode 100644
index e12d38e52e..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/grid-print.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-layout: post
-title: Grid Print in ##Platform_Name## Grid Component
-description: Learn here all about Grid Print in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Grid Print
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Add a title to the header when using Grid print function
-
-You can add your title in the header through an [`beforePrint`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Grids.Grid~beforePrint.html) event. With the help of this event you can add your title element as you want.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/titleprint/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Titleprint.cs" %}
-{% include code-snippet/grid/how-to/titleprint/titleprint.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/titleprint/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Titleprint.cs" %}
-{% include code-snippet/grid/how-to/titleprint/titleprint.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/grouped-row-page-size.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/grouped-row-page-size.md
deleted file mode 100644
index acf79c4fef..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/grouped-row-page-size.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-layout: post
-title: Grouped Row Page Size in ##Platform_Name## Grid Component
-description: Learn here all about Grouped Row Page Size in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Grouped Row Page Size
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# How to show grouped rows based on the pageSize
-
-By default, we have displayed the no of records based on the [`pageSize`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_PageSize). If you want to show grouped column rows based on the [`pageSize`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_PageSize) then we suggest you to use the below way.
-
-In the below sample, we have overridden the default **generateQuery** to display the grouped rows instead of grid rows based on the [`pageSize`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_PageSize).
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/group-page-size/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Group-page-size.cs" %}
-{% include code-snippet/grid/how-to/group-page-size/group-page-size.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/group-page-size/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Group-page-size.cs" %}
-{% include code-snippet/grid/how-to/group-page-size/group-page-size.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/hide-sorting-in-excel-filter.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/hide-sorting-in-excel-filter.md
deleted file mode 100644
index 6bb8e18305..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/hide-sorting-in-excel-filter.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-layout: post
-title: Hide Sorting In Excel Filter in ##Platform_Name## Grid Component
-description: Learn here all about Hide Sorting In Excel Filter in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Hide Sorting In Excel Filter
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Hide sorting options on excel filter Dialog
-
-You can hide the sorting options on the excel filter dialog by setting display as none for the following classes.
-
-```css
-    .e-excel-ascending,
-    .e-excel-descending,
-    .e-separator.e-excel-separator {
-    display: none;
-    }
-```
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/disable-sorting-excel/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Disable-sorting-excel.cs" %}
-{% include code-snippet/grid/how-to/disable-sorting-excel/disable-sorting-excel.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/disable-sorting-excel/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Disable-sorting-excel.cs" %}
-{% include code-snippet/grid/how-to/disable-sorting-excel/disable-sorting-excel.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/hide-the-expand-collapse-icon-in-parent-row.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/hide-the-expand-collapse-icon-in-parent-row.md
deleted file mode 100644
index 2e217e3bef..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/hide-the-expand-collapse-icon-in-parent-row.md
+++ /dev/null
@@ -1,78 +0,0 @@
----
-layout: post
-title: Hide The Expand Collapse Icon In Parent Row in ##Platform_Name## Grid Component
-description: Learn here all about Hide The Expand Collapse Icon In Parent Row in Syncfusion ##Platform_Name## Grid component of syncfusion and more.
-platform: ej2-asp-core-mvc
-control: Hide The Expand Collapse Icon In Parent Row
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Hide the expand/collapse icon in parent row with no record in child grid
-
-By default, the expand/collapse icon will be visible even if the child grid is empty.
-
-You can use [`rowDataBound`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_RowDataBound) event to hide the icon when there are no records in child grid.
-
-To hide the expand/collapse icon in parent row when no records in child grid, follow the given steps:
-
-**Step 1**:
-
-Create CSS class with custom style to override the default style of Grid.
-
-```css
-    .e-row[aria-selected="true"] .e-customizedExpandcell {
-        background-color: #e0e0e0;
-    }
-
-    .e-grid.e-gridhover tr[role='row']:hover {
-        background-color: #eee;
-    }
-
-```
-
-**Step 2**:
-
-Add the CSS class to the Grid in the [`rowDataBound`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_RowDataBound) event handler of Grid.
-
-```typescript
-
-    function rowDataBound(args) {
-        var filter = args.data.EmployeeID;
-        var data = new ej.data.DataManager(this.childGrid.dataSource).executeLocal(new ej.data.Query().where("EmployeeID", "equal", parseInt(filter), true));
-        if (data.length == 0) {
-            //here hide which parent row has no child records
-            args.row.querySelector('td').innerHTML = " ";
-            args.row.querySelector('td').className = "e-customizedExpandcell";
-        }
-    }
-
-```
-
-In the below demo, the expand/collapse icon in the row with **EmployeeID** as **1** is hidden as it does not have record in child Grid.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/hidearrow/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Hidearrow.cs" %}
-{% include code-snippet/grid/how-to/hidearrow/hidearrow.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/hidearrow/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Hidearrow.cs" %}
-{% include code-snippet/grid/how-to/hidearrow/hidearrow.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/perform-crud-operation-using-anti-forgery-token.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/perform-crud-operation-using-anti-forgery-token.md
index e8f4e1997d..35481912ae 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/perform-crud-operation-using-anti-forgery-token.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/perform-crud-operation-using-anti-forgery-token.md
@@ -91,8 +91,6 @@ Now assign the custom adaptor to the grid as follows.
 
 ```
 
-{% if page.publishingplatform == "aspnet-core" %}
-
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/grid/how-to/anti-forgery-token/tagHelper %}
@@ -102,18 +100,4 @@ Now assign the custom adaptor to the grid as follows.
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/anti-forgery-token/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Anti-forgery-token.cs" %}
-{% include code-snippet/grid/how-to/anti-forgery-token/anti-forgery-token.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
-
 N> You can find the full sample at our [GitHub repository](https://github.com/SyncfusionSamples/ej2-mvc-grid-antiforgerytoken).
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/print-the-expanded-state-from-other-pages.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/print-the-expanded-state-from-other-pages.md
deleted file mode 100644
index 6723cba2fd..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/print-the-expanded-state-from-other-pages.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-layout: post
-title: Print The Expanded State From Other Pages in ##Platform_Name## Grid Component
-description: Learn here all about Print The Expanded State From Other Pages in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Print The Expanded State From Other Pages
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Print the expanded state from other pages
-
-By default, the expanded child grids will be printed from the current page alone. You can print the expanded child grids from other pages by using the [`load`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Load) and [`actionBegin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin) event.
-
-In the following example, we have printed expanded child grids from other pages.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/hierarchyprint/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Hierarchyprint.cs" %}
-{% include code-snippet/grid/how-to/hierarchyprint/hierarchyprint.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/hierarchyprint/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Hierarchyprint.cs" %}
-{% include code-snippet/grid/how-to/hierarchyprint/hierarchyprint.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/render-both-ej1-and-ej2-grids-in-same-application.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/render-both-ej1-and-ej2-grids-in-same-application.md
index 4217324d79..5b366d7fb0 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/render-both-ej1-and-ej2-grids-in-same-application.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/render-both-ej1-and-ej2-grids-in-same-application.md
@@ -8,7 +8,6 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-
 # Render both EJ1 and EJ2 Grids in same application
 
 To achieve this requirement, you need to use the below code in **_Layout.cshtml** page. Because EJ1 and EJ2 has same library names to perform the different actions. So conflicts may occur when we refer this both controls in same application. To overcome this we need to extend this libraries in ej namespace.
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/select-grid-rows-based-on-certain-condition.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/select-grid-rows-based-on-certain-condition.md
deleted file mode 100644
index 763193a9aa..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/select-grid-rows-based-on-certain-condition.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-layout: post
-title: Select Grid Rows Based On Certain Condition in ##Platform_Name## Grid Component
-description: Learn here all about Select Grid Rows Based On Certain Condition in Syncfusion ##Platform_Name## Grid component of syncfusion and more.
-platform: ej2-asp-core-mvc
-control: Select Grid Rows Based On Certain Condition
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-
-# Select grid rows based on certain condition
-
-You can select the specific row in the grid based on a certain condition by using the **selectRows** method in the [`dataBound`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DataBound) event of Grid.
-
-In the below demo, we have selected the grid rows only when **EmployeeID** column value greater than **3**.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/databasedselection/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Databasedselection.cs" %}
-{% include code-snippet/grid/how-to/databasedselection/databasedselection.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/databasedselection/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Databasedselection.cs" %}
-{% include code-snippet/grid/how-to/databasedselection/databasedselection.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/print.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/print.md
index f3d15a99c0..b2b61463a4 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/print.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/print.md
@@ -150,6 +150,38 @@ Here's a code example that demonstrates how to show a hidden column (CustomerID)
 
 ![Show or hide columns while printing](images/print/print-hide.png)
 
+## Add a title to the header while printing
+
+You can add a title to the header when printing the Syncfusion<sup style="font-size:70%">&reg;</sup> Grid by utilizing the [beforePrint](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_BeforePrint) event. This event allows you to customize the print layout, including the addition of a title element, ensuring that the printed document is informative and visually appealing.
+
+Here’s an example of how to add a title to your Grid when using the print function:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/print/print-add-title/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="print.cs" %}
+{% include code-snippet/grid/print/print-add-title/print.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+## Print the expanded state from other pages
+
+By default, when printing, the Syncfusion<sup style="font-size:70%">&reg;</sup> Grid component only includes the expanded child grids visible on the current page. However, you can enhance the printing functionality to include expanded child grids from other pages. This can be achieved using the  [load](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Load) and [actionBegin](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin) events, which help manage the expanded state of rows across different pages.
+
+The following example demonstrates how to print the expanded child grids from other pages:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/print/print-expanded-state/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Hierarchyprint.cs" %}
+{% include code-snippet/grid/print/print-expanded-state/hierarchyprint.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Retain grid styles while printing](images/print/print-style.png)
+
 ## Limitations of printing large data
 
 Printing a large volume of data all at once in the grid can have certain limitations due to potential browser performance issues. Rendering numerous DOM elements on a single page can lead to browser slowdowns or even hang the browser. The grid offers a solution to manage extensive datasets through virtualization. However, it's important to note that virtualization for both rows and columns is not feasible during the printing process.
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/sorting.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/sorting.md
index 55d44bd1a4..d72324797e 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/sorting.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/sorting.md
@@ -116,10 +116,10 @@ The example below demonstrates how to display null values at the bottom of the g
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/sort-comparer/tagHelper %}
+{% include code-snippet/grid/sorting/sort-comparer/tagHelper %}
 {% endhighlight %}
 {% highlight c# tabtitle="sort-comparer.cs" %}
-{% include code-snippet/grid/how-to/sort-comparer/sort-comparer.cs %}
+{% include code-snippet/grid/sorting/sort-comparer/sort-comparer.cs %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/ej2-asp-core-mvc/grid/images/editing/dialog-customize.png b/ej2-asp-core-mvc/grid/images/editing/dialog-customize.png
new file mode 100644
index 0000000000..ed8badc555
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/dialog-customize.png differ
diff --git a/ej2-asp-core-mvc/grid/images/editing/dialog-edit.png b/ej2-asp-core-mvc/grid/images/editing/dialog-edit.png
new file mode 100644
index 0000000000..1da61a27ad
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/dialog-edit.png differ
diff --git a/ej2-asp-core-mvc/grid/images/editing/dialog-footer.png b/ej2-asp-core-mvc/grid/images/editing/dialog-footer.png
new file mode 100644
index 0000000000..cc49b61a3c
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/dialog-footer.png differ
diff --git a/ej2-asp-core-mvc/grid/images/editing/dialog-show-hide.png b/ej2-asp-core-mvc/grid/images/editing/dialog-show-hide.png
new file mode 100644
index 0000000000..7db80d51e6
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/dialog-show-hide.png differ
diff --git a/ej2-asp-core-mvc/grid/images/editing/dialog-tabs-multiple.gif b/ej2-asp-core-mvc/grid/images/editing/dialog-tabs-multiple.gif
new file mode 100644
index 0000000000..50ce58e02a
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/dialog-tabs-multiple.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/howto-enable-disable.gif b/ej2-asp-core-mvc/grid/images/howto-enable-disable.gif
new file mode 100644
index 0000000000..d8a5ce55d1
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/howto-enable-disable.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/print/print-another-page.png b/ej2-asp-core-mvc/grid/images/print/print-another-page.png
new file mode 100644
index 0000000000..5705ea17cc
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/print/print-another-page.png differ
diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html
index 8a666abd7a..8a64301146 100644
--- a/ej2-asp-core-toc.html
+++ b/ej2-asp-core-toc.html
@@ -1427,22 +1427,6 @@
 						<li><a href="/ej2-asp-core/grid/how-to/enable-disable-grid-and-its-actions">Enable or Disable Grid and its actions</a></li>
 						<li><a href="/ej2-asp-core/grid/how-to/print-the-expanded-state-from-other-pages">Print the expanded state from other pages</a></li>
 						<li><a href="/ej2-asp-core/grid/how-to/perform-crud-operation-using-anti-forgery-token">Perform CRUD operation using anti-forgery token</a></li>
-						<li><a href="/ej2-asp-core/grid/how-to/perform-grid-actions-by-keyboard-short-cut-keys">Perform Grid actions by keyboard shortcut keys</a></li>
-						<li><a href="/ej2-asp-core/grid/how-to/customize-pager-drop-down">Customize Pager DropDown</a></li>
-						<li><a href="/ej2-asp-core/grid/how-to/hide-the-expand-collapse-icon-in-parent-row">Hide the expand or collapse icon in parent row with no record in child grid</a></li>
-						<li><a href="/ej2-asp-core/grid/how-to/render-both-ej1-and-ej2-grids-in-same-application">Render both EJ1 and EJ2 Grids in same application</a></li>
-						<li><a href="/ej2-asp-core/grid/how-to/complex-column-as-foreign-key-column">How to set complex column as Foreignkey column</a></li>
-						<li><a href="/ej2-asp-core/grid/how-to/list-of-array-of-objects">Complex Data Binding with list of Array Of Objects</a></li>
-						<li><a href="/ej2-asp-core/grid/how-to/select-grid-rows-based-on-certain-condition">Select grid rows based on certain condition</a></li>
-						<li><a href="/ej2-asp-core/grid/how-to/collapse-grouped-rows-at-initial-render">Collapse all grouped rows at initial rendering</a></li>
-						<li><a href="/ej2-asp-core/grid/how-to/grouped-row-page-size">How to show grouped rows based on the pageSize</a></li>
-						<li><a href="/ej2-asp-core/grid/how-to/get-row-cell-index">Get specific row and cell index in Grid</a></li>
-						<li><a href="/ej2-asp-core/grid/how-to/display-null-values-at-bottom">Display null date values at the bottom of the grid</a></li>
-						<li><a href="/ej2-asp-core/grid/how-to/enable-editing-in-single-click">Enable editing in single click</a></li>
-						<li><a href="/ej2-asp-core/grid/how-to/cascading-drop-down-list-with-grid-editing">Cascading DropDownList with Grid editing</a></li>
-						<li><a href="/ej2-asp-core/grid/how-to/hide-sorting-in-excel-filter">Hide sorting options on Excel filter Dialog</a></li>
-						<li><a href="/ej2-asp-core/grid/how-to/grid-print">Add a title to the header when using Grid print function</a></li>
-						<li><a href="/ej2-asp-core/grid/how-to/add-params-for-filtering">Customizing Filter Dialog by using an additional Parameter</a></li>
 					</ul>
 				</li>
 				<li>
diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html
index f8bedfdc63..90dece1057 100644
--- a/ej2-asp-mvc-toc.html
+++ b/ej2-asp-mvc-toc.html
@@ -1371,29 +1371,13 @@
 						<li><a href="/ej2-asp-mvc/grid/style-and-appearance/selection">Selection</a></li>
 					</ul>
 				</li>
+				<li><a href="/ej2-asp-mvc/grid/ej1-api-migration">Migration from Essential JS 1</a></li>
 				<li>How To
 					<ul>
-						<li><a href="/ej2-asp-mvc/grid/ej1-api-migration">Migration from Essential JS 1</a></li>
 						<li><a href="/ej2-asp-mvc/grid/how-to/enable-disable-grid-and-its-actions">Enable or Disable Grid and its actions</a></li>
-						<li><a href="/ej2-asp-mvc/grid/how-to/print-the-expanded-state-from-other-pages">Print the expanded state from other pages</a></li>
 						<li><a href="/ej2-asp-mvc/grid/how-to/perform-crud-operation-using-anti-forgery-token">Perform CRUD operation using anti-forgery token</a></li>
-						<li><a href="/ej2-asp-mvc/grid/how-to/perform-grid-actions-by-keyboard-short-cut-keys">Perform Grid actions by keyboard shortcut keys</a></li>
-						<li><a href="/ej2-asp-mvc/grid/how-to/customize-pager-drop-down">Customize Pager DropDown</a></li>
-						<li><a href="/ej2-asp-mvc/grid/how-to/hide-the-expand-collapse-icon-in-parent-row">Hide the expand or collapse icon in parent row with no record in child grid</a></li>
 						<li><a href="/ej2-asp-mvc/grid/how-to/render-both-ej1-and-ej2-grids-in-same-application">Render both EJ1 and EJ2 Grids in same application</a></li>
-						<li><a href="/ej2-asp-mvc/grid/how-to/complex-column-as-foreign-key-column">How to set complex column as Foreignkey column</a></li>
-						<li><a href="/ej2-asp-mvc/grid/how-to/list-of-array-of-objects">Complex Data Binding with list of Array Of Objects</a></li>
-						<li><a href="/ej2-asp-mvc/grid/how-to/select-grid-rows-based-on-certain-condition">Select grid rows based on certain condition</a></li>
-						<li><a href="/ej2-asp-mvc/grid/how-to/collapse-grouped-rows-at-initial-render">Collapse all grouped rows at initial rendering</a></li>
-						<li><a href="/ej2-asp-mvc/grid/how-to/grouped-row-page-size">How to show grouped rows based on the pageSize</a></li>
-						<li><a href="/ej2-asp-mvc/grid/how-to/get-row-cell-index">Get specific row and cell index in Grid</a></li>
-						<li><a href="/ej2-asp-mvc/grid/how-to/display-null-values-at-bottom">Display null date values at the bottom of the grid</a></li>
 						<li><a href="/ej2-asp-mvc/grid/how-to/avoid-typescript-compilation">Avoid Typescript Compilation</a></li>
-						<li><a href="/ej2-asp-mvc/grid/how-to/enable-editing-in-single-click">Enable editing in single click</a></li>
-						<li><a href="/ej2-asp-mvc/grid/how-to/cascading-drop-down-list-with-grid-editing">Cascading DropDownList with Grid editing</a></li>
-						<li><a href="/ej2-asp-mvc/grid/how-to/hide-sorting-in-excel-filter">Hide sorting options on Excel filter Dialog</a></li>
-						<li><a href="/ej2-asp-mvc/grid/how-to/grid-print">Add a title to the header when using Grid print action</a></li>
-						<li><a href="/ej2-asp-mvc/grid/how-to/add-params-for-filtering">Customizing Filter Dialog by using an additional Parameter</a></li>
 					</ul>
 				</li>
 				<li>