diff --git a/ej2-asp-core-mvc/code-snippet/grid/aggregate/custom-aggregate-distinct/razor b/ej2-asp-core-mvc/code-snippet/grid/aggregate/custom-aggregate-distinct/razor
index 2814b47d17..81ca18e6b3 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/aggregate/custom-aggregate-distinct/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/aggregate/custom-aggregate-distinct/razor
@@ -1,6 +1,6 @@
 @Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Height("348px").Columns(col =>
 {
-     col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
     col.Field("CustomerID").HeaderText("Customer Name").Width("140").Add();
     col.Field("Freight").HeaderText("Freight").Width("130").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
     col.Field("ShipCountry").HeaderText("Ship Country").Width("130").Add();
diff --git a/ej2-asp-core-mvc/code-snippet/grid/aggregate/reactive-agg-inline-edit/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/aggregate/reactive-agg-inline-edit/tagHelper
index 44277aab2d..608fb974e2 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/aggregate/reactive-agg-inline-edit/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/aggregate/reactive-agg-inline-edit/tagHelper
@@ -30,5 +30,4 @@
         selectedRecord['Freight'] = args.value;
         gridInstance.aggregateModule.refresh(selectedRecord);
     }
-
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/razor
index de350aaddb..ed4305f8ca 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/razor
@@ -1,5 +1,4 @@
 @Html.EJS().Grid("Auto").DataSource((IEnumerable<object>)ViewBag.dataSource).DataBound("dataBound").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Render()
-
 <script>
     function dataBound() {
         document.getElementById('Auto').ej2_instances[0].columns[0].isPrimaryKey = 'true';
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/tagHelper
index f88cb4f2b8..df1a323cdf 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/tagHelper
@@ -2,7 +2,6 @@
     <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true">
     </e-grid-editSettings>
 </ejs-grid>
-
 <script>
     function dataBound() {
         document.getElementById('Auto').ej2_instances[0].columns[0].isPrimaryKey = 'true';
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/autocolumnformat/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/autocolumnformat/tagHelper
index 217aa103d2..c80879cb79 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/autocolumnformat/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/autocolumnformat/tagHelper
@@ -1,7 +1,5 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" dataBound="dataBound">
-           
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" dataBound="dataBound">        
 </ejs-grid>
-
 <script>
     function dataBound() {
         const grid = document.getElementById('Auto').ej2_instances[0];
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-complexbinding/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/column-complexbinding/tagHelper
index 87086801cb..a7ba902818 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/column-complexbinding/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-complexbinding/tagHelper
@@ -1,8 +1,8 @@
 <ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="315px" >     
     <e-grid-columns>
         <e-grid-column field="EmployeeID" headerText="Employee ID" width="120" textAlign="Right"></e-grid-column>
-        <e-grid-column field="Names.0.FirstName" headerText="Last Name"  width="120"></e-grid-column>               
-        <e-grid-column field="Names.0.LastName"  headerText="Last Name"  width="120"></e-grid-column>
-        <e-grid-column field="Title"  headerText="Title"  width="150"></e-grid-column>
+        <e-grid-column field="Names.0.FirstName" headerText="Last Name" width="120"></e-grid-column>               
+        <e-grid-column field="Names.0.LastName" headerText="Last Name" width="120"></e-grid-column>
+        <e-grid-column field="Title" headerText="Title" 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/columns/column-render-array/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-array/razor
index 0c2f58d53f..fd6acc89d1 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-array/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-array/razor
@@ -1,14 +1,12 @@
 @{
     var valueAccess = "valueAccessFn";
 }
-
 @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height(350).Columns(col =>
 {
     col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
     col.Field("Name").HeaderText("Full Name").ValueAccessor(valueAccess).Width("150").Add();
     col.Field("Title").HeaderText("Title").Width("150").Add();
 }).Render()
-
 <script>
     function valueAccessFn(field, data) {
         return data[field].map((s) => { return s.LastName || s.FirstName; }).join(' ');
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-array/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-array/tagHelper
index 039c655690..550f1eda8a 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-array/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-array/tagHelper
@@ -1,7 +1,6 @@
 @{
     var valueAccess = "valueAccessFn";
 }
-
 <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="350" >    
     <e-grid-columns>
         <e-grid-column field="EmployeeID" headerText="Employee ID" width="150" ></e-grid-column>
@@ -9,7 +8,6 @@
         <e-grid-column field="Title" headerText="Title" width="150"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <script>
     function valueAccessFn(field, data) {
         return data[field].map((s) => { return s.LastName || s.FirstName; }).join(' ');
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-remote/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-remote/tagHelper
index e62f7f8cf8..59fa9ff6dd 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-remote/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-remote/tagHelper
@@ -1,10 +1,10 @@
 <ejs-grid id="Grid" allowPaging='true' query="new ej.data.Query().expand('Employee')"  >    
   <e-data-manager url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders/" crossdomain="true" adaptor="ODataV4Adaptor"></e-data-manager>
     <e-grid-columns>
-        <e-grid-column field="OrderID" headerText="Order ID" 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="130"></e-grid-column>
-        <e-grid-column field="Employee.City" headerText="City"  width="130"></e-grid-column>
+        <e-grid-column field="OrderID" headerText="Order ID" width="100"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column>
+        <e-grid-column field="ShipCity" headerText="Ship City" width="130"></e-grid-column>
+        <e-grid-column field="Employee.City" headerText="City" width="130"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
 
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-serial/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-serial/tagHelper
index eb5efdd3c3..cf4be79cb6 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-serial/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-serial/tagHelper
@@ -4,7 +4,7 @@
         <e-grid-column field="OrderID" headerText="Order ID" width="100" textAlign="Right"></e-grid-column>
         <e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column>
         <e-grid-column field="Freight" headerText="Freight" textAlign="Right" width="120" ></e-grid-column>
-        <e-grid-column field="ShipCity"  headerText="Ship City" width="150"></e-grid-column>
+        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
 <script>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-valueaccessor/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-valueaccessor/razor
index df5424d2da..4a994e93d6 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-valueaccessor/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-valueaccessor/razor
@@ -3,7 +3,7 @@
     var concatenateFields = "concatenateFieldsFn";
 }
 
-@Html.EJS().Grid("ValueAccessor").DataSource((IEnumerable<object>)ViewBag.DataSource).Height(350).Columns(col =>
+@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height(350).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();
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-valueaccessor/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-valueaccessor/tagHelper
index e12cf02564..3fd31fecb9 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-valueaccessor/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-valueaccessor/tagHelper
@@ -2,8 +2,7 @@
     var currencyFormatter = "currencyFormatterFn";
     var concatenateFields = "concatenateFieldsFn";
 }
-
-<ejs-grid id="ValueAccessor" dataSource="@ViewBag.DataSource" height="350">
+<ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="350">
     <e-grid-columns>
         <e-grid-column field="OrderID" headerText="Order ID" width="100" textAlign="Right"></e-grid-column>
         <e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-rendering/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/column-rendering/razor
index c1ee428ee1..8931fe7a2d 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/column-rendering/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-rendering/razor
@@ -4,6 +4,6 @@
     col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add();
     col.Field("Freight").HeaderText("Freight").Width("80").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
     col.Field("OrderDate").HeaderText("Order Date").Width("80").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("ShipCity").HeaderText("Ship Country").Width("120").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
 
 }).Render()
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-rendering/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/column-rendering/tagHelper
index 2ad0834288..a2f320958b 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/column-rendering/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-rendering/tagHelper
@@ -4,5 +4,6 @@
         <e-grid-column field='CustomerID' headerText='Customer ID' width="120"></e-grid-column>
         <e-grid-column field='Freight' headerText='Freight' format='C2' textAlign='Right' width="80"></e-grid-column>
         <e-grid-column field='OrderDate' headerText='Order Date' format='yMd' textAlign='Right' width="80"></e-grid-column>
+        <e-grid-column field='ShipCountry' headerText='Ship Country' width="80"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-external/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-external/razor
index 80979ed8ef..d7b312fb45 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-external/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-external/razor
@@ -1,5 +1,5 @@
 <div style="padding:0px 0px 20px 0px">
-    @Html.EJS().Button("show")..CssClass("e-primary").Content("open Column Chooser").Render()
+    @Html.EJS().Button("show").CssClass("e-primary").Content("open Column Chooser").Render()
 </div>
 @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnChooser(true).Columns(col =>
 {
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-external/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-external/tagHelper
index cb51a6087b..8e50f7f0e4 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-external/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-external/tagHelper
@@ -1,5 +1,5 @@
 <div style="padding:0px 0px 20px 0px">
-<ejs-button class='e-primary' id='show'  content="open Column Chooser"> </ejs-button>
+<ejs-button class='e-primary' id='show' content="open Column Chooser"> </ejs-button>
 </div>
 <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnChooser='true' toolbar="@(new List<string>() { "ColumnChooser"})">
     <e-grid-columns>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu-stacked/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu-stacked/razor
index 3bbd7720c8..c982d627e6 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu-stacked/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu-stacked/razor
@@ -36,7 +36,6 @@
     col.Field("ShipCity").HeaderText("Ship City").Width("130").Add();
     col.Field("ShipCountry").HeaderText("Ship Country").Width("130").Add();
 }).ColumnMenuItems(columnMenuItems).ColumnMenuClick("columnMenuClick").FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox); }).GroupSettings(group => { group.ShowGroupedColumn(true); }).AllowPaging().Render()
-
 <script>
    function columnMenuClick(args) {
         if (args.item.id === 'option1') {
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu-stacked/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu-stacked/tagHelper
index a7224fcf60..ebd0d5a3ca 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu-stacked/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu-stacked/tagHelper
@@ -37,8 +37,8 @@ showColumnMenu='true' allowFiltering='true' allowGrouping='true' columnMenuClick
         <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width="120"></e-grid-column>
         <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
         <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="130"></e-grid-column>
-        <e-grid-column field="ShipCountry" headerText="Ship Country" width="130"></e-grid-column>
         <e-grid-column field="ShipCity" headerText="Ship City" width="130"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="130"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
 <script>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu/tagHelper
index ec0f0574c9..b387647ca0 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu/tagHelper
@@ -1,12 +1,11 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' allowGrouping='true' allowSorting='true'
-   showColumnMenu='true'  allowFiltering='true' >
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' allowGrouping='true' allowSorting='true' showColumnMenu='true'  allowFiltering='true' >
     <e-grid-groupsettings showGroupedColumn="true"></e-grid-groupsettings>
     <e-grid-filtersettings type="CheckBox"></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="120"></e-grid-column>
         <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="130"></e-grid-column>
-        <e-grid-column field="ShipCountry" headerText="Ship Country" width="130"></e-grid-column>
         <e-grid-column field="ShipCity" headerText="Ship City" width="130"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="130"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenuevents/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenuevents/razor
index 426ddfcf20..8f00fa49b8 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenuevents/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenuevents/razor
@@ -1,22 +1,17 @@
-    <div id="message" style="color: red; text-align: center;padding-bottom:20px"></div>
-
-    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnMenu(true).AllowSorting().AllowFiltering(true).AllowGrouping(true).Columns(col =>
-    {
-        col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-        col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add();
-        col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-        col.Field("ShipCity").HeaderText("Ship City").Width("130").Add();
-        col.Field("ShipCountry").HeaderText("Ship Country").Width("130").Add();
-    }).AllowPaging().ColumnMenuClick("columnMenuClick").ColumnMenuOpen("columnMenuOpen").FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox); }).GroupSettings(group => group.ShowGroupedColumn(true)).Render()
-
-    <script>
-        function columnMenuOpen(args) {
-            document.getElementById("message").innerText = 'columnMenuOpen event is triggered';
-        }
-
-        function columnMenuClick(args) {
-           
-          document.getElementById("message").innerText = 'columnMenuClick event is triggered';
-            
-        }
-    </script>
\ No newline at end of file
+<div id="message" style="color: red; text-align: center;padding-bottom:20px"></div>
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnMenu(true).AllowSorting().AllowFiltering(true).AllowGrouping(true).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add();
+    col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipCity").HeaderText("Ship City").Width("130").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("130").Add();
+}).AllowPaging().ColumnMenuClick("columnMenuClick").ColumnMenuOpen("columnMenuOpen").FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox); }).GroupSettings(group => group.ShowGroupedColumn(true)).Render()
+<script>
+    function columnMenuOpen(args) {
+        document.getElementById("message").innerText = 'columnMenuOpen event is triggered';
+    }
+    function columnMenuClick(args) {
+        document.getElementById("message").innerText = 'columnMenuClick event is triggered';  
+    }
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenuevents/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenuevents/tagHelper
index a79f4be052..ffd6cb55e1 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenuevents/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenuevents/tagHelper
@@ -1,24 +1,19 @@
 <p style="color: red; text-align: center;" id="message"></p>
-
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' allowSorting='true'
-          showColumnMenu='true' allowFiltering='true' allowGrouping='true'  columnMenuClick='columnMenuClick' columnMenuOpen='columnMenuOpen'>
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' allowSorting='true' showColumnMenu='true' allowFiltering='true' allowGrouping='true'  columnMenuClick='columnMenuClick' columnMenuOpen='columnMenuOpen'>
     <e-grid-filtersettings type="CheckBox"></e-grid-filtersettings>
     <e-grid-groupsettings showGroupedColumn="true"></e-grid-groupsettings>
-
     <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="120"></e-grid-column>
         <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="130"></e-grid-column>
-        <e-grid-column field="ShipCountry" headerText="Ship Country" width="130"></e-grid-column>
         <e-grid-column field="ShipCity" headerText="Ship City" width="130"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="130"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <script>
     function columnMenuOpen() {
         document.getElementById("message").innerText = 'columnMenuOpen event is Triggered';
     }
-
     function columnMenuClick() {
         document.getElementById("message").innerText = 'columnMenuClick event is Triggered';
     }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/complexbinding/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/complexbinding/tagHelper
index 23f1e7f530..d4e55195bf 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/complexbinding/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/complexbinding/tagHelper
@@ -1,8 +1,8 @@
 <ejs-grid id="Grid" dataSource="@ViewBag.data" height="315" >     
     <e-grid-columns>
-        <e-grid-column field="EmployeeID" headerText="Employee ID"   width="120"  textAlign="Right"></e-grid-column>
-        <e-grid-column field="Name.FirstName" headerText="Last Name"  width="120"></e-grid-column>               
-        <e-grid-column field="Name.LastName"  headerText="Last Name"  width="120"></e-grid-column>
-        <e-grid-column field="Title"  headerText="Title"  width="150"></e-grid-column>
+        <e-grid-column field="EmployeeID" headerText="Employee ID" width="120" textAlign="Right"></e-grid-column>
+        <e-grid-column field="Name.FirstName" headerText="Last Name" width="120"></e-grid-column>               
+        <e-grid-column field="Name.LastName"  headerText="Last Name" width="120"></e-grid-column>
+        <e-grid-column field="Title" headerText="Title" 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/columns/custom-column-menu-icon/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/custom-column-menu-icon/razor
index dce9561d9f..ad13d80626 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/custom-column-menu-icon/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/custom-column-menu-icon/razor
@@ -7,9 +7,7 @@
   col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").Add();
   col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").Add();
   col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
-
- }).Render()
-
+}).Render()
 <style>
     .e-grid .e-columnheader .e-icons.e-columnmenu::before {
         content: "\e799";
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/custom-column-menu-icon/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/custom-column-menu-icon/tagHelper
index 345c420a4e..d20815456c 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/custom-column-menu-icon/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/custom-column-menu-icon/tagHelper
@@ -3,12 +3,12 @@
 <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnMenu="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"  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-column field="CustomerID" headerText="Customer Name"  width="150"></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date" fromat="yMd" width="150"></e-grid-column>    
+        <e-grid-column field="Freight" headerText="Freight" format="C2" width="150"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <style>
    .e-grid .e-columnheader .e-icons.e-columnmenu::before {
         content: "\e799";
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/customcolumnmenu/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/customcolumnmenu/razor
index 8a00c326e2..7013b4bca1 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/customcolumnmenu/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/customcolumnmenu/razor
@@ -11,8 +11,7 @@
     col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
     col.Field("ShipCity").HeaderText("Ship City").Width("130").Add();
     col.Field("ShipCountry").HeaderText("Ship Country").Width("130").Add();
-    }).AllowPaging().ColumnMenuClick("columnMenuClick").SortSettings(sort => sort.Columns(cols)).ColumnMenuItems(columnMenuitems).Render()
-
+}).AllowPaging().ColumnMenuClick("columnMenuClick").SortSettings(sort => sort.Columns(cols)).ColumnMenuItems(columnMenuitems).Render()
 <script>
     function columnMenuClick(args) {
         if (args.item.id === 'gridclearsorting') {
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/customcolumnmenu/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/customcolumnmenu/tagHelper
index 531dc8df76..bc1ddf7753 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/customcolumnmenu/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/customcolumnmenu/tagHelper
@@ -4,12 +4,8 @@
      List<object> cols = new List<object>();
     cols.Add(new { field = "OrderID", direction = "Ascending" });
 }
-
-
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' allowSorting='true'
-          showColumnMenu='true' columnMenuItems='columnMenuitems' columnMenuClick='columnMenuClick'>
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' allowSorting='true' showColumnMenu='true' columnMenuItems='columnMenuitems' columnMenuClick='columnMenuClick'>
     <e-grid-sortsettings columns='cols'></e-grid-sortsettings>
-
     <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="120"></e-grid-column>
@@ -18,7 +14,6 @@
         <e-grid-column field="ShipCity" headerText="Ship City" width="130"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <script>
     function columnMenuClick(args) {
         if (args.item.id === 'gridclearsorting') {
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/customizecolumnmenu/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/customizecolumnmenu/razor
index a0f128a0a9..b91685cae1 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/customizecolumnmenu/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/customizecolumnmenu/razor
@@ -1,12 +1,11 @@
 @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnMenu(true).AllowSorting().AllowFiltering(true).AllowGrouping(true).Columns(col =>
 {
-col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add();
-col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-col.Field("ShipCity").HeaderText("Ship City").Width("130").Add();
-col.Field("ShipCountry").HeaderText("Ship Country").Width("130").Add();
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add();
+    col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipCity").HeaderText("Ship City").Width("130").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("130").Add();
 }).AllowPaging().ColumnMenuOpen("columnMenuOpen").FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu); }).Render()
-
 <script>
     function columnMenuOpen(args) {
         for (let item of args.items) {
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/customizecolumnmenu/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/customizecolumnmenu/tagHelper
index 7c51d9ba75..d680938ed6 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/customizecolumnmenu/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/customizecolumnmenu/tagHelper
@@ -1,15 +1,13 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' allowSorting='true'
-    showColumnMenu='true' allowFiltering='true' allowGrouping='true' columnMenuOpen='columnMenuOpen'>
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' allowSorting='true' showColumnMenu='true' allowFiltering='true' allowGrouping='true' columnMenuOpen='columnMenuOpen'>
     <e-grid-filtersettings type="Menu"></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="120"></e-grid-column>
         <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="130"></e-grid-column>
-        <e-grid-column field="ShipCountry" headerText="Ship Country" width="130"></e-grid-column>
         <e-grid-column field="ShipCity" headerText="Ship City" width="130"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="130"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <script>
     function columnMenuOpen(args) {
         for (let item of args.items) {
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-color/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-color/razor
index 8ce48b44fd..70721f686f 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-color/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-color/razor
@@ -13,15 +13,12 @@
     .e-grid .e-fixedfreeze.e-freezeleftborder {
         border-left-color: rgb(9, 209, 9) !important;
     }
-
     .e-grid .e-fixedfreeze.e-freezerightborder {
         border-right-color: rgb(10, 224, 10) !important;
     }
-
     .e-grid .e-rightfreeze.e-freezerightborder {
         border-left-color: rgb(19, 228, 243) !important;
     }
-
     .e-grid .e-leftfreeze.e-freezeleftborder {
         border-right-color: rgb(198, 30, 204) !important;
     }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-color/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-color/tagHelper
index 65ec06d872..c8481d26c8 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-color/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-color/tagHelper
@@ -14,15 +14,12 @@
     .e-grid .e-fixedfreeze.e-freezeleftborder {
         border-left-color: rgb(9, 209, 9) !important;
     }
-
     .e-grid .e-fixedfreeze.e-freezerightborder {
         border-right-color: rgb(10, 224, 10) !important;
     }
-
     .e-grid .e-rightfreeze.e-freezerightborder {
         border-left-color: rgb(19, 228, 243) !important;
     }
-
     .e-grid .e-leftfreeze.e-freezeleftborder {
         border-right-color: rgb(198, 30, 204) !important;
     }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-columns/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-columns/razor
index 876ce8ed08..aa1ecb2127 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-columns/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-columns/razor
@@ -13,11 +13,9 @@
   col.Field("ShipAddress").HeaderText("Ship Address").Width("120").Add();
   col.Field("ShipName").HeaderText("Ship Name").Width("120").Add();
 }).Render()
-
 <script type="text/javascript">
   document.getElementById('button').addEventListener('click', function () {
     var grid = document.getElementById("Grid").ej2_instances[0];
     grid.frozenColumns = document.getElementById("frozenColumns").ej2_instances[0].value;
-
   });
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-columns/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-columns/tagHelper
index 998cf9a6b8..90bc54f0f4 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-columns/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-columns/tagHelper
@@ -1,6 +1,5 @@
 <label style="padding: 10px 10px 26px 0;font-weight:bold">Change the frozen columns:</label>
-<ejs-numerictextbox id="frozenColumns" min="0" max="3" validateDecimalOnType="true"
-decimals="0" format="n" value="2" width="100px"></ejs-numerictextbox>
+<ejs-numerictextbox id="frozenColumns" min="0" max="3" validateDecimalOnType="true" decimals="0" format="n" value="2" width="100px"></ejs-numerictextbox>
 <ejs-button id="button" content="Update"></ejs-button>
 <ejs-grid id="Grid" dataSource="@ViewBag.dataSource" frozenColumns='2'>
 <e-grid-columns>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-direction/frozen.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-direction/frozen.cs
index d782bae97c..127c609bcc 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-direction/frozen.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-direction/frozen.cs
@@ -1,9 +1,5 @@
-public IActionResult DefaultExporting()
+public ActionResult DefaultExporting()
 {
-    var order = OrdersDetails.GetAllRecords();
-    ViewBag.dataSource = order;
-    ViewBag.dropdownData = new string[] { "OrderID", "CustomerID", "Freight", "OrderDate", "ShipCountry", "ShipCity", "ShipAddress", "ShipName" };
-    ViewBag.directionData = new string[] {"Left","Right","Fixed" };
-
+    ViewBag.dataSource = OrdersDetails.GetAllRecords();
     return View();
 }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-direction/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-direction/razor
index 9b9f4fae15..f868638689 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-direction/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-direction/razor
@@ -1,7 +1,11 @@
+@{
+    ViewBag.dropDownData = new string[] { "OrderID", "CustomerID", "Freight", "OrderDate", "ShipCountry", "ShipCity", "ShipAddress", "ShipName" };
+    ViewBag.directionData = new string[] {"Left","Right","Fixed" };
+}
 <div style="display: flex">
     <label style="padding: 5px 10px 26px 0"> Change column: </label>
     <span style="height:fit-content">
-        @Html.EJS().DropDownList("columnDropDown").Index(4).Width("180px").DataSource(@ViewBag.dropdownData).Render()
+        @Html.EJS().DropDownList("columnDropDown").Index(4).Width("180px").DataSource(@ViewBag.dropDownData).Render()
     </span>
 </div>
 <div style="display: flex">
@@ -13,8 +17,7 @@
         @Html.EJS().Button("button").Content("Update").Render()
     </div>
 </div>
-
-@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").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
     col.Field("Freight").HeaderText("Freight").Freeze(Syncfusion.EJ2.Grids.FreezeDirection.Fixed).Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
@@ -23,9 +26,8 @@
     col.Field("ShipName").HeaderText("Ship Name").Width("120").Add();
     col.Field("ShipAddress").HeaderText("Ship Address").Width("120").Add();
     col.Field("ShipCity").HeaderText("Ship City").Width("120").Add();
-col.Field("ShipCountry").HeaderText("Ship Country").Freeze(Syncfusion.EJ2.Grids.FreezeDirection.Left).Width("120").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Freeze(Syncfusion.EJ2.Grids.FreezeDirection.Left).Width("120").Add();
 }).Render()
-
 <script type="text/javascript">
     document.getElementById('button').addEventListener('click', function () {
         var grid = document.getElementById("Grid").ej2_instances[0];
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-direction/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-direction/tagHelper
index 267c018f97..89be6f1264 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-direction/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-direction/tagHelper
@@ -1,11 +1,17 @@
+@{
+    ViewBag.dropDownData = new string[] { "OrderID", "CustomerID", "Freight", "OrderDate", "ShipCountry", "ShipCity", "ShipAddress", "ShipName" };
+    ViewBag.directionData = new string[] {"Left","Right","Fixed" };
+}
 <div style="display: flex">
-    <label style="padding: 5px 10px 26px 0"> Change column: </label>
+    <label style="padding: 5px 10px 26px 0;font-weight: bold"> Change column: </label>
     <span style="height:fit-content">
-        <ejs-dropdownlist id="columnDropDown" index="4" dataSource="@ViewBag.dropdownData"></ejs-dropdownlist>
+        <ejs-dropdownlist id="columnDropDown" index="4" dataSource="@ViewBag.dropDownData">
+            <e-dropdownlist-fields value="value" text="value"></e-dropdownlist-fields>
+        </ejs-dropdownlist>
     </span>
 </div>
 <div style="display: flex">
-    <label style="padding: 5px 10px 26px 0"> Change freeze direction: </label>
+    <label style="padding: 5px 10px 26px 0;font-weight: bold"> Change freeze direction: </label>
     <span style="height:fit-content">
         <ejs-dropdownlist id="directionDropDown" index="0" dataSource="@ViewBag.directionData"></ejs-dropdownlist>
     </span>
@@ -13,8 +19,7 @@
     <ejs-button  id="button" content="Update"></ejs-button>
     </div>
 </div>
-
-<ejs-grid id="Grid" dataSource="@ViewBag.dataSource">
+<ejs-grid id="Grid" dataSource="@ViewBag.dataSource" height="348px">
     <e-grid-columns>
         <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-grid-column>
         <e-grid-column field="Freight" headerText="Freight" format='C' freeze='Fixed' textAlign="Right" width="120"></e-grid-column>
@@ -27,7 +32,6 @@
     </e-grid-columns>
 </ejs-grid>
 <script type="text/javascript">
-
   document.getElementById('button').addEventListener('click', function () {
         var grid = document.getElementById("Grid").ej2_instances[0];
         grid.getColumnByField(document.getElementById("columnDropDown").value).freeze = document.getElementById("directionDropDown").value
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-particular/frozen.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-particular/frozen.cs
index bdcc7dd630..afe7133b12 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-particular/frozen.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-particular/frozen.cs
@@ -1,7 +1,5 @@
-public IActionResult DefaultExporting()
+public ActionResult Index()
 {
-    var order = OrdersDetails.GetAllRecords();
-     ViewBag.dropdownData = new string[] { "OrderID", "CustomerID", "EmployeeID", "Freight", "OrderDate", "ShipCountry", "ShipCity", "ShipAddress", "ShipName" };
-    ViewBag.dataSource = order;
+    ViewBag.dataSource = OrdersDetails.GetAllRecords();
     return View();
 }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-particular/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-particular/razor
index d0629207a3..43284deb29 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-particular/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-particular/razor
@@ -1,10 +1,24 @@
+@{
+    ViewBag.dropDownData = new List<object>
+    {
+        new { value = "OrderID", text = "Order ID" },
+        new { value = "CustomerID", text = "Customer ID" },
+        new { value = "EmployeeID", text = "Employee ID" },
+        new { value = "Freight", text = "Freight" },
+        new { value = "OrderDate", text = "Order Date" },
+        new { value = "ShipCountry", text = "Ship Country" },
+        new { value = "ShipCity", text = "Ship City" },
+        new { value = "ShipAddress", text = "Ship Address" },
+        new { value = "ShipName", text = "Ship Name" }
+    };
+}
 <div style="display: flex">
   <label style="padding: 10px 10px 26px 0"> Change the frozen column: </label>
   <span style="height:fit-content">
-   @Html.EJS().DropDownList("dropdown").Index(1).Width("180px").DataSource(@ViewBag.dropdownData).Change("columnChange").Render()
+    @Html.EJS().DropDownList("dropdown").Index(1).Width("180px").DataSource(@ViewBag.dropDownData).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Value = "value", Text = "text" }).Change("columnChange").Render()
   </span>
 </div>
-@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").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
     col.Field("CustomerID").HeaderText("Customer ID").IsFrozen(true).Width("130").Add();
@@ -16,7 +30,6 @@
     col.Field("ShipAddress").HeaderText("Ship Address").Width("120").Add();
     col.Field("ShipName").HeaderText("Ship Name").Width("120").Add();
 }).Render()
-
 <script type="text/javascript">
     function columnChange(args) {
         var grid = document.getElementById("Grid").ej2_instances[0];
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-particular/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-particular/tagHelper
index 8d7a100008..0cc369bc4d 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-particular/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-particular/tagHelper
@@ -1,14 +1,29 @@
+@{
+    ViewBag.dropDownData = new List<object>
+    {
+        new { value = "OrderID", text = "Order ID" },
+        new { value = "CustomerID", text = "Customer ID" },
+        new { value = "EmployeeID", text = "Employee ID" },
+        new { value = "Freight", text = "Freight" },
+        new { value = "OrderDate", text = "Order Date" },
+        new { value = "ShipCountry", text = "Ship Country" },
+        new { value = "ShipCity", text = "Ship City" },
+        new { value = "ShipAddress", text = "Ship Address" },
+        new { value = "ShipName", text = "Ship Name" }
+    };
+}
 <div style="display: flex">
-    <label style="padding: 10px 10px 26px 0"> Change the frozen column: </label>
+    <label style="padding: 1px 10px 26px 0;font-weight: bold"> Change the frozen column: </label>
     <span style="height:fit-content">
-        <ejs-dropdownlist id="dropdown" index="1" dataSource="@ViewBag.dropdownData" change="columnChange"></ejs-dropdownlist>
+        <ejs-dropdownlist id="dropdown" index="1" dataSource="@ViewBag.dropDownData" change="columnChange">
+            <e-dropdownlist-fields value="value" text="text"></e-dropdownlist-fields>
+        </ejs-dropdownlist>
     </span>
 </div>
-
-<ejs-grid id="Grid" dataSource="@ViewBag.dataSource">
+<ejs-grid id="Grid" dataSource="@ViewBag.dataSource" height="348px">
     <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" isFrozen="true" width="130"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" isFrozen="true" width="130"></e-grid-column>
         <e-grid-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-grid-column>
         <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="120"></e-grid-column>
         <e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/razor
index 7bb1c4d30f..b8ceaf88c0 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/razor
@@ -5,7 +5,6 @@
     col.Field("Freight").HeaderText("Freight").Width("120").HeaderTemplate("#freightTemplate").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
     col.Field("OrderDate").HeaderText("Order Date").Width("140").HeaderTemplate("#datetemplate").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
 }).HeaderCellInfo("onHeaderCellInfo").Render()
-
 <style>
     @@font-face {
         font-family: 'ej2-headertemplate';
@@ -13,18 +12,15 @@
         font-weight: normal;
         font-style: normal;
     }
-
     .e-icon-calender::before {
         font-family: 'ej2-headertemplate';
         content: "\e960";
     }
-
     .e-icon-userlogin::before {
         font-family: 'ej2-headertemplate';
         content: "\e702";
     }
 </style>
-
 <script id="customerTemplate" type="text/x-template">
     <div>
         <span class="e-icon-userlogin e-icons employee">Customer ID</span>
@@ -39,24 +35,19 @@
         <label style="padding: 0px 0px 0px 10px" id="dateLabel">Order Date</label>
     </div>
 </script>
-
 <script>
     var headerText = "Order Date";
-    var dropdownData = ["Freight", "Shipment", "Cargo"]
-
-
+    var dropDownData = ["Freight", "Shipment", "Cargo"]
     function onHeaderCellInfo(args) {
         if (args.cell.column.field === 'Freight') {
-          
-            var dropdownElement = args.node.querySelector('#dropdown');
-            if (dropdownElement) {
+            var dropDownElement = args.node.querySelector('#dropdown');
+            if (dropDownElement) {
                 new ej.dropdowns.DropDownList({
                     index: "0",
                     width: "130",
-                    dataSource: dropdownData
-                }).appendTo(dropdownElement);
-                }
-           
+                    dataSource: dropDownData
+                }).appendTo(dropDownElement);
+            }
         }
         if (args.cell.column.field === 'OrderDate') {
             var switchElement = args.node.querySelector('#switch');
@@ -65,7 +56,6 @@
                     change: onSwitchToggle
                 }).appendTo(switchElement);
             }
-
         }
     }
     function onSwitchToggle(args) {
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/tagHelper
index e9b4787a70..8ac78b8477 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/tagHelper
@@ -6,7 +6,6 @@
         <e-grid-column field="OrderDate" headerTemplate="#datetemplate" textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <style>
     @@font-face {
         font-family: 'ej2-headertemplate';
@@ -18,13 +17,11 @@
         font-family: 'ej2-headertemplate';
         content: "\e960";
     }
-
     .e-icon-userlogin::before {
         font-family: 'ej2-headertemplate';
         content: "\e702";
     }
 </style>
-
 <script id="customerTemplate" type="text/x-template">
     <div>
         <span class="e-icon-userlogin e-icons employee">Customer ID</span>
@@ -39,20 +36,19 @@
         <label style="padding: 0px 0px 0px 10px" id="dateLabel">Order Date</label>
     </div>
 </script>
-
 <script>
     var headerText = "Order Date";
-    var dropdownData = ["Freight", "Shipment", "Cargo"]
+    var dropDownData = ["Freight", "Shipment", "Cargo"]
     function onHeaderCellInfo(args) {
         if (args.cell.column.field === 'Freight') {
-                var dropdownElement = args.node.querySelector('#dropdown');
-                if (dropdownElement) {
-                    new ej.dropdowns.DropDownList({
-                        index:"0",
-                        width:"130",
-                        dataSource: dropdownData
-                    }).appendTo(dropdownElement);
-                }
+            var dropDownElement = args.node.querySelector('#dropdown');
+            if (dropDownElement) {
+                new ej.dropdowns.DropDownList({
+                    index:"0",
+                    width:"130",
+                    dataSource: dropDownData
+                }).appendTo(dropDownElement);
+            }
         }
         if (args.cell.column.field === 'OrderDate')
         {
@@ -62,7 +58,6 @@
                     change: onSwitchToggle
                 }).appendTo(switchElement);
             }
-
         }
     }
     function onSwitchToggle(args) {
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/razor
index 0e2f4d9211..b414abefbb 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/razor
@@ -1,3 +1,10 @@
+@{
+    ViewBag.dropDownData = new List<object>
+    {
+        new { value = "Header", text = "Header" },
+        new { value = "Both", text = "Both" }
+    };
+}
 <div style="display: flex">
     <label style="padding: 10px 10px 26px 0"> Change the wrapmode of auto wrap feature: </label>
     <span style="height:fit-content">
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/tagHelper
index 19581f9017..c70e0e0516 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/tagHelper
@@ -1,7 +1,14 @@
+@{
+    ViewBag.dropDownData = new List<object>
+    {
+        new { value = "Header", text = "Header" },
+        new { value = "Both", text = "Both" }
+    };
+}
 <div style="display: flex">
     <label style="padding: 3px 10px 26px 0"> Change the wrapmode of auto wrap feature: </label>
     <span style="height:fit-content">
-        <ejs-dropdownlist id="dropdown" index="0" dataSource="@ViewBag.dropdownData" change="valueChange"></ejs-dropdownlist>
+        <ejs-dropdownlist id="dropdown" index="0" dataSource="@ViewBag.dropDownData" change="valueChange"></ejs-dropdownlist>
     </span>
 </div>
 <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowTextWrap=true>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/razor
index a0ac706b5a..dc2795b878 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/razor
@@ -9,7 +9,6 @@
     col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
     col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
 }).Render()
-
 <script type="text/javascript">
     document.getElementById('buttons').addEventListener('click', function () {
         const headerTextMap = {
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/tagHelper
index 7b1c05d438..1b7b97c5b2 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/tagHelper
@@ -11,7 +11,6 @@
         <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <script type="text/javascript">
     document.getElementById('buttons').addEventListener('click', function () {
         const headerTextMap = {
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/columntext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/columntext.cs
index 0899739419..40fb26aec9 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/columntext.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/columntext.cs
@@ -4,4 +4,10 @@ public IActionResult Index()
   ViewBag.DataSource = orders;
   ViewBag.dropdownData = new string[] { "OrderID", "CustomerID", "Freight", "OrderDate","ShipCountry" };
   return View();
+}
+
+public ActionResult Index()
+{
+  ViewBag.DataSource = OrdersDetails.GetAllRecords();
+  return View();
 }
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/razor
index e7b051dd1b..1027adffa2 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/razor
@@ -1,7 +1,10 @@
+@{
+    ViewBag.dropDownData = new string[] { "OrderID", "CustomerID", "Freight", "OrderDate","ShipCountry" };
+}
 <div style="display: flex">
    <label style="padding: 3px 10px 0px 0;font-weight: bold;"> Select column name :  </label>
     <span style="height:fit-content">
-        @Html.EJS().DropDownList("dropdown").Index(0).Width("180px").DataSource(@ViewBag.dropdownData).Render()
+        @Html.EJS().DropDownList("dropdown").Index(0).Width("180px").DataSource(@ViewBag.dropDownData).Render()
     </span>
 </div>
 <div style="padding:0px 0px 20px 0px">
@@ -9,7 +12,6 @@
     @Html.EJS().TextBox("textbox").Placeholder("Enter new header text").Width("220px").Render()
     @Html.EJS().Button("buttons").Content("Change").Render()
 </div>
-
 @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();
@@ -18,7 +20,6 @@
     col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
     col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
 }).AllowPaging().Render()
-
 <script>
     document.getElementById('buttons').addEventListener('click', function () {
         var TextBoxValue = document.getElementById('textbox').value;
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/tagHelper
index 549f988332..9033bacd92 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/tagHelper
@@ -1,7 +1,10 @@
+@{
+    ViewBag.dropDownData = new string[] { "OrderID", "CustomerID", "Freight", "OrderDate","ShipCountry" };
+}
 <div style="display: flex">
     <label style="padding: 3px 10px 0px 0;font-weight: bold;"> Select column name : </label>
     <span style="height:fit-content">
-        <ejs-dropdownlist id="dropdown" index="0" dataSource="@ViewBag.dropdownData"></ejs-dropdownlist>
+        <ejs-dropdownlist id="dropdown" index="0" dataSource="@ViewBag.dropDownData"></ejs-dropdownlist>
     </span>
 </div>
 <div style="padding:0px 0px 20px 0px">
@@ -20,10 +23,8 @@
         <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <script type="text/javascript">
     document.getElementById('buttons').addEventListener('click', function () {
-        debugger;
         var TextBoxValue = document.getElementById('textbox').value;
         var grid = document.getElementById("Grid").ej2_instances[0];
         if (TextBoxValue !== "") {
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/razor
index 38c07e16df..6d732707fb 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/razor
@@ -6,7 +6,6 @@
     col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
     col.Field("ShipCity").HeaderText("Ship City").Width("120").Add();
 }).Created("setHeaderHeight").Render()
-
 <style>
     .orientationcss .e-headercelldiv {
         transform: rotate(90deg);
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/tagHelper
index 64393d4224..e58f28751b 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/tagHelper
@@ -7,7 +7,6 @@
         <e-grid-column field="ShipCity" headerText="Ship City" width="120"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <style>
     .orientationcss .e-headercelldiv {
         transform: rotate(90deg);
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/razor
index 479fc970ea..963fbb205a 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/razor
@@ -1,21 +1,19 @@
-@Html.EJS().Button("button").Content("Refresh Header").Render()
-    <div style='padding:20px 0px 0px 0px'>
-
-        @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 ID").Width("130").Add();
-            col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-            col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-            col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
-        }).Render()
-    </div>
+@Html.EJS().Button("button").Content("Refresh Header").Render();
+<div style='padding:20px 0px 0px 0px'>
+    @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 ID").Width("130").Add();
+        col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+        col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+        col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
+    }).Render();
+</div>
 <script>
     document.getElementById('button').addEventListener('click', function () {
         var grid = document.getElementById("Grid").ej2_instances[0];
         const column = grid.getColumnByField("CustomerID");
         column.headerText = "New Header Text"; // update the header text of the column object
         grid.refreshHeader();
-
     });
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/tagHelper
index 5cbcac8b10..dbdd90dc4a 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/tagHelper
@@ -4,7 +4,7 @@
     <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="130"></e-grid-column>
-        <e-grid-column field="Freight" headerText="Freight"  format='C' textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="120"></e-grid-column>
         <e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
         <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
     </e-grid-columns>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/razor
index d8388dd5e0..ff6ea01986 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/razor
@@ -8,7 +8,6 @@
     col.HeaderText("Shipped Details").HeaderTemplate("#shipDetailsTemplate").Columns(new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { Field = "ShippedDate", Width = "140", HeaderText = "Shipped Date", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right, Format = "yMd", MinWidth="10" },
         new Syncfusion.EJ2.Grids.GridColumn { Field = "ShipCountry", Width = "145",  HeaderText = "Ship Country", MinWidth="10", EditType="dropdownedit" } }).Add();
 }).HeaderCellInfo("onHeaderCellInfo").Render()
-
 <style>
     @@font-face {
         font-family: "ej2-headertemplate";
@@ -42,17 +41,16 @@
     </div>
 </script>
 <script>
-    var dropdownData = ["Order Details", "Order Information"]
+    var dropDownData = ["Order Details", "Order Information"]
     function onHeaderCellInfo(args) {
         if (args.cell.column.headerText === 'Order Details') {
-            var dropdownElement = args.node.querySelector('#dropdown');
-            if (dropdownElement) {
+            var dropDownElement = args.node.querySelector('#dropdown');
+            if (dropDownElement) {
                 new ej.dropdowns.DropDownList({
                     index: "0",
-                    dataSource: dropdownData
-                }).appendTo(dropdownElement);
+                    dataSource: dropDownData
+                }).appendTo(dropDownElement);
             }
         }
-
     }
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/tagHelper
index 3707b4fad0..cb62aa8dc9 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/tagHelper
@@ -25,10 +25,10 @@
     }
 
 </style>
-<script id="orderIDTemplate"  type="text/x-template">
+<script id="orderIDTemplate" type="text/x-template">
     <a href="#">OrderID</a>
 </script>
-<script id="shipDetailsTemplate"   type="text/x-template">
+<script id="shipDetailsTemplate" type="text/x-template">
     <div> <span>Ship Details</span>
     <span>(<i class="fa fa-truck"></i>)
     </span></div>
@@ -43,15 +43,15 @@
     <div>    
 </script>
 <script>
-    var dropdownData = ["Order Details", "Order Information"]
+    var dropDownData = ["Order Details", "Order Information"]
     function onHeaderCellInfo(args) {
         if (args.cell.column.headerText === 'Order Details') {
-            var dropdownElement = args.node.querySelector('#dropdown');
-            if (dropdownElement) {
+            var dropDownElement = args.node.querySelector('#dropdown');
+            if (dropDownElement) {
                 new ej.dropdowns.DropDownList({
                     index:"0",
-                    dataSource: dropdownData
-                }).appendTo(dropdownElement);
+                    dataSource: dropDownData
+                }).appendTo(dropDownElement);
             }
         }
     }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/razor
index a345da7aab..b30c8fe688 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/razor
@@ -1,7 +1,16 @@
+@{
+    ViewBag.dropDownData = new List<object>
+    {
+        new { value = "Left", text = "Left" },
+        new { value = "Right", text = "Right" },
+        new { value = "Center", text = "Center" },
+        new { value = "Justify", text = "Justify" }
+    };
+}
 <div style="display: flex">
     <label style="padding: 3px 10px 26px 0">Align the text of header text : </label>
     <span style="height:fit-content">
-        @Html.EJS().DropDownList("dropdown").Width("180px").Index(0).DataSource(@ViewBag.dropdownData).Change("changeAlignment").Render()
+        @Html.EJS().DropDownList("dropDown").Width("180px").Index(0).DataSource(@ViewBag.dropDownData).Change("changeAlignment").Render()
     </span>
 </div>
 @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
@@ -11,12 +20,11 @@
     col.Field("Freight").HeaderText("Freight").Width("120").Format("C").Add();
     col.Field("OrderDate").HeaderText("Order Date").Width("140").Format("yMd").Add();
 }).Render()
-
 <script>
     function changeAlignment(args) {
         var grid = document.getElementById("Grid").ej2_instances[0];
-        grid.columnModel.forEach((col) => {
-            col.headerTextAlign = args.value;
+        grid.columnModel.forEach((column) => {
+            column.headerTextAlign = args.value;
         });
         grid.refreshHeader();
     }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/tagHelper
index 63a11919e3..6c2c9b3094 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/tagHelper
@@ -1,7 +1,16 @@
+@{
+    ViewBag.dropDownData = new List<object>
+    {
+        new { value = "Left", text = "Left" },
+        new { value = "Right", text = "Right" },
+        new { value = "Center", text = "Center" },
+        new { value = "Justify", text = "Justify" }
+    };
+}
 <div style="display: flex">
     <label style="padding: 3px 10px 26px 0; font-weight: bold"> Align the text of header text : </label>
     <span style="height:fit-content">
-        <ejs-dropdownlist id="dropdown" index="0" dataSource="@ViewBag.dropdownData" change="changeAlignment"></ejs-dropdownlist>
+        <ejs-dropdownlist id="dropDown" index="0" dataSource="@ViewBag.dropdownData" change="changeAlignment"></ejs-dropdownlist>
     </span>
 </div>
 <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="315px">
@@ -15,8 +24,8 @@
 <script type="text/javascript">
     function changeAlignment(args) {
         var grid = document.getElementById("Grid").ej2_instances[0];
-        grid.columnModel.forEach((col) => {
-            col.headerTextAlign = args.value;
+        grid.columnModel.forEach((column) => {
+            column.headerTextAlign = args.value;
         });
         grid.refreshHeader();
     }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/razor
index a172ab0eb0..1d9164fde3 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/razor
@@ -6,7 +6,6 @@
     col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
     col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
 }).HeaderCellInfo("onHeaderCellInfo").Render()
-
 <style>
     .e-grid .e-headercell.customcss {
         color: rgb(14, 10, 10);
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/tagHelper
index bdaf4acf36..24286d24f6 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/tagHelper
@@ -2,7 +2,7 @@
     <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="130"></e-grid-column>
-        <e-grid-column field="Freight" headerText="Freight"  format='C' textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="120"></e-grid-column>
         <e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
         <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
     </e-grid-columns>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-property/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-property/razor
index 383e9941d9..f51891b349 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-property/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-property/razor
@@ -6,7 +6,6 @@
     col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
     col.Field("ShipCountry").HeaderText("Ship Country").CustomAttributes(new { @class = "custom" }).Width("120").Add();
 }).Render()
-
 <style>
    .e-grid .e-headercell.custom {
         background-color: rgb(43, 195, 226);
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-field/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-field/razor
index 40d766ac87..a57d865b13 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-field/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-field/razor
@@ -11,8 +11,6 @@
     col.Field("ShipCity").HeaderText("Ship City").Width("130").Add();
     col.Field("ShipCountry").HeaderText("Ship Country").Width("130").Add();
 }).Render()
-
-</div>
 <style>
 .e-btn.e-info, .e-css.e-btn.e-info {
     margin-right: 4px;
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-field/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-field/tagHelper
index 7472af37f1..1ca6ef0f0a 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-field/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-field/tagHelper
@@ -2,7 +2,6 @@
     <ejs-button id='reordersingle' cssClass='e-info' content="Reorder single column"></ejs-button>
     <ejs-button id='reordermultiple' cssClass='e-info' content="Reorder multiple columns"></ejs-button>
 </div>
-
 <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowReordering='true'>
     <e-grid-columns>
         <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width="120"></e-grid-column>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reordercols/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/reordercols/tagHelper
index d8d4049de0..e36de28c34 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/reordercols/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reordercols/tagHelper
@@ -1,7 +1,6 @@
 <div style="padding:0px 0px 20px 0px">
-<ejs-button id='button' cssClass='e-primary' content="Reorder column by index"></ejs-button>
+  <ejs-button id='button' cssClass='e-primary' content="Reorder column by index"></ejs-button>
 </div>
-
 <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowReordering='true'>
     <e-grid-columns>
         <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width="120"></e-grid-column>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reorderevents/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/reorderevents/razor
index 00b924620a..82795d4d36 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/reorderevents/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reorderevents/razor
@@ -1,17 +1,16 @@
-  <p id='message' style="color:red;text-align:center"></p>
-  @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowReordering().Columns(col =>
-  {
+<p id='message' style="color:red;text-align:center"></p>
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowReordering().Columns(col =>
+{
     col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
     col.Field("CustomerID").HeaderText("Customer ID").Width("100").Add();
     col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
     col.Field("ShipName").HeaderText("Ship Name").Width("130").Add();
     col.Field("ShipCity").HeaderText("Ship City").Width("130").Add();
     col.Field("ShipCountry").HeaderText("Ship Country").Width("130").Add();
-  }).ColumnDragStart("columnDragStart").ColumnDrag("columnDrag").ColumnDrop("columnDrop").Render()
-  
+}).ColumnDragStart("columnDragStart").ColumnDrag("columnDrag").ColumnDrop("columnDrop").Render()
 <style>
     .e-grid .e-headercell.customcss, .e-grid .e-rowcell.customcss {
-          background-color: rgb(43, 195, 226);
+        background-color: rgb(43, 195, 226);
     }
 </style>
 <script type="text/javascript">
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reorderevents/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/reorderevents/tagHelper
index a1caed1edb..bd2663e525 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/reorderevents/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reorderevents/tagHelper
@@ -1,5 +1,4 @@
 <p id='message' style="color:red;text-align:center"></p>
-
 <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowReordering='true' columnDragStart="columnDragStart" columnDrag="columnDrag" columnDrop="columnDrop">
     <e-grid-columns>
         <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width="120"></e-grid-column>
@@ -10,13 +9,11 @@
         <e-grid-column field="ShipCountry" headerText="Ship Country" width="130"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <style>
     .e-grid .e-headercell.customcss, .e-grid .e-rowcell.customcss {
         background-color: rgb(43, 195, 226);
     }
 </style>
-
 <script type="text/javascript">
     function columnDragStart(args) {
         document.getElementById('message').innerText = `columnDragStart event triggered`;
@@ -24,14 +21,12 @@
             args.cancel = true; // Prevent reordering
         }
     }
-
     function columnDrag(args) {
         var index = args.target.getAttribute('data-colIndex');
         if (index) {
             document.getElementById('message').innerText = `columnDrag event triggered. ${args.column.headerText} column is dragged to index ${index}`;
         }
     }
-
     function columnDrop(args) {
         document.getElementById('message').innerText = `columnDrop event triggered`;
         if (args.column.allowReordering === true) {
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reordertargetcolumns/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/reordertargetcolumns/tagHelper
index f5e6c86e6c..e18f3c7a1c 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/reordertargetcolumns/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reordertargetcolumns/tagHelper
@@ -1,8 +1,7 @@
 <div style="padding:0px 0px 20px 0px">
-    <ejs-button id='reordersingle' cssClass='e-info'  content="Reorder single column"></ejs-button>
-    <ejs-button id='reordermultiple' cssClass='e-info'  content="Reorder mutiple columns"></ejs-button>
+    <ejs-button id='reordersingle' cssClass='e-info' content="Reorder single column"></ejs-button>
+    <ejs-button id='reordermultiple' cssClass='e-info' content="Reorder mutiple columns"></ejs-button>
 </div>
-
 <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowReordering='true'>
     <e-grid-columns>
         <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width="120"></e-grid-column>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/resize-external/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-external/razor
index 6b60fb914e..8c85a847b7 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/resize-external/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-external/razor
@@ -1,23 +1,32 @@
+@{
+    ViewBag.dropDownData = new List<object>
+    {
+        new { value = "OrderID"},
+        new { value = "CustomerID" },
+        new { value = "Freight"},
+        new { value = "OrderDate" },
+        new { value = "ShipCountry" }
+    };
+}
 <div style="display: flex">
     <label style="padding: 3px 10px 0px 0;font-weight: bold;"> Change the field:  </label>
     <span style="height:fit-content">
-        @Html.EJS().DropDownList("dropdown").Index(0).Width("180px").DataSource(new List<object> { "OrderID", "CustomerID", "Freight", "OrderDate" }).Render()
+        @Html.EJS().DropDownList("dropdown").Index(0).Width("180px").DataSource(@ViewBag.dropDownData).Render()
     </span>
 </div>
-    <div style="padding:0px 0px 20px 0px">
-        <label style="padding: 23px 4px 0 0;font-weight: bold;">Enter the width:</label>
-        @Html.EJS().TextBox("textbox").Placeholder("Enter new width").Width("220px").Render()
-        @Html.EJS().Button("buttons").Content("Resize").Render()
-    </div>
-    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowResizing(true).Columns(col =>
-    {
-        col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-        col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add();
-        col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-        col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-        col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
-    }).Render()
-
+<div style="padding:0px 0px 20px 0px">
+    <label style="padding: 23px 4px 0 0;font-weight: bold;">Enter the width:</label>
+    @Html.EJS().TextBox("textbox").Placeholder("Enter new width").Width("220px").Render()
+    @Html.EJS().Button("buttons").Content("Resize").Render()
+</div>
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowResizing(true).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add();
+    col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
+}).Render()
 <script type="text/javascript">
     document.getElementById('buttons').addEventListener('click', function () {
         var grid = document.getElementById("Grid").ej2_instances[0];
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/resize-external/resize.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-external/resize.cs
index a313f00f64..47e5e3b61d 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/resize-external/resize.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-external/resize.cs
@@ -1,6 +1,5 @@
 public IActionResult Index()
 {
-    var Order = OrdersDetails.GetAllRecords();
-    ViewBag.DataSource = Order;
+    ViewBag.DataSource = OrdersDetails.GetAllRecords();
     return View();
 } 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/resize-external/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-external/tagHelper
index dddf1bd7a2..42af474e78 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/resize-external/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-external/tagHelper
@@ -1,7 +1,17 @@
+@{
+    ViewBag.dropDownData = new List<object>
+    {
+        new { value = "OrderID"},
+        new { value = "CustomerID" },
+        new { value = "Freight"},
+        new { value = "OrderDate" },
+        new { value = "ShipCountry" }
+    };
+}
 <div style="display: flex">
     <label style="padding: 3px 10px 0px 0;font-weight: bold;">Change the field: </label>
     <span style="height:fit-content">
-        <ejs-dropdownlist id="dropdown" index="0" dataSource="@ViewBag.dropdownData"></ejs-dropdownlist>
+        <ejs-dropdownlist id="dropdown" index="0" dataSource="@ViewBag.dropDownData"></ejs-dropdownlist>
     </span>
 </div>
 <div style="padding:0px 0px 20px 0px">
@@ -20,7 +30,6 @@
         <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <script type="text/javascript">
     document.getElementById('buttons').addEventListener('click', function () {
         var grid = document.getElementById("Grid").ej2_instances[0];
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/resize-mode/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-mode/razor
index b81671953d..2ec2aa0f89 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/resize-mode/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-mode/razor
@@ -1,7 +1,14 @@
+@{
+    ViewBag.dropDownData = new List<object>
+    {
+        new { value = "Normal", text = "Normal" },
+        new { value = "Auto", text = "Auto" },
+    };
+}
 <div style="display: flex">
     <label style="padding: 10px 10px 26px 0"> Change the resize mode: </label>
     <span style="height:fit-content">
-      @Html.EJS().DropDownList("dropdown").Index(0).Width("180px").DataSource(new List<object> { "Normal", "Auto" }).Change("change").Render()
+      @Html.EJS().DropDownList("dropdown").Index(0).Width("180px").DataSource(@ViewBag.dropDownData).Change("change").Render()
     </span>
 </div>
 @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowResizing(true).Columns(col =>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/resize-mode/resize.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-mode/resize.cs
index a313f00f64..47e5e3b61d 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/resize-mode/resize.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-mode/resize.cs
@@ -1,6 +1,5 @@
 public IActionResult Index()
 {
-    var Order = OrdersDetails.GetAllRecords();
-    ViewBag.DataSource = Order;
+    ViewBag.DataSource = OrdersDetails.GetAllRecords();
     return View();
 } 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/resize-mode/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-mode/tagHelper
index 955e7ba9b3..54819c8ea7 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/resize-mode/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-mode/tagHelper
@@ -1,7 +1,14 @@
+@{
+    ViewBag.dropDownData = new List<object>
+    {
+        new { value = "Normal", text = "Normal" },
+        new { value = "Auto", text = "Auto" },
+    };
+}
 <div style="display: flex">
     <label style="padding: 10px 10px 26px 0"> Change the resize mode: </label>
     <span style="height:fit-content">
-        <ejs-dropdownlist id="dropdown" index="0" dataSource="@ViewBag.dropdownData" change="Change"></ejs-dropdownlist>
+        <ejs-dropdownlist id="dropdown" index="0" dataSource="@ViewBag.dropDownData" change="Change"></ejs-dropdownlist>
     </span>
 </div>
 <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowResizing='true'>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/resizeevents/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/resizeevents/tagHelper
index d8a50a5619..98358b3efd 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/resizeevents/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resizeevents/tagHelper
@@ -1,7 +1,6 @@
 <div style="margin-left:180px">
     <p style="color:red;" id="message"></p>
 </div>
-
 <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowResizing='true' resizeStart="resizeStart"
           resizing="resizing" resizeStop="resizeStop">
     <e-grid-columns>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/batch-particular/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/batch-particular/razor
index e58890a65a..25dc01c7b8 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/batch-particular/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/batch-particular/razor
@@ -7,8 +7,7 @@
     col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").ValidationRules(new { required = "true"}).Add();
 }).CellEdit("cellEdit").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Batch); }).Toolbar(new List<string>() { "Add", "Delete", "Update", "Cancel" }).Render()
 <script>
-    function cellEdit(args)
-    {
+    function cellEdit(args){
         if (args.value === 'France') {
             args.cancel = true;
         }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/batch-particular/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/batch-particular/tagHelper
index 6040c289fb..cd3317b9f3 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/batch-particular/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/batch-particular/tagHelper
@@ -9,8 +9,7 @@
         </e-grid-columns>
 </ejs-grid>
 <script>
-    function cellEdit(args)
-    {
+    function cellEdit(args){
         if (args.value === 'France') {
             args.cancel = true;
         }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/batch-save-update/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/batch-save-update/razor
index 9fef99c824..eefc01a36a 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/batch-save-update/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/batch-save-update/razor
@@ -7,8 +7,7 @@
     col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").ValidationRules(new { required = "true"}).Add();
 }).CellSaved("cellSaved").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).ShowConfirmDialog(true).Mode(Syncfusion.EJ2.Grids.EditMode.Batch); }).Toolbar(new List<string>() { "Add", "Delete", "Update", "Cancel" }).Render()
 <script>
-    function cellSaved()
-    {
+    function cellSaved() {
         var grid=document.getElementById('grid').ej2_instances[0];
         grid.editModule.batchSave();
     }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/batch-save-update/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/batch-save-update/tagHelper
index 9f80e72d3f..824b3b2a53 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/batch-save-update/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/batch-save-update/tagHelper
@@ -9,8 +9,7 @@
     </e-grid-columns>
 </ejs-grid>
 <script>
-    function cellSaved()
-    {
+    function cellSaved() {
         var grid=document.getElementById('grid').ej2_instances[0];
         grid.editModule.batchSave();
     }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/batch/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/batch/tagHelper
index c407b5791c..1c994813fa 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/batch/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/batch/tagHelper
@@ -2,7 +2,7 @@
   <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></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})" width="120"></e-grid-column>
+    <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" width="120"></e-grid-column>
     <e-grid-column field="Freight" headerText="Freight" textAlign="Right" validationRules="@(new { required=true,min=1,max=1000})" format="C2" 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" width="150" validationRules="@(new { required=true})" editType= "dropdownedit"></e-grid-column>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/commandcolumn/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/commandcolumn/razor
index ec886dfce3..1b18ea4b6c 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/commandcolumn/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/commandcolumn/razor
@@ -1,11 +1,10 @@
 @{
-    List<object> commands = new List<object>();
-    commands.Add(new { type = "Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } });
-    commands.Add(new { type = "Delete", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } });
-    commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } });
-    commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } });
+  List<object> commands = new List<object>();
+  commands.Add(new { type = "Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } });
+  commands.Add(new { type = "Delete", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } });
+  commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } });
+  commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } });
 }
-
 @Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("348px").Columns(col =>
 {
   col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/commandcolumn/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/commandcolumn/tagHelper
index 3e9de1d093..638494627d 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/commandcolumn/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/commandcolumn/tagHelper
@@ -1,12 +1,11 @@
 
- @{
-    List<object> commands = new List<object>();
-    commands.Add(new { type = "Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } });
-    commands.Add(new { type = "Delete", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } });
-    commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } });
-    commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } });
-  }
-
+@{
+  List<object> commands = new List<object>();
+  commands.Add(new { type = "Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } });
+  commands.Add(new { type = "Delete", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } });
+  commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } });
+  commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } });
+}
 <ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="400px">
     <e-grid-editSettings allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
     <e-grid-columns>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/razor
index 1303ee39d0..2de3e9c57f 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/razor
@@ -2,7 +2,6 @@
     List<object> commands = new List<object>();
     commands.Add(new { buttonOption = new { content = "Details", cssClass = "e-flat" } });
 }
-
 <div id="dialog" ></div>
 @Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("348px").Columns(col =>
 {
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/tagHelper
index 9b0bfdb60f..a2e9cb654b 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/customcommand/tagHelper
@@ -4,14 +4,14 @@
 }
 <div id="dialog" ></div>
 <ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="400px" commandClick="commandClick">
-        <e-grid-columns>
+    <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"></e-grid-column>
         <e-grid-column headerText="Commands" width="150" commands="commands"></e-grid-column>
-        </e-grid-columns>
-    </ejs-grid>
+    </e-grid-columns>
+</ejs-grid>
 <script>
     var dialogVisible = false;
     var dialog = new ej.popups.Dialog({
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/validation-dropdown-change/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-dropdown-change/razor
index 5cfd1e0565..3a7fece262 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/validation-dropdown-change/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-dropdown-change/razor
@@ -22,7 +22,6 @@
     var roleDropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = jobRole, Query = "new ej.data.Query()", Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "role", Text = "role" }, AllowFiltering = true,Change="valueChange" };
     var salaryDropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = salaryDetails, Query = "new ej.data.Query()", Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "Salary", Text = "Salary" }, AllowFiltering = true,Change="customFunction" };
 }
-
 @Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("348px").Columns(col =>
 {
    col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
@@ -42,39 +41,30 @@
                     return true;
                 else
                     formObject.rules['Salary']['required'][1] = 'Please enter valid Sales Salary >=5000 and< 15000';
-
                 break;
-
             case 'Support':
                 if ((salary >= 15000 && salary < 19000))
                     return true;
                 else
                     formObject.rules['Salary']['required'][1] = 'Please enter valid Support Salary >=15000 and < 19000';
-
                 break;
-
             case 'Engineer':
                 if ((salary >= 25000 && salary < 30000))
                     return true;
                 else
                     formObject.rules['Salary']['required'][1] = 'Please enter valid Engineer Salary between >=25000 and < 30000';
-
                 break;
-
             case 'Team Lead':
                 if ((salary >= 30000) && (salary < 50000))
                     return true;
                 else
                     formObject.rules['Salary']['required'][1] = 'Please enter valid TeamLead Salary >= 30000 and < 50000';
-
                 break;
-
             case 'Manager':
                 if ((salary >= 50000) && (salary < 70000))
                     return true;
                 else
                     formObject.rules['Salary']['required'][1] = 'Please enter valid Manager Salary >=50000 and < 70000';
-
                 break;
         }
         return false;
@@ -84,30 +74,20 @@
       window.role = args.value.toString();
       var formObject = grid.editModule.formObj.element['ej2_instances'][0];
         switch ( window.role) {
-
             case 'Sales':
                 formObject.rules['Salary']['required'][1] = 'Please enter valid Sales Salary >=5000 and< 15000';
-
                 break;
-
             case 'Support':
                 formObject.rules['Salary']['required'][1] = 'Please enter valid Support Salary >=15000 and < 19000';
-
                 break;
-
             case 'Engineer':
                 formObject.rules['Salary']['required'][1] = 'Please enter valid Engineer Salary between >=25000 and < 30000';
-
                 break;
-
             case 'Team Lead':
                 formObject.rules['Salary']['required'][1] = 'Please enter valid TeamLead Salary >= 30000 and < 50000';
-
                 break;
-
             case 'Manager':
                 formObject.rules['Salary']['required'][1] = 'Please enter valid Manager Salary >=50000 and < 70000';
-
                 break;
         }
     }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/validation-dropdown-change/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-dropdown-change/tagHelper
index da11a0619b..cf57b38ef1 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/validation-dropdown-change/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-dropdown-change/tagHelper
@@ -22,7 +22,6 @@
     var roleDropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = jobRole, Query = "new ej.data.Query()", Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "role", Text = "role" }, AllowFiltering = true,Change="valueChange" };
     var salaryDropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = salaryDetails, Query = "new ej.data.Query()", Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "Salary", Text = "Salary" }, AllowFiltering = true,Change="customFunction" };
 }
-
 <ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="273px" load="load" actionBegin="actionBegin" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
     <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
     <e-grid-columns>
@@ -44,41 +43,31 @@
                     return true;
                 else
                     formObject.rules['Salary']['required'][1] = 'Please enter valid Sales Salary >=5000 and< 15000';
-
                 break;
-
             case 'Support':
                 if ((salary >= 15000 && salary < 19000))
                     return true;
                 else
                     formObject.rules['Salary']['required'][1] = 'Please enter valid Support Salary >=15000 and < 19000';
-
                 break;
-
             case 'Engineer':
                 if ((salary >= 25000 && salary < 30000))
                     return true;
                 else
                     formObject.rules['Salary']['required'][1] = 'Please enter valid Engineer Salary between >=25000 and < 30000';
-
                 break;
-
             case 'Team Lead':
                 if ((salary >= 30000) && (salary < 50000))
                     return true;
                 else
                     formObject.rules['Salary']['required'][1] = 'Please enter valid TeamLead Salary >= 30000 and < 50000';
-
                 break;
-
             case 'Manager':
                 if ((salary >= 50000) && (salary < 70000))
                     return true;
                 else
                     formObject.rules['Salary']['required'][1] = 'Please enter valid Manager Salary >=50000 and < 70000';
-
                 break;
-
         }
         return false;
     }
@@ -87,30 +76,20 @@
       window.role = args.value.toString(); 
       var formObject = grid.editModule.formObj.element['ej2_instances'][0];
         switch ( window.role) {
-
             case 'Sales':
                 formObject.rules['Salary']['required'][1] = 'Please enter valid Sales Salary >=5000 and< 15000';
-
                 break;
-
             case 'Support':
                 formObject.rules['Salary']['required'][1] = 'Please enter valid Support Salary >=15000 and < 19000';
-
                 break;
-
             case 'Engineer':
                 formObject.rules['Salary']['required'][1] = 'Please enter valid Engineer Salary between >=25000 and < 30000';
-
                 break;
-
             case 'Team Lead':
                 formObject.rules['Salary']['required'][1] = 'Please enter valid TeamLead Salary >= 30000 and < 50000';
-
                 break;
-
             case 'Manager':
                 formObject.rules['Salary']['required'][1] = 'Please enter valid Manager Salary >=50000 and < 70000';
-
                 break;
         }
     }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/validation-numericcolumn/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-numericcolumn/razor
index e0cc63f249..d4161c9dbf 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/validation-numericcolumn/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-numericcolumn/razor
@@ -7,8 +7,8 @@
 }).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 grid = document.getElementById("grid").ej2_instances[0];
-        grid.getColumnByField("Freight").validationRules = { required: true, min: [customFunctionOne, 'Please enter a value greater than 1'], max: [customFunction, 'Please enter a value less than 1000'] };
+      var grid = document.getElementById("grid").ej2_instances[0];
+      grid.getColumnByField("Freight").validationRules = { required: true, min: [customFunctionOne, 'Please enter a value greater than 1'], max: [customFunction, 'Please enter a value less than 1000'] };
     }
     function customFunction(args) {
         return args['value'].length >= 5;
@@ -16,7 +16,6 @@
     function customFunction (args) {
       return (args['value'] <= 1000);
     }
-
     function customFunctionOne (args) {
        return (args['value'] >= 1);
     }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/validation-numericcolumn/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-numericcolumn/tagHelper
index c566a032ac..70423b57fb 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/edit/validation-numericcolumn/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/edit/validation-numericcolumn/tagHelper
@@ -18,7 +18,6 @@
     function customFunction (args) {
       return (args['value'] <= 1000);
     }
-
     function customFunctionOne (args) {
        return (args['value'] >= 1);
     }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-cell-row-spanning/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-cell-row-spanning/tagHelper
index 07753c4739..ce4e658b30 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-cell-row-spanning/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-cell-row-spanning/tagHelper
@@ -13,7 +13,6 @@
         if (args.item.id === 'grid_excelexport')
             grid.excelExport();
     }
-
     function queryCellInfo(args) {
         let data = args.data.OrderID;
         switch (data) {
@@ -32,7 +31,6 @@
                 break;
         }
     }
-
     function excelQueryCellInfo(args) {
         let data = args.data.OrderID;
         switch (data) {
diff --git a/ej2-asp-core-mvc/code-snippet/grid/excel-export/export-current/razor b/ej2-asp-core-mvc/code-snippet/grid/excel-export/export-current/razor
index 68a9c499a4..bbe71866e9 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/excel-export/export-current/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/excel-export/export-current/razor
@@ -1,5 +1,4 @@
 @{
-
   var dropDownData = new[] {
       new { value = "CurrentPage", text = "CurrentPage" },
       new { value = "AllPages", text = "AllPages" },
diff --git a/ej2-asp-core-mvc/code-snippet/grid/excel-export/export-current/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/excel-export/export-current/tagHelper
index e812e3ea38..f30e203a21 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/excel-export/export-current/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/excel-export/export-current/tagHelper
@@ -1,5 +1,4 @@
 @{
-
     var dropDownData = new[] {
         new { value = "CurrentPage", text = "CurrentPage" },
         new { value = "AllPages", text = "AllPages" },
diff --git a/ej2-asp-core-mvc/code-snippet/grid/excel-export/masterdetailgrid/razor b/ej2-asp-core-mvc/code-snippet/grid/excel-export/masterdetailgrid/razor
index 5bd27e96fc..baae363f2c 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/excel-export/masterdetailgrid/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/excel-export/masterdetailgrid/razor
@@ -12,10 +12,10 @@
 <div>
     @Html.EJS().Grid("detailGrid").AllowExcelExport(true).Columns(col =>
     {
-    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120px").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("ShipName").HeaderText("Ship Name").Width("130px").Add();
-    col.Field("ShipCountry").HeaderText("Ship Country").Width("120px").Add();
-    col.Field("ShipAddress").HeaderText("Ship Address").Format("C2").Width("120px").Add();
+        col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120px").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+        col.Field("ShipName").HeaderText("Ship Name").Width("130px").Add();
+        col.Field("ShipCountry").HeaderText("Ship Country").Width("120px").Add();
+        col.Field("ShipAddress").HeaderText("Ship Address").Format("C2").Width("120px").Add();
     }).Render()
 </div>
 <script>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/excel-export/show-hide/razor b/ej2-asp-core-mvc/code-snippet/grid/excel-export/show-hide/razor
index 29de3c4bfc..fcb3fd190c 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/excel-export/show-hide/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/excel-export/show-hide/razor
@@ -20,5 +20,4 @@
         grid.columns[1].visible = false;
         grid.columns[3].visible = true;
     }
-
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/filtering/excelfilter-choice-count/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/filtering/excelfilter-choice-count/tagHelper
index c23df5ecf5..738b9ea6ca 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/filtering/excelfilter-choice-count/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/filtering/excelfilter-choice-count/tagHelper
@@ -9,8 +9,7 @@
     </e-grid-columns>
 </ejs-grid>
 <script>
-    function actionBegin(args)
-    {
+    function actionBegin(args){
         if (args.requestType === "filterchoicerequest" || args.requestType === "filtersearchbegin") {
            args.filterChoiceCount = 3000;
        }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/filtering/filter-multiple-different-column/razor b/ej2-asp-core-mvc/code-snippet/grid/filtering/filter-multiple-different-column/razor
index 3673752e02..499f11b9eb 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/filtering/filter-multiple-different-column/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/filtering/filter-multiple-different-column/razor
@@ -6,7 +6,6 @@
     filterColumns.Add(new { field = "OrderID", matchCase = false, @operator = "lessThan", predicate = "or", value = "10250" });
     filterColumns.Add(new { field = "OrderID", matchCase = false, @operator = "notEqual", predicate = "or", value = "10262" });
 }
-
 @Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowFiltering(true).Height("273px").Columns(col =>
 {
    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
diff --git a/ej2-asp-core-mvc/code-snippet/grid/filtering/filter-multiple-same-column/razor b/ej2-asp-core-mvc/code-snippet/grid/filtering/filter-multiple-same-column/razor
index ff38320821..8d2a66218a 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/filtering/filter-multiple-same-column/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/filtering/filter-multiple-same-column/razor
@@ -3,7 +3,6 @@
     filterColumns.Add(new { field = "CustomerID", matchCase = false, @operator = "startswith", predicate = "or", value = "VINET" });
     filterColumns.Add(new { field = "CustomerID", matchCase = false, @operator = "startswith", predicate = "or", value = "HANAR"});
 }
-
 @Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowFiltering(true).Height("273px").Columns(col =>
 {
    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
diff --git a/ej2-asp-core-mvc/code-snippet/grid/grouping/group-caption-template/razor b/ej2-asp-core-mvc/code-snippet/grid/grouping/group-caption-template/razor
index a92073aa3f..ab893fdff7 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/grouping/group-caption-template/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/grouping/group-caption-template/razor
@@ -1,9 +1,9 @@
 @Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowGrouping().Height("330px").Columns(col =>
 {
     col.Field("OrderID").HeaderText("ID").Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("CustomerID").HeaderText("Name").Width("100").Add();
-    col.Field("ShipCity").HeaderText("City").Width("100").Add();
-    col.Field("Freight").HeaderText("Value").Width("100").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("100").Add();
+    col.Field("ShipCity").HeaderText("Ship City").Width("100").Add();
+    col.Field("ShipName").HeaderText("Ship Name").Width("100").Add();
 }).GroupSettings(group => { group.Columns(new string[] { "CustomerID", "ShipCity" }).ShowDropArea(false).CaptionTemplate("#captiontemplate"); }).Render()
 <script id="captiontemplate" type="text/x-template">
     <span class="groupItems">
diff --git a/ej2-asp-core-mvc/code-snippet/grid/grouping/group-caption-template/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/grouping/group-caption-template/tagHelper
index ee9dff6a77..729bc25bd5 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/grouping/group-caption-template/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/grouping/group-caption-template/tagHelper
@@ -3,8 +3,8 @@
     <e-grid-groupsettings captionTemplate="#captiontemplate" showDropArea="false" columns="@(new string[] { "CustomerID", "ShipCity"})"></e-grid-groupsettings>  
     <e-grid-columns>
         <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
-        <e-grid-column field="CustomerID" headerText="Name" width="150"></e-grid-column>       
-        <e-grid-column field="ShipCity" headerText="City" width="150"></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="Freight" headerText="Freight" format="C2" textAlign="Right" width="150"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/grouping/group-ungroup/razor b/ej2-asp-core-mvc/code-snippet/grid/grouping/group-ungroup/razor
index 6c58815ab1..3c5669e3aa 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/grouping/group-ungroup/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/grouping/group-ungroup/razor
@@ -26,7 +26,6 @@
     col.Field("CustomerID").HeaderText("Customer ID").Width("170").Add();
     col.Field("ShipCity").HeaderText("Ship City").Width("170").Add();
     col.Field("ShipName").HeaderText("Ship Name").Width("170").Add();
-
 }).GroupSettings(group => { group.ShowDropArea(false).Columns(new string[] { "CustomerID", "ShipCity" }); }).Render()
 <script>
     document.getElementById('groupButton').onclick = handleGroupAction;
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/edit-template-foreign/razor b/ej2-asp-core-mvc/code-snippet/grid/how-to/edit-template-foreign/razor
index 4784933031..ab2f764735 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/edit-template-foreign/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/how-to/edit-template-foreign/razor
@@ -6,7 +6,6 @@
     col.Field("ShipName").HeaderText("Ship Name").Width("160").Add();
     col.Field("ShipCountry").HeaderText("Ship Country").Width("150").EditType("dropdownedit").Add();
 }).Toolbar(new List<string>() {"Edit", "Update", "Cancel" }).EditSettings(edit => { edit.AllowEditing(true);}).Render()
-
 <script>
     var autoComplete;
     var employeeData = @Html.Raw(Json.Encode(ViewBag.foreignData));
@@ -27,5 +26,5 @@
             value: args.foreignKeyData[0][args.column.foreignKeyValue]
         });
        autoComplete.appendTo(args.element);
-}
+    }
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/edit-template-foreign/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/how-to/edit-template-foreign/tagHelper
index ed24fc215e..26f7cf0f65 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/how-to/edit-template-foreign/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/how-to/edit-template-foreign/tagHelper
@@ -12,7 +12,6 @@
 <script>
     var autoComplete;
     var employeeData = @Json.Serialize(ViewBag.foreignData);
-
     function create() { // to create input element
         return document.createElement('input');
     }
@@ -30,5 +29,5 @@
             value: args.foreignKeyData[0][args.column.foreignKeyValue]
         });
        autoComplete.appendTo(args.element);
-}
+    }
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/paging/add-query-string/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/paging/add-query-string/tagHelper
index 8c7c298790..5d7ffacecc 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/paging/add-query-string/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/paging/add-query-string/tagHelper
@@ -6,7 +6,7 @@
 <ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowPaging="true" height="325" actionBegin="onActionBegin"> 
     <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="CustomerID" headerText="Customer Name" width="150"></e-grid-column>
         <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="150"></e-grid-column>
         <e-grid-column field="Freight" headerText="Freight" format="C2" width="150"></e-grid-column>
     </e-grid-columns>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/paging/pager-template/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/paging/pager-template/tagHelper
index 2476a36b27..51337d723a 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/paging/pager-template/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/paging/pager-template/tagHelper
@@ -3,7 +3,7 @@
     </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="CustomerID" headerText="Customer Name" 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>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/current-page/razor b/ej2-asp-core-mvc/code-snippet/grid/print/current-page/razor
index b1029cf6a4..3a14249df9 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/current-page/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/current-page/razor
@@ -4,7 +4,6 @@
     @Html.EJS().DropDownList("dropdown").Index(0).DataSource(@ViewBag.dropdownData).Change("change").Render()
   </span>
 </div>
-
 @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();
@@ -12,9 +11,7 @@
   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("150").Add();
-
 }).AllowPaging().PageSettings(page => { page.PageSize(6); }).Toolbar(new List<string>() { "Print" }).Render()
-
 <script>
   function change(args) {
     document.getElementById('Grid').ej2_instances[0].printMode = args.value;
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/current-page/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/current-page/tagHelper
index 2199136bf4..b5cbb453d8 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/current-page/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/current-page/tagHelper
@@ -16,8 +16,7 @@
     </e-grid-columns>
 </ejs-grid>
 <script>
-    function change(args)
-    {
-    document.getElementById('Grid').ej2_instances[0].printMode = args.value;
+    function change(args){
+     document.getElementById('Grid').ej2_instances[0].printMode = args.value;
     }
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/external-btn/razor b/ej2-asp-core-mvc/code-snippet/grid/print/external-btn/razor
index b638a92107..5866c41c42 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/external-btn/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/external-btn/razor
@@ -8,13 +8,9 @@
   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("150").Add();
-
 }).AllowPaging().Render()
-
 <script>
-
   document.getElementById('printbtn').onclick = function () {
     document.getElementById('Print').ej2_instances[0].print();
   }
-
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/external-btn/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/external-btn/tagHelper
index 56842ed7a9..28bae6343a 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/external-btn/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/external-btn/tagHelper
@@ -4,17 +4,14 @@
 <ejs-grid id="Grid" dataSource="@ViewBag.DataSource"> 
     <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="CustomerID" headerText="Customer Name" width="150"></e-grid-column>
         <e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="130"></e-grid-column>
         <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="130"></e-grid-column>
         <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <script>
-
-document.getElementById('printbtn').onclick = function () {
-    document.getElementById('Grid').ej2_instances[0].print();
-}
-
+    document.getElementById('printbtn').onclick = function () {
+        document.getElementById('Grid').ej2_instances[0].print();
+    }
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/razor b/ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/razor
index 802089591f..dd31a14b0d 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/razor
@@ -8,7 +8,6 @@
         new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipAddress", HeaderText="ShipAddress", Width="90" },
       }
   };
-
   var ChildGrid = new Syncfusion.EJ2.Grids.Grid() { DataSource = (IEnumerable<object>)ViewBag.DataSource,
       QueryString = "EmployeeID",
       Columns = new List<Syncfusion.EJ2.Grids.GridColumn>
@@ -21,7 +20,6 @@
       ChildGrid = SecondChildGrid
     };
 }
-
 <div style="display: flex">
   <label style="padding: 3px 10px 26px 0;font-weight:bold">  Select Mode: </label>
   <span style="height:fit-content">
@@ -37,8 +35,7 @@
 
  }).Toolbar(new List<string>() { "Print" }).ChildGrid(ChildGrid).Render()
  <script>
-     function onModeChange(args) {
-         document.getElementById('HierarchyPrint').ej2_instances[0].hierarchyPrintMode = args.value;
-     };
-
+  function onModeChange(args) {
+    document.getElementById('HierarchyPrint').ej2_instances[0].hierarchyPrintMode = args.value;
+  };
  </script>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/tagHelper
index 003d4c9362..fe209032c9 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/tagHelper
@@ -12,7 +12,6 @@
             }
         };
 }
-
 @{
     var ChildGrid = new Syncfusion.EJ2.Grids.Grid()
         {
@@ -27,7 +26,6 @@
                 ChildGrid = SecondChildGrid
         };
 }
-
 <div style="display: flex">
     <label style="padding: 3px 10px 26px 0;font-weight:bold">  Select Mode: </label>
     <span style="height:fit-content">
@@ -38,14 +36,12 @@
     <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="Country" headerText="Country" 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>
     function onModeChange(args) {
         document.getElementById('HierarchyPrint').ej2_instances[0].hierarchyPrintMode = args.value;
     };
-   
 </script>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/razor b/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/razor
index 3846fca91b..691d91971b 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/razor
@@ -1,42 +1,39 @@
 <div>
     <B>Master Grid</B>
     @Html.EJS().Grid("masterGrid").DataSource((IEnumerable<object>)ViewBag.EmployeeData).SelectedRowIndex(1).Columns(col =>
-{
-   col.Field("ContactName").HeaderText("Customer Name").Width(150).Add();
-   col.Field("CompanyName").HeaderText("CompanyName").Width(150).Add();
-   col.Field("Address").HeaderText("Address").Width(150).Add();
-   col.Field("Country").HeaderText("Country").Width(130).Add();
-
-}).RowSelected("rowSelected").BeforePrint("beforePrint").Toolbar(new List<string>() { "Print" }).Render()
+    {
+    col.Field("ContactName").HeaderText("Customer Name").Width(150).Add();
+    col.Field("CompanyName").HeaderText("Company Name").Width(150).Add();
+    col.Field("Address").HeaderText("Address").Width(150).Add();
+    col.Field("Country").HeaderText("Country").Width(130).Add();
+    }).RowSelected("rowSelected").BeforePrint("beforePrint").Toolbar(new List<string>() { "Print" }).Render()
 </div>
 <p><div style="padding: 8px 0px 10px 0px;" class='e-statustext'> Showing orders of Customer:  <b id=key></b></div></p>
 <div>
-@Html.EJS().Grid("childGrid").Columns(col =>
-{
-   col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("ShipName").HeaderText("Ship Name").Width("120").Add();
-   col.Field("ShipAddress").HeaderText("Ship Address").Width("150").Add();
-   col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
-
-
-}).Render()
+    @Html.EJS().Grid("childGrid").Columns(col =>
+    {
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipName").HeaderText("Ship Name").Width("120").Add();
+    col.Field("ShipAddress").HeaderText("Ship Address").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+    }).Render()
 </div>
 <script>
-function rowSelected(args) {
-    let selectedRecord = args.data;
-    var data = @Html.Raw(Json.Encode(ViewBag.Datasource));
-    var employeeID = args.data.EmployeeID;
-    var detaildata = new ej.data.DataManager(data).executeLocal(new ej.data.Query().where("EmployeeID", "equal", employeeID, false));
-    var grid = document.getElementById("childGrid").ej2_instances[0];
-    grid.dataSource = new ej.data.DataManager(detaildata).dataSource.json;
-    document.getElementById("key").innerHTML = selectedRecord.ContactName;
-};
-function beforePrint(args) {
-    var customEle = document.createElement('div');
-    var grid = document.getElementById("childGrid").ej2_instances[0];
-    customEle.innerHTML = document.getElementsByClassName('e-statustext')[0].innerHTML + grid.element.innerHTML;
-    customEle.appendChild(document.createElement('br'));
-    args.element.append(customEle);
-};
+    function rowSelected(args) {
+        let selectedRecord = args.data;
+        var data = @Html.Raw(Json.Encode(ViewBag.Datasource));
+        var employeeID = args.data.EmployeeID;
+        var detaildata = new ej.data.DataManager(data).executeLocal(new ej.data.Query().where("EmployeeID", "equal", employeeID, false));
+        var grid = document.getElementById("childGrid").ej2_instances[0];
+        grid.dataSource = new ej.data.DataManager(detaildata).dataSource.json;
+        document.getElementById("key").innerHTML = selectedRecord.ContactName;
+    };
+    function beforePrint(args) {
+        var customElement = document.createElement('div');
+        var grid = document.getElementById("childGrid").ej2_instances[0];
+        customElement.innerHTML = document.getElementsByClassName('e-statustext')[0].innerHTML + grid.element.innerHTML;
+        customElement.appendChild(document.createElement('br'));
+        args.element.append(customElement);
+    };
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/tagHelper
index 4a36a45612..e0ef466bf0 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/tagHelper
@@ -1,5 +1,4 @@
 @using System.Text.Json;
-
 <div>
     <ejs-grid id="masterGrid" dataSource="@ViewBag.employeeDataSource" selectedRowIndex="1" toolbar="@(new List<string>() { "Print" })" rowSelected="rowSelected" beforePrint="beforePrint">
         <e-grid-columns>
@@ -11,7 +10,6 @@
     </ejs-grid>
 </div>
 <p><div style="padding: 8px 0px 10px 0px;" class='e-statustext'> Showing orders of Customer:  <b id=key></b></div></p>
-
 <ejs-grid id="childGrid">
     <e-grid-columns>
         <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
@@ -21,7 +19,6 @@
         <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <script>
     function rowSelected(args) {
         let selectedRecord = args.data;
@@ -32,12 +29,11 @@
         grid.dataSource = new ej.data.DataManager(detaildata).dataSource.json;
         document.getElementById("key").innerHTML = selectedRecord.ContactName;
     };
-
     function beforePrint(args) {
-        var customEle = document.createElement('div');
+        var customElement = document.createElement('div');
         var grid = document.getElementById("childGrid").ej2_instances[0];
-        customEle.innerHTML = document.getElementsByClassName('e-statustext')[0].innerHTML + grid.element.innerHTML;
-        customEle.appendChild(document.createElement('br'));
-        args.element.append(customEle);
+        customElement.innerHTML = document.getElementsByClassName('e-statustext')[0].innerHTML + grid.element.innerHTML;
+        customElement.appendChild(document.createElement('br'));
+        args.element.append(customElement);
     };
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/razor b/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/razor
index 958b1ad0b7..53148fe741 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/razor
@@ -5,16 +5,11 @@
 {
   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();
-
 }).AllowPaging().PageSettings(page => { page.PageSize(10); }).PrintMode(Syncfusion.EJ2.Grids.PrintMode.CurrentPage).ActionComplete("actionComplete").DataBound("dataBound").BeforePrint("beforePrint").Render()
-
 @Html.EJS().Chart("chart").Series(series =>
 {
-    series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(1).XName("OrderDate")
-    .YName("Freight").ColumnWidth(0.4).Marker(mr => mr.Visible(true)).Add();
-
-}).PrimaryXAxis(px =>px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
-.LabelFormat("MMMd")).PrimaryYAxis(py =>py.LabelFormat("{value}")).Title("Order Data").Render()
+    series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(1).XName("OrderDate").YName("Freight").ColumnWidth(0.4).Marker(mr => mr.Visible(true)).Add();
+}).PrimaryXAxis(px =>px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).LabelFormat("MMMd")).PrimaryYAxis(py =>py.LabelFormat("{value}")).Title("Order Data").Render()
 <script>
     function dataBound() {
         var chart = document.getElementById('chart').ej2_instances[0];
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/tagHelper
index b91d952122..fd965fc643 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/tagHelper
@@ -1,5 +1,5 @@
 <div style="padding-bottom:20px">
-<ejs-button id="print" cssClass="e-danger" content="Print"></ejs-button>
+ <ejs-button id="print" cssClass="e-danger" content="Print"></ejs-button>
 </div>
 <!-- Grid Component -->
 <ejs-grid id="HierarchyPrint" dataSource="@ViewBag.DataSource" allowPaging="true" printMode="CurrentPage"
@@ -10,7 +10,6 @@
         <e-grid-column field="Freight" width="120" format="C2" textAlign="Right"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <!-- Chart Component -->
 <h4>Chart</h4>
 <div>
@@ -24,7 +23,6 @@
         </e-series-collection>
     </ejs-chart>
 </div>
-
 <script>
     function dataBound() {
         var chart = document.getElementById('chart').ej2_instances[0];
@@ -37,19 +35,16 @@
         var grid = document.getElementById('HierarchyPrint').ej2_instances[0];
         grid.print();
     }
-
     function beforePrint(args) {
         var chartContainer = document.getElementById('chart').ej2_instances[0].element;
         var clonedChartContainer = chartContainer.cloneNode(true);
         args.element.appendChild(clonedChartContainer);
     }
-
     function actionComplete(args) {
         if (args.requestType === 'paging') {
             var chart = document.getElementById('chart').ej2_instances[0];
-
-           chart.series[0].dataSource = document.getElementById('HierarchyPrint').ej2_instances[0].getCurrentViewRecords();
-           chart.refresh();
+            chart.series[0].dataSource = document.getElementById('HierarchyPrint').ej2_instances[0].getCurrentViewRecords();
+            chart.refresh();
         }
     }
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-select/razor b/ej2-asp-core-mvc/code-snippet/grid/print/print-select/razor
index f7a7496d08..52f435a417 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/print-select/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-select/razor
@@ -4,7 +4,6 @@
    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
    col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
    col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
-
 }).AllowPaging().SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).PageSettings(page => page.PageSize(6)).Toolbar(new List<string>() { "Print" }).Render()
 <script>
    function beforePrint(args) {
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-select/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/print-select/tagHelper
index 12f97906c9..6a492d56a4 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/print-select/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-select/tagHelper
@@ -1,5 +1,4 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true'
-beforePrint="beforePrint" toolbar="@(new List<string>() { "Print" })">
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' beforePrint="beforePrint" toolbar="@(new List<string>() { "Print" })">
     <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
     <e-grid-pagesettings pageSize="6"></e-grid-pagesettings>
     <e-grid-columns>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-style/razor b/ej2-asp-core-mvc/code-snippet/grid/print/print-style/razor
index 196351c334..c73d8c3d04 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/print-style/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-style/razor
@@ -4,7 +4,6 @@
    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
    col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
    col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
-
 }).Toolbar(new List<string>() { "Print" }).Render()
 
 <style>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-style/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/print-style/tagHelper
index 06179efa8a..f161658496 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/print-style/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-style/tagHelper
@@ -7,15 +7,15 @@
     </e-grid-columns>
 </ejs-grid>
 <style>
-.e-grid .e-headercell {
-  background: #24a0ed !important;
-}
-.e-grid .e-row .e-rowcell {
-  background: #cbecff !important;
-}
-.e-grid .e-altrow .e-rowcell {
-  background: #e7d7f7 !important;
-}
+  .e-grid .e-headercell {
+    background: #24a0ed !important;
+  }
+  .e-grid .e-row .e-rowcell {
+    background: #cbecff !important;
+  }
+  .e-grid .e-altrow .e-rowcell {
+    background: #e7d7f7 !important;
+  }
 </style>
 <script>
     function beforePrint() {
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print/razor b/ej2-asp-core-mvc/code-snippet/grid/print/print/razor
index 1e350d417c..92eed4dcbb 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/print/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print/razor
@@ -5,5 +5,4 @@
    col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
    col.Field("Freight").HeaderText("Freight").Width("130").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
-
 }).AllowPaging().Toolbar(new List<string>() { "Print" }).Render()
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/print/tagHelper
index 185529820c..1106deb923 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/print/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print/tagHelper
@@ -1,7 +1,7 @@
 <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' toolbar="@(new List<string>() { "Print" })" > 
     <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="CustomerID" headerText="Customer Name" width="150"></e-grid-column>
         <e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="130"></e-grid-column>
         <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="130"></e-grid-column>
         <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/razor b/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/razor
index 2e5368d1f9..70dd0533b5 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/razor
@@ -4,9 +4,7 @@
     col.Field("CustomerID").HeaderText("Customer ID").Visible(false).Width("150").Add();
     col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
     col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
-
 }).Toolbar(new List<string>() { "Print" }).Render()
-
 <script>
     function toolbarClick() {
         const columns = document.getElementById('Grid').ej2_instances[0].columns;
diff --git a/ej2-asp-core-mvc/code-snippet/grid/scrolling/infinite-scroll-initialblocks/razor b/ej2-asp-core-mvc/code-snippet/grid/scrolling/infinite-scroll-initialblocks/razor
index df7fd70a97..85a5be81a9 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/scrolling/infinite-scroll-initialblocks/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/scrolling/infinite-scroll-initialblocks/razor
@@ -9,7 +9,6 @@
        new { text = "7", value = "7" },
        new { text = "8", value = "8" },
    };
-
 }
 <div style="display: flex">
     <label style="padding: 10px 10px 26px 0;font-weight:bold"> Select initialBlocks count:  </label>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/scrolling/infinite-scroll-initialblocks/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/scrolling/infinite-scroll-initialblocks/tagHelper
index 834848935d..5ebf3884c5 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/scrolling/infinite-scroll-initialblocks/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/scrolling/infinite-scroll-initialblocks/tagHelper
@@ -9,7 +9,6 @@
        new { text = "7", value = "7" },
        new { text = "8", value = "8" },
    };
-
 }
 <div style="display: flex">
     <label style="padding: 5px 10px 26px 0;font-weight:bold"> Select initialBlocks count:</label>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/search/clear-search/razor b/ej2-asp-core-mvc/code-snippet/grid/search/clear-search/razor
index 16ab138e9f..4aa8d6ff92 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/search/clear-search/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/search/clear-search/razor
@@ -1,17 +1,14 @@
 
 <div style="margin-bottom: 20px">
-@Html.EJS().Button("clear").Content("Clear Search").Render()
+ @Html.EJS().Button("clear").Content("Clear Search").Render()
 </div>
-
 @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).Height("350").Columns(col =>
 {
     col.Field("OrderID").HeaderText("Order ID").Width("160").Add();
     col.Field("CustomerID").HeaderText("Customer ID").Width("170").Add();
     col.Field("Freight").HeaderText("Freight").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("C2").Add();
     col.Field("OrderDate").HeaderText("Order Date").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
-
 }).SearchSettings(search => { search.Fields(new string[] { "CustomerID" }).Key("Ha").Operator("contains").IgnoreCase(true); }).Toolbar(new List<string>() { "Search" }).Render()
-
 <script>
     document.getElementById('clear').addEventListener('click', () => {
         var gridObj = document.getElementById("Grid").ej2_instances[0];
diff --git a/ej2-asp-core-mvc/code-snippet/grid/search/clear-search/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/search/clear-search/tagHelper
index cbb3b1484c..d6a8e186dd 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/search/clear-search/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/search/clear-search/tagHelper
@@ -10,10 +10,9 @@
         <e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <script>
-document.getElementById('clear').addEventListener('click', () => {
-    var gridObj = document.getElementById("Grid").ej2_instances[0];
-    gridObj.searchSettings.key ='';
-});
+    document.getElementById('clear').addEventListener('click', () => {
+        var gridObj = document.getElementById("Grid").ej2_instances[0];
+        gridObj.searchSettings.key ='';
+    });
 </script>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/search/column-formatting/razor b/ej2-asp-core-mvc/code-snippet/grid/search/column-formatting/razor
index efe2ede618..05ed2ad343 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/search/column-formatting/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/search/column-formatting/razor
@@ -1,12 +1,10 @@
 @Html.EJS().Grid("Search").DataSource((IEnumerable<object>)ViewBag.datasource).Height("350px").Columns(col =>
 {
     col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).Width("120").Add();
-    col.Field("CustomerID").HeaderText("CustomerID").Width("120").Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add();
     col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").Add();
-    col.Field("OrderDate").HeaderText("OrderDate").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Width("120").Add();
+    col.Field("OrderDate").HeaderText("Order Date").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Width("120").Add();
 }).Toolbar(new List<string>() { "Search" }).ActionBegin("actionBegin").KeyPressed("keyPressed").Render()
-
-
 <script>
     function actionBegin(args) {
         if (args.requestType == 'searching') {
@@ -45,7 +43,6 @@
             }, 200);
         }
     }
-
     function keyPressed(args) {
        if (
             args.key == 'Enter' &&
diff --git a/ej2-asp-core-mvc/code-snippet/grid/search/column-formatting/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/search/column-formatting/tagHelper
index b4f66e4a5d..b60a5788df 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/search/column-formatting/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/search/column-formatting/tagHelper
@@ -1,12 +1,11 @@
 <ejs-grid id="Search" dataSource="@ViewBag.datasource" toolbar="@(new List<string>() { "Search"})" height="350px" actionBegin="actionBegin" keyPressed="keyPressed"> 
     <e-grid-columns>
         <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
-        <e-grid-column field="CustomerID" headerText="Customer ID"  width="120"></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" format="C2" width="120"></e-grid-column>
-        <e-grid-column field="OrderDate" headerText="OrderDate" format='yMd' textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="120"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <script>
     function actionBegin(args) {
         if (args.requestType == 'searching') {
@@ -45,7 +44,6 @@
             }, 200);
         }
     }
-
     function keyPressed(args) {
        if (
             args.key == 'Enter' &&
diff --git a/ej2-asp-core-mvc/code-snippet/grid/search/external-btn/razor b/ej2-asp-core-mvc/code-snippet/grid/search/external-btn/razor
index 0593caf659..9ae149c2cf 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/search/external-btn/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/search/external-btn/razor
@@ -2,16 +2,13 @@
     @Html.EJS().TextBox("searchInput").Placeholder("Search text").Width("220px").Render()
     @Html.EJS().Button("SearchButton").Content("Search").CssClass("custom").Render()
 </div>
-
 @Html.EJS().Grid("Search").DataSource((IEnumerable<object>)ViewBag.datasource).Height("350px").Columns(col =>
 {
     col.Field("OrderID").HeaderText("Order ID").Width("160").Add();
     col.Field("CustomerID").HeaderText("Customer ID").Width("170").Add();
     col.Field("Freight").HeaderText("Freight").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("C2").Add();
     col.Field("OrderDate").HeaderText("Order Date").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
-
 }).Render()
-
 <script>
     document.getElementById('SearchButton').addEventListener('click', () => {
         var gridObj = document.getElementById("Search").ej2_instances[0];
diff --git a/ej2-asp-core-mvc/code-snippet/grid/search/external-btn/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/search/external-btn/tagHelper
index 3109716c70..fcea2e0123 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/search/external-btn/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/search/external-btn/tagHelper
@@ -4,7 +4,6 @@
     <ejs-button style="margin-left: 10px"  class="custom" id="SearchButton" content="Search" >
     </ejs-button>
 </div>
-
 <ejs-grid id="Search" dataSource="@ViewBag.datasource" height="350px"> 
     <e-grid-columns>
         <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
@@ -13,7 +12,6 @@
         <e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="150"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <script>
     document.getElementById('SearchButton').addEventListener('click', () => {
         var gridObj = document.getElementById("Search").ej2_instances[0];
@@ -21,7 +19,6 @@
         gridObj.search(searchText);
     });
 </script>
-
 <style>
     .custom {
         margin-left: 20px;
diff --git a/ej2-asp-core-mvc/code-snippet/grid/search/high-light-text/razor b/ej2-asp-core-mvc/code-snippet/grid/search/high-light-text/razor
index 420b8b0268..94018dc80e 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/search/high-light-text/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/search/high-light-text/razor
@@ -1,13 +1,10 @@
 @Html.EJS().Grid("Search").DataSource((IEnumerable<object>)ViewBag.datasource).Height("350px").Columns(col =>
-	{
-		col.Field("OrderID").HeaderText("Order ID").Width("160").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-		col.Field("CustomerID").HeaderText("Customer ID").Width("170").Add();
-		col.Field("ShipName").HeaderText("ShipName").Width("170").Add();
-		col.Field("ShipCountry").HeaderText("Ship Country").Width("170").Add();
-
-	}).Toolbar(new List<string>() { "Search" }).ActionBegin("onActionBegin").QueryCellInfo("onQueryCellInfo").Render();
-
-
+{
+	col.Field("OrderID").HeaderText("Order ID").Width("160").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+	col.Field("CustomerID").HeaderText("Customer ID").Width("170").Add();
+	col.Field("ShipName").HeaderText("Ship Name").Width("170").Add();
+	col.Field("ShipCountry").HeaderText("Ship Country").Width("170").Add();
+}).Toolbar(new List<string>() { "Search" }).ActionBegin("onActionBegin").QueryCellInfo("onQueryCellInfo").Render();
 <script>
     let key = '';
     function onActionBegin(args) {
@@ -18,24 +15,23 @@
     function onQueryCellInfo(args) {
         if (this.key !== '') {
             var cellContent = args.data[(args.column).field];
-                var parsedContent = cellContent.toString().toLowerCase();
+            var parsedContent = cellContent.toString().toLowerCase();
             if (parsedContent.includes(this.key)) {
-                    var i = 0;
-                    var searchStr = '';
-                    while (i < this.key.length) {
-                        var index = parsedContent.indexOf(this.key[i]);
+                var i = 0;
+                var searchStr = '';
+                while (i < this.key.length) {
+                    var index = parsedContent.indexOf(this.key[i]);
                     searchStr = searchStr + cellContent.toString()[index];
-                        i++;
-                    }
-                    args.cell.innerHTML = args.cell.innerText.replaceAll(
-                        searchStr,
-                        "<span class='customcss'>" + searchStr + '</span>'
-                    );
+                    i++;
                 }
+                args.cell.innerHTML = args.cell.innerText.replaceAll(
+                    searchStr,
+                    "<span class='customcss'>" + searchStr + '</span>'
+                );
+            }
         }
     }
 </script>
-
 <style>
 	.customcss {
 		background-color: yellow;
diff --git a/ej2-asp-core-mvc/code-snippet/grid/search/high-light-text/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/search/high-light-text/tagHelper
index 4593979835..6026511882 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/search/high-light-text/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/search/high-light-text/tagHelper
@@ -1,12 +1,11 @@
 <ejs-grid id="grid" dataSource='@ViewBag.datasource' toolbar="@(new List<string>() { "Search"})" height="350px" actionBegin="onActionBegin" queryCellInfo="onQueryCellInfo">
     <e-grid-columns>
         <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-grid-column>
-        <e-grid-column field='ShipCity' headerText='Ship City' width=100></e-grid-column>
-        <e-grid-column field='ShipCountry' headerText='Ship Country' width=100></e-grid-column>
+        <e-grid-column field='CustomerID' headerText='Customer ID' width=100></e-grid-column>
         <e-grid-column field='ShipName' headerText='Ship Name' width=120></e-grid-column>
+        <e-grid-column field='ShipCountry' headerText='Ship Country' width=100></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <script>
     let key = '';
     function onActionBegin(args) {
@@ -19,22 +18,21 @@
             var cellContent = args.data[(args.column).field];
                 var parsedContent = cellContent.toString().toLowerCase();
             if (parsedContent.includes(this.key)) {
-                    var i = 0;
-                    var searchStr = '';
-                    while (i < this.key.length) {
-                        var index = parsedContent.indexOf(this.key[i]);
+                var i = 0;
+                var searchStr = '';
+                while (i < this.key.length) {
+                    var index = parsedContent.indexOf(this.key[i]);
                     searchStr = searchStr + cellContent.toString()[index];
-                        i++;
-                    }
-                    args.cell.innerHTML = args.cell.innerText.replaceAll(
-                        searchStr,
-                        "<span class='customcss'>" + searchStr + '</span>'
-                    );
+                    i++;
                 }
+                args.cell.innerHTML = args.cell.innerText.replaceAll(
+                    searchStr,
+                    "<span class='customcss'>" + searchStr + '</span>'
+                );
+            }
         }
     }
 </script>
-
 <style>
     .customcss {
         background-color: yellow;
diff --git a/ej2-asp-core-mvc/code-snippet/grid/search/ignore-accent/razor b/ej2-asp-core-mvc/code-snippet/grid/search/ignore-accent/razor
index 4049883a0c..7a632abc12 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/search/ignore-accent/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/search/ignore-accent/razor
@@ -10,9 +10,7 @@
     col.Field("ProductName").HeaderText("Product Name").Width("170").Add();
     col.Field("QuantityPerUnit").HeaderText("Quantity Per Unit").Width("170").Add();
     col.Field("UnitsInStock").HeaderText("Units In Stock").Width("170").Add();
-
 }).Toolbar(new List<string>() { "Search" }).Render();
-
 <script>
     function onSwitchChange(args) { 
         var gridObj = document.getElementById("Search").ej2_instances[0];
diff --git a/ej2-asp-core-mvc/code-snippet/grid/search/ignore-accent/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/search/ignore-accent/tagHelper
index b8fed91f4f..129c7e2b99 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/search/ignore-accent/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/search/ignore-accent/tagHelper
@@ -12,7 +12,6 @@
         <e-grid-column field="UnitsInStock" headerText="Units In Stock" width="170"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <script>
     function onSwitchChange(args) {
         var gridObj = document.getElementById("Search").ej2_instances[0];
diff --git a/ej2-asp-core-mvc/code-snippet/grid/search/initial-search/razor b/ej2-asp-core-mvc/code-snippet/grid/search/initial-search/razor
index 7e66854925..4674e6346a 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/search/initial-search/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/search/initial-search/razor
@@ -4,5 +4,4 @@
     col.Field("CustomerID").HeaderText("Customer ID").Width("170").Add();
     col.Field("Freight").HeaderText("Freight").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("C2").Add();
     col.Field("OrderDate").HeaderText("Order Date").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
-
 }).SearchSettings(search => { search.Fields(new string[] { "CustomerID" }).Key("Ha").Operator("contains").IgnoreCase(true); }).Toolbar(new List<string>() { "Search" }).Render()
diff --git a/ej2-asp-core-mvc/code-snippet/grid/search/search-a-column/razor b/ej2-asp-core-mvc/code-snippet/grid/search/search-a-column/razor
index 6ca8fd02a1..3f96015757 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/search/search-a-column/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/search/search-a-column/razor
@@ -4,5 +4,4 @@
     col.Field("CustomerID").HeaderText("Customer ID").Width("170").Add();
     col.Field("ShipName").HeaderText("Ship Name").Width("170").Add();
     col.Field("ShipCity").HeaderText("Ship City").Width("140").Add();
-
 }).SearchSettings(search => { search.Fields(new string[] { "CustomerID", "ShipCity", "ShipName" }); }).Toolbar(new List<string>() { "Search" }).Render()
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/search/search-each-key/razor b/ej2-asp-core-mvc/code-snippet/grid/search/search-each-key/razor
index 65aac5523d..5ea3c7015c 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/search/search-each-key/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/search/search-each-key/razor
@@ -4,14 +4,12 @@
     col.Field("CustomerID").HeaderText("Customer ID").Width("170").Add();
     col.Field("ShipName").HeaderText("Ship Name").Width("170").Add();
     col.Field("ShipCity").HeaderText("Ship City").Width("140").Add();
-
 }).Created("created").Toolbar(new List<string>() { "Search" }).Render()
-
 <script>
-function created() {
-       var grid = document.getElementById("Grid").ej2_instances[0];
+    function created() {
+        var grid = document.getElementById("Grid").ej2_instances[0];
         document.getElementById(grid.element.id + "_searchbar").addEventListener('keyup', () => {
-                grid.search(event.target.value)
+            grid.search(event.target.value)
         });
     }
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/search/search-each-key/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/search/search-each-key/tagHelper
index aa51c57c68..07d6060d7b 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/search/search-each-key/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/search/search-each-key/tagHelper
@@ -6,12 +6,11 @@
         <e-grid-column field="ShipName" headerText="Ship Name"  width="150"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <script>
-function created() {
-       var grid = document.getElementById("Grid").ej2_instances[0];
+    function created() {
+        var grid = document.getElementById("Grid").ej2_instances[0];
         document.getElementById(grid.element.id + "_searchbar").addEventListener('keyup', () => {
-                grid.search(event.target.value)
+            grid.search(event.target.value)
         });
     }
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/search/search-multiple-keywords/razor b/ej2-asp-core-mvc/code-snippet/grid/search/search-multiple-keywords/razor
index 9d18405439..b4d4889386 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/search/search-multiple-keywords/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/search/search-multiple-keywords/razor
@@ -1,18 +1,15 @@
 @Html.EJS().Grid("Search").DataSource((IEnumerable < object >)ViewBag.datasource).Height("350px").Columns(col => {
-    col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).Width("120").Add();
-    col.Field("CustomerID").HeaderText("CustomerID").Width("120").Add();
+    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add();
     col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").Add();
-    col.Field("ShipCity").HeaderText("ShipCity").Width("120").Add();
-
+    col.Field("ShipCity").HeaderText("Ship City").Width("120").Add();
 }).Toolbar(new List < string > () { "Search" }).ActionBegin("actionBegin").ActionComplete("actionComplete").Render()
-
 <script>
     var values;
     var key = '';
     var refresh = false;
     var removeQuery = false;
     var valueAssign = false;
-
     function actionBegin(args) {
         if (args.requestType == 'searching') {
             var grid = document.getElementById("Search").ej2_instances[0];
@@ -33,7 +30,6 @@
                         }
                     });
                 });
-
                 grid.query = new ej.data.Query().where(predicate);
                 grid.searchSettings.key = '';
                 this.valueAssign = true;
@@ -46,7 +42,6 @@
         if (args.requestType === 'refresh') {
             var grid = document.getElementById("Search").ej2_instances[0];
             var searchBar = document.querySelector('#' + grid.element.id + '_searchbar');
-
             if (searchBar) {
                 if (this.valueAssign) {
                     searchBar.value = this.values || '';
diff --git a/ej2-asp-core-mvc/code-snippet/grid/search/search-multiple-keywords/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/search/search-multiple-keywords/tagHelper
index 06c8f5a02d..a064627729 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/search/search-multiple-keywords/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/search/search-multiple-keywords/tagHelper
@@ -1,19 +1,17 @@
 <ejs-grid id="Search" dataSource="@ViewBag.DataSource" height="350px" toolbar="@(new List<string>() {"Search" })" actionBegin="actionBegin" actionComplete="actionComplete">
   <e-grid-columns>
-    <e-grid-column field="OrderID" headerText="Order ID"  isPrimaryKey="true" width="120"></e-grid-column>
+    <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120"></e-grid-column>
     <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
     <e-grid-column field="Freight" headerText="Freight" width="150" format="C2"></e-grid-column>
-    <e-grid-column field="ShipCity" headerText="ShipCity" width="120"></e-grid-column>
+    <e-grid-column field="ShipCity" headerText="Ship City" width="120"></e-grid-column>
   </e-grid-columns>
 </ejs-grid>
-
 <script>
     var values;
     var key = '';
     var refresh = false;
     var removeQuery = false;
     var valueAssign = false;
-
     function actionBegin(args) {
         if (args.requestType == 'searching') {
             var grid = document.getElementById("Search").ej2_instances[0];
@@ -34,7 +32,6 @@
                         }
                     });
                 });
-
                 grid.query = new ej.data.Query().where(predicate);
                 grid.searchSettings.key = '';
                 this.valueAssign = true;
diff --git a/ej2-asp-core-mvc/code-snippet/grid/search/search-operators/razor b/ej2-asp-core-mvc/code-snippet/grid/search/search-operators/razor
index 353d4c6947..c30709c217 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/search/search-operators/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/search/search-operators/razor
@@ -1,21 +1,19 @@
-
+@{
+  ViewBag.dropdownData = new string[] { "contains", "startswith", "endswith","wildcard","like","equal","notequal"  };
+}
 <div style="display: flex">
 	<label style="padding: 7px 10px 26px 0"> Change the search operators: </label>
 	<span style="height:fit-content">
 		@Html.EJS().DropDownList("search").Width("180px").Index(0).DataSource(@ViewBag.dropdownData).Change("change").Render()
 	</span>
 </div>
-
 @Html.EJS().Grid("Search").DataSource((IEnumerable<object>)ViewBag.datasource).Height("350px").Columns(col =>
 {
     col.Field("OrderID").HeaderText("Order ID").Width("160").Add();
     col.Field("CustomerID").HeaderText("Customer ID").Width("170").Add();
-    col.Field("ShipName").HeaderText("ShipName").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("C2").Add();
+    col.Field("ShipName").HeaderText("Ship Name").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("C2").Add();
     col.Field("ShipCountry").HeaderText("Ship Country").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
-
 }).SearchSettings(search => { search.Operator("contains"); }).Toolbar(new List<string>() { "Search" }).Render()
-
-
 <script>
 	function change(args) {
 		var grid = document.getElementById("Search").ej2_instances[0];
diff --git a/ej2-asp-core-mvc/code-snippet/grid/search/search-operators/search-operators.cs b/ej2-asp-core-mvc/code-snippet/grid/search/search-operators/search-operators.cs
index 1fdcb35924..ee03ef44d2 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/search/search-operators/search-operators.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/search/search-operators/search-operators.cs
@@ -1,10 +1,7 @@
- public IActionResult Index()
- {
-   var orders = OrdersDetails.GetAllRecords();
-   ViewBag.datasource = orders;       
-  ViewBag.dropdownData = new string[] { "contains", "startswith", "endswith","wildcard","like","equal","notequal"  };
-     
-   return View();
- }
+public ActionResult Index()
+{
+  ViewBag.datasource = OrdersDetails.GetAllRecords();       
+  return View();
+}
 
     
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/search/search-operators/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/search/search-operators/tagHelper
index 4802b7e534..fd8fbe2c07 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/search/search-operators/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/search/search-operators/tagHelper
@@ -1,21 +1,21 @@
-
+@{
+    ViewBag.dropDownData = new string[] { "contains", "startswith", "endswith", "wildcard", "like", "equal", "notequal" };
+}
 <div style="display: flex"></div>
-    <label style="padding: 10px 10px 26px 0"> Change the search operators: </label>
+    <label style="padding: 10px 10px 26px 0;font-weight: bold"> Change the search operators: </label>
     <span style="height:fit-content">
-    <ejs-dropdownlist id="dropdown" dataSource="@ViewBag.dropdownData" index="0" change="change"></ejs-dropdownlist>
-</span>
+      <ejs-dropdownlist id="dropdown" dataSource="@ViewBag.dropdownData" Width="180px" index="0" change="change"></ejs-dropdownlist>
+    </span>
 </div>
-
 <ejs-grid id="Search" dataSource="@ViewBag.datasource" toolbar="@(new List<string>() { "Search"})" height="350px"> 
     <e-grid-searchSettings operator="contains"></e-grid-searchSettings>
     <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="140"></e-grid-column>
-        <e-grid-column field="ShipName" headerText="ShipName" textAlign="Right" format="C2" width="120"></e-grid-column>
+        <e-grid-column field="ShipName" headerText="Ship Name" textAlign="Right" format="C2" width="120"></e-grid-column>
         <e-grid-column field="ShipCountry" headerText="ShipCountry" format='yMd' textAlign="Right" width="140"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <script>
 	function change(args) {
 		var grid = document.getElementById("Search").ej2_instances[0];
diff --git a/ej2-asp-core-mvc/code-snippet/grid/search/search/razor b/ej2-asp-core-mvc/code-snippet/grid/search/search/razor
index 6e0513cee5..580d26b0b7 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/search/search/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/search/search/razor
@@ -4,5 +4,4 @@
   col.Field("CustomerID").HeaderText("Customer ID").Width("170").Add();
   col.Field("Freight").HeaderText("Freight").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("C2").Add();
   col.Field("OrderDate").HeaderText("Order Date").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
-
 }).Toolbar(new List<string>() { "Search" }).Render();
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/selection/cell-events/razor b/ej2-asp-core-mvc/code-snippet/grid/selection/cell-events/razor
index cce30de9a6..c21ced9fbc 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/selection/cell-events/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/selection/cell-events/razor
@@ -8,25 +8,21 @@
   col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
 }).AllowPaging().AllowSelection().CellDeselecting("cellDeselecting").CellDeselected("cellDeselected").CellSelecting("cellSelecting").CellSelected("cellSelected").SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple).Mode(Syncfusion.EJ2.Grids.SelectionMode.Cell)).Render()
 <script>
-    function cellSelected(args)
-    {
+    function cellSelected(args) {
         document.getElementById("message").innerText = ` Trigger cellSelected`;
         args.currentCell.style.backgroundColor = 'rgb(96, 158, 101)';
     }
-    function cellSelecting(args)
-    {
+    function cellSelecting(args) {
         document.getElementById("message").innerText = `Trigger cellSelecting`;
         if (args.data.ShipCountry == 'France')
             args.cancel = true;
     }
 
-    function cellDeselected(args)
-    {
+    function cellDeselected(args) {
         document.getElementById("message").innerText = `Trigger cellDeselected`;
         args.cells[0].style.backgroundColor = 'rgb(245, 69, 69)';
     }
-    function cellDeselecting(args)
-    {
+    function cellDeselecting(args) {
         document.getElementById("message").innerText = `Trigger cellDeselecting`;
         args.cells[0].style.color = 'rgb(253, 253, 253)';
     }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/selection/cell-events/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/selection/cell-events/tagHelper
index b7ae22724d..fe13b396a0 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/selection/cell-events/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/selection/cell-events/tagHelper
@@ -10,25 +10,21 @@
     </e-grid-columns>
 </ejs-grid>
 <script>
-    function cellSelected(args)
-    {
+    function cellSelected(args) {
         document.getElementById("message").innerText = ` Trigger cellSelected`;
         args.currentCell.style.backgroundColor = 'rgb(96, 158, 101)';
     }
-    function cellSelecting(args)
-    {
+    function cellSelecting(args) {
         document.getElementById("message").innerText = `Trigger cellSelecting`;
         if (args.data.ShipCountry == 'France')
             args.cancel = true;
     }
 
-    function cellDeselected(args)
-    {
+    function cellDeselected(args) {
         document.getElementById("message").innerText = `Trigger cellDeselected`;
         args.cells[0].style.backgroundColor = 'rgb(245, 69, 69)';
     }
-    function cellDeselecting(args)
-    {
+    function cellDeselecting(args) {
         document.getElementById("message").innerText = `Trigger cellDeselecting`;
         args.cells[0].style.color = 'rgb(253, 253, 253)';
     }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/selection/column-events/razor b/ej2-asp-core-mvc/code-snippet/grid/selection/column-events/razor
index 9373c484c3..71d27cf660 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/selection/column-events/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/selection/column-events/razor
@@ -9,24 +9,21 @@
 }).AllowPaging().ColumnDeselecting("columnDeselecting").ColumnDeselected("columnDeselected").ColumnSelecting("columnSelecting").ColumnSelected("columnSelected").SelectionSettings(select => select.AllowColumnSelection(true).Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).Render()
 <script>
     function columnSelected(args) {
-    document.getElementById("message").innerText = `Trigger columnSelected`;
-    args.headerCell.style.backgroundColor = 'rgb(96, 158, 101)';
+        document.getElementById("message").innerText = `Trigger columnSelected`;
+        args.headerCell.style.backgroundColor = 'rgb(96, 158, 101)';
     }
-
     function columnSelecting(args) {
     document.getElementById("message").innerText = `Trigger columnSelecting`;
-    if (args.column.field == "CustomerID")
-        args.cancel = true;
+        if (args.column.field == "CustomerID")
+            args.cancel = true;
     }
-
     function columnDeselected(args) {
-    document.getElementById("message").innerText = `Trigger columnDeselected`;
-    args.headerCell.style.backgroundColor = 'rgb(245, 69, 69)';
+        document.getElementById("message").innerText = `Trigger columnDeselected`;
+        args.headerCell.style.backgroundColor = 'rgb(245, 69, 69)';
     }
-
     function columnDeselecting(args) {
-    document.getElementById("message").innerText = `Triggercolumn Deselecting`;
-    if (args.column.field == "Freight")
-        args.cancel = true;
+        document.getElementById("message").innerText = `Triggercolumn Deselecting`;
+        if (args.column.field == "Freight")
+            args.cancel = true;
     }
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/selection/column-events/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/selection/column-events/tagHelper
index 66ecab31da..2e853934a0 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/selection/column-events/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/selection/column-events/tagHelper
@@ -11,24 +11,21 @@
 </ejs-grid>
 <script>
     function columnSelected(args) {
-    document.getElementById("message").innerText = `Trigger columnSelected`;
-    args.headerCell.style.backgroundColor = 'rgb(96, 158, 101)';
+        document.getElementById("message").innerText = `Trigger columnSelected`;
+        args.headerCell.style.backgroundColor = 'rgb(96, 158, 101)';
     }
-
     function columnSelecting(args) {
-    document.getElementById("message").innerText = `Trigger columnSelecting`;
-    if (args.column.field == "CustomerID")
-        args.cancel = true;
+        document.getElementById("message").innerText = `Trigger columnSelecting`;
+        if (args.column.field == "CustomerID")
+            args.cancel = true;
     }
-
     function columnDeselected(args) {
-    document.getElementById("message").innerText = `Trigger columnDeselected`;
-    args.headerCell.style.backgroundColor = 'rgb(245, 69, 69)';
+        document.getElementById("message").innerText = `Trigger columnDeselected`;
+        args.headerCell.style.backgroundColor = 'rgb(245, 69, 69)';
     }
-
     function columnDeselecting(args) {
-    document.getElementById("message").innerText = `Triggercolumn Deselecting`;
-    if (args.column.field == "Freight")
-        args.cancel = true;
+        document.getElementById("message").innerText = `Triggercolumn Deselecting`;
+        if (args.column.field == "Freight")
+            args.cancel = true;
     }
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/selection/row-selection-events/razor b/ej2-asp-core-mvc/code-snippet/grid/selection/row-selection-events/razor
index 5c04f8671e..604efab438 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/selection/row-selection-events/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/selection/row-selection-events/razor
@@ -8,37 +8,28 @@
   col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
 }).AllowPaging().AllowSelection().RowDeselecting("rowDeselecting").RowDeselected("rowDeselected").RowSelecting("rowSelecting").RowSelected("rowSelected").SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple).Mode(Syncfusion.EJ2.Grids.SelectionMode.Row)).Render()
 <script>
-   function rowSelecting(args)
-   {
-      if (args.data.CustomerID == 'VINET')
-      {
+   function rowSelecting(args) {
+      if (args.data.CustomerID == 'VINET') {
          document.getElementById("message").innerText = `Trigger rowSelecting`;
          args.cancel = true;
       }
       else
        document.getElementById("message").innerText=''; 
    }
-   function rowSelected(args)
-   {
-   
-      if (args.data.Freight > '10' || args.data.Freight <= '140')
-      {
+   function rowSelected(args) {
+      if (args.data.Freight > '10' || args.data.Freight <= '140') {
          document.getElementById("message").innerText = ` Trigger rowSelected`;
          args.row.style.backgroundColor = 'rgb(96, 158, 101)'; 
       }
    }
-   function rowDeselected(args)
-   {
-      if (args.data.Freight <= '10')
-      {
+   function rowDeselected(args) {
+      if (args.data.Freight <= '10') {
          document.getElementById("message").innerText = `Trigger rowDeselected`;
          args.row.style.backgroundColor = 'red';
       }
    }
-   function rowDeselecting(args)
-   {
-      if (args.data.Freight > '140')
-      {
+   function rowDeselecting(args) {
+      if (args.data.Freight > '140') {
          document.getElementById("message").innerText = `Trigger rowDeselecting`;
          args.row.style.backgroundColor = 'yellow';
       }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/selection/row-selection-events/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/selection/row-selection-events/tagHelper
index 9941c6ba53..67b9d79162 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/selection/row-selection-events/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/selection/row-selection-events/tagHelper
@@ -10,37 +10,28 @@
     </e-grid-columns>
 </ejs-grid>
 <script>
-   function rowSelecting(args)
-   {
-      if (args.data.CustomerID == 'VINET')
-      {
+   function rowSelecting(args) {
+      if (args.data.CustomerID == 'VINET') {
          document.getElementById("message").innerText = `Trigger rowSelecting`;
          args.cancel = true;
       }
       else
        document.getElementById("message").innerText=''; 
    }
-   function rowSelected(args)
-   {
-   
-      if (args.data.Freight > '10' || args.data.Freight <= '140')
-      {
+   function rowSelected(args) {
+      if (args.data.Freight > '10' || args.data.Freight <= '140') {
          document.getElementById("message").innerText = ` Trigger rowSelected`;
          args.row.style.backgroundColor = 'rgb(96, 158, 101)'; 
       }
    }
-   function rowDeselected(args)
-   {
-      if (args.data.Freight <= '10')
-      {
+   function rowDeselected(args) {
+      if (args.data.Freight <= '10') {
          document.getElementById("message").innerText = `Trigger rowDeselected`;
          args.row.style.backgroundColor = 'red';
       }
    }
-   function rowDeselecting(args)
-   {
-      if (args.data.Freight > '140')
-      {
+   function rowDeselecting(args) {
+      if (args.data.Freight > '140') {
          document.getElementById("message").innerText = `Trigger rowDeselecting`;
          args.row.style.backgroundColor = 'yellow';
       }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/razor b/ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/razor
index 1882f42609..632dde07ff 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/razor
@@ -4,9 +4,7 @@
    col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add();
    col.Field("OrderDate").HeaderText("Order Date").Format("yMd").SortComparer("sortComparer").Width("130").Add();
    col.Field("ShipCountry").HeaderText("ShipCountry").Width("150").Add();
-
 }).ActionBegin("actionBegin").Render()
-
 <script type="text/javascript">
     var action;
     function actionBegin(args) {
diff --git a/ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/tagHelper
index f226b6bbfa..0e08c8c367 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/tagHelper
@@ -1,7 +1,6 @@
 @{
     Object sortComparer = "sortComparer";
 }
-
 <ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowSorting="true" actionBegin="actionBegin">
     <e-grid-filterSettings type="Excel"></e-grid-filterSettings>
     <e-grid-columns>
@@ -11,7 +10,6 @@
         <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
 <script type="text/javascript">
     var action;
     function actionBegin(args) {
diff --git a/ej2-asp-core-mvc/code-snippet/grid/sorting/sorting-prevent/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/sorting/sorting-prevent/tagHelper
index 4abe55dd3b..6b3905ba52 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/sorting/sorting-prevent/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/sorting/sorting-prevent/tagHelper
@@ -1,4 +1,4 @@
-<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowSorting="true" height="348px" >
+<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowSorting="true" height="348px">
     <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" width="150" allowSorting="false"></e-grid-column>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/sorting/sorting-sort-remove/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/sorting/sorting-sort-remove/tagHelper
index 9b78dc1fd9..e7394a1b0c 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/sorting/sorting-sort-remove/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/sorting/sorting-sort-remove/tagHelper
@@ -9,7 +9,6 @@
     List<object> sortOptions = new List<object>();
     sortOptions.Add(new { field = "CustomerID", direction = "Ascending" });
     sortOptions.Add(new { field = "ShipName", direction = "Descending" });
-
 }
 <div style="padding-bottom:20px">
     <div style="display: flex">
diff --git a/ej2-asp-core-mvc/code-snippet/grid/state-persist/column-persist/razor b/ej2-asp-core-mvc/code-snippet/grid/state-persist/column-persist/razor
index 050cc4abe9..3dfed44a15 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/state-persist/column-persist/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/state-persist/column-persist/razor
@@ -5,10 +5,10 @@
 <div id="message" class="message"></div>
 @Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowFiltering(true).EnablePersistence(false).Height("348px").Columns(col =>
 {
-col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-col.Field("CustomerID").HeaderText("Customer Name").Width("170").HeaderTemplate("#customertemplate").Add();
-col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").Template("#template").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+  col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+  col.Field("CustomerID").HeaderText("Customer Name").Width("170").HeaderTemplate("#customertemplate").Add();
+  col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+  col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").Template("#template").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
 }).AllowPaging(true).Render()
 <script>
     document.getElementById('save').addEventListener('click', function () {
@@ -48,7 +48,6 @@ col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").Template("#
         font-size: 16px;
         padding-bottom: 10px;
     }
-
     .custom {
         margin-left: 10px;
     }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/state-persist/column-persist/taghelper b/ej2-asp-core-mvc/code-snippet/grid/state-persist/column-persist/taghelper
index 51e4dc0396..9c8c403308 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/state-persist/column-persist/taghelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/state-persist/column-persist/taghelper
@@ -49,7 +49,6 @@
         font-size: 16px;
         padding-bottom: 20px;
     }
-
     .custom {
         margin-left: 20px;
     }
diff --git a/ej2-asp-core-mvc/code-snippet/grid/toolbar/customize-toolbar/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/toolbar/customize-toolbar/tagHelper
index a7dd832a1d..ba301ea6f3 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/toolbar/customize-toolbar/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/toolbar/customize-toolbar/tagHelper
@@ -2,8 +2,8 @@
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings>
    <e-grid-columns>
         <e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column>
-        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column>
-        <e-grid-column field="ShipCity" headerText="ShipCity" width="120"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer Name" type="string" width="140"></e-grid-column>
+        <e-grid-column field="ShipCity" headerText="Ship City" width="120"></e-grid-column>
         <e-grid-column field="ShipName" headerText="Ship Name" width="140"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/toolbar/enable-disable/razor b/ej2-asp-core-mvc/code-snippet/grid/toolbar/enable-disable/razor
index 6d6534ca05..727be1330a 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/toolbar/enable-disable/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/toolbar/enable-disable/razor
@@ -19,6 +19,5 @@
     {       
         var grid = document.getElementById("grid").ej2_instances[0];
         grid.toolbarModule.enableItems(['grid_Collapse', 'grid_Expand'], args.checked);
-        
     }
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/toolbar/enable-disable/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/toolbar/enable-disable/tagHelper
index 8a3b79626e..87f5cd18ef 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/toolbar/enable-disable/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/toolbar/enable-disable/tagHelper
@@ -1,12 +1,12 @@
 <div style="padding-bottom: 20px; display: flex">
    <label style="margin-right:5px;margin-top: -3px;font-weight: bold;">Enable or disable toolbar items</label>
-    <ejs-switch id="switch" checked="true" change="onSwitchChange"></ejs-switch>
+   <ejs-switch id="switch" checked="true" change="onSwitchChange"></ejs-switch>
 </div>
 <ejs-grid id="grid" dataSource="@ViewBag.dataSource" toolbarClick="toolbarClick" toolbar="@( new List<string>(){"Expand","Collapse"})" height="348px" allowGrouping="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" width="140"></e-grid-column>
-        <e-grid-column field="ShipCity" headerText="ShipCity" width="120"></e-grid-column>
+        <e-grid-column field="ShipCity" headerText="Ship City" width="120"></e-grid-column>
         <e-grid-column field="ShipName" headerText="Ship Name" width="140"></e-grid-column>
     </e-grid-columns>
     <e-grid-groupSettings columns="@(new string[] { "CustomerID"})"></e-grid-groupSettings>
@@ -21,6 +21,5 @@
     {       
         var grid = document.getElementById("grid").ej2_instances[0];
         grid.toolbarModule.enableItems(['grid_Collapse', 'grid_Expand'], args.checked);
-        
     }
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-chooser.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-chooser.md
index 4be922bc88..0e6c42285f 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-chooser.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-chooser.md
@@ -120,6 +120,4 @@ Here is an example that demonstrates the usage of the `IgnoreAccent` property to
 {% highlight c# tabtitle="Columnchooser.cs" %}
 {% include code-snippet/grid/columns/columnchooser-diacritics/columnchooser.cs %}
 {% endhighlight %}
-{% endtabs %}
-
-![Diacritics searching in column chooser](../images/columns/Column-headertext.png)
+{% endtabs %}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-headers.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-headers.md
index 7c9312efcb..fde790d936 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-headers.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-headers.md
@@ -18,7 +18,7 @@ The `HeaderText` feature proves particularly beneficial when there is a need for
 
 By default, the header text of a column in Grid is displayed from the column's `Field` value. However, you can easily override the default header title and provide a custom header text for the column using the `HeaderText` property. 
 
-To enable the `HeaderText` property, you simply need to define it in the **e-grid-column** element. The following example demonstrates how to enable header text for a  Grid column.
+To enable the `HeaderText` property, you simply need to define it in the column element. The following example demonstrates how to enable header text for a Grid column.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -148,7 +148,7 @@ You can use CSS to override the default height of the **.e-grid .e-headercell**
 
 To change the height of the header dynamically, you can use the `getHeaderContent` method to get the header content element of the Syncfusion<sup style="font-size:70%">&reg;</sup> Grid. Then, you can use the **querySelectorAll** method to get all the header cell elements with the class **e-headercell**. Finally, you can loop through each header cell element and set its style property to adjust the height.
 
-The following example demonstrates how to dynamically change the height of the header based on a Button `click` event.
+The following example demonstrates how to dynamically change the height of the header based on a [Button](https://ej2.syncfusion.com/aspnetmvc/documentation/button/getting-started) click event.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -237,7 +237,7 @@ Follow the below steps to change the orientation of the header text in Grid:
 
 **Step 1**: **Create a CSS class with orientation style for grid header cell**
 
-To `rotate` the header text, you can create a CSS class with the `transform` property that rotates the header text 90 degrees. This class will be added to the header cell using the `CustomAttributes` property.
+To `rotate` the header text, you can create a CSS class with the `Transform` property that rotates the header text 90 degrees. This class will be added to the header cell using the `CustomAttributes` property.
 
 ```css
 .orientationcss .e-headercelldiv {
@@ -288,7 +288,7 @@ The following example demonstrates how to change the orientation of the **Freigh
 
 Custom tooltips for headers provide additional information when hovering over a column header in the Syncfusion<sup style="font-size:70%">&reg;</sup> Grid. This can be useful in situations where there is not enough space to display all of the information related to a column, or when there is additional context that may be helpful.
 
-To enable custom tooltips for headers, you can use the `BeforeRender` event of the Grid component. This event is triggered for each header cell before it is rendered, allowing you to add a custom tooltip to the header cell using `tooltip` component.
+To enable custom tooltips for headers, you can use the `BeforeRender` event of the Grid component. This event is triggered for each header cell before it is rendered, allowing you to add a custom tooltip to the header cell using [Tooltip](https://ej2.syncfusion.com/aspnetmvc/documentation/tooltip/getting-started) component.
 
 Here's an example of how to use the `BeforeRender` event to add a custom tooltip to a header cell:
 
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-rendering.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-rendering.md
index 578b05ad54..422fe48cbb 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-rendering.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-rendering.md
@@ -164,9 +164,9 @@ In this example, we have a grid with columns **Food Name**, **Protein**, **Fat**
 
 To display serial number in the grid for every rows, you can use the [RowDataBound](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_RowDataBound) event. The `RowDataBound` event is triggered for each row in the grid when the data is bound to the grid.
 
-Within the event handler, the [pagesize](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_PageSize) and [currentPage](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_CurrentPage) index can be obtained from the grid's [PageSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html) property. Using these values, the serial number can be calculated based on the page size, current page, and row index. Finally, the calculated serial number can be set as the innerHTML of the corresponding row cell.
+Within the event handler, the [Pagesize](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_PageSize) and [CurrentPage](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_CurrentPage) index can be obtained from the grid's [PageSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridPageSettings.html) property. Using these values, the serial number can be calculated based on the page size, current page, and row index. Finally, the calculated serial number can be set as the innerHTML of the corresponding row cell.
 
-Here is an example code snippet that demonstrates how to display serial numbers in a Syncfusion<sup style="font-size:70%">&reg;</sup> Grid using `rowDataBound` event:
+Here is an example code snippet that demonstrates how to display serial numbers in a Syncfusion<sup style="font-size:70%">&reg;</sup> Grid using `RowDataBound` event:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/frozen-column.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/frozen-column.md
index 20a23c93a8..3997a6273d 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/frozen-column.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/frozen-column.md
@@ -36,7 +36,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid provides a
 
 To freeze a particular column in the grid, you can utilize the `IsFrozen` property of the grid component as **true**.
 
-The following example demonstrates how to freeze particular column in grid using `IsFrozen` property. This is achieved by the [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the `DropDownList` component. Within the change event, you can modify the `isFrozen` property of the selected column using the `getColumnByField` method. Afterward, you can use the `refreshColumns` method to update the displayed columns based on your interaction.
+The following example demonstrates how to freeze particular column in grid using `IsFrozen` property. This is achieved by the [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the [DropDownList](https://ej2.syncfusion.com/aspnetmvc/documentation/drop-down-list/getting-started) component. Within the change event, you can modify the `isFrozen` property of the selected column using the `getColumnByField` method. Afterward, you can use the `refreshColumns` method to update the displayed columns based on your interaction.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/grouping/caption-template.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/grouping/caption-template.md
index 3816c6476c..6b93d7e249 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/grouping/caption-template.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/grouping/caption-template.md
@@ -8,9 +8,9 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Caption template in ASP.Net MVC Grid component
+# Caption template in ASP.NET MVC Grid component
 
-The caption template feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net MVC Grid allows you to customize and enhance the appearance of group caption row. It provides a flexible way to display additional information about grouped data, such as counts or grouped value, and enables you to incorporate custom content like images, icons, or other HTML elements. This feature empowers you to create visually appealing and informative group captions in the grid component.
+The caption template feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid allows you to customize and enhance the appearance of group caption row. It provides a flexible way to display additional information about grouped data, such as counts or grouped value, and enables you to incorporate custom content like images, icons, or other HTML elements. This feature empowers you to create visually appealing and informative group captions in the grid component.
 
 To achieve this customization, you can utilize the [CaptionTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridGroupSettings.html#Syncfusion_EJ2_Grids_GridGroupSettings_CaptionTemplate) property. By accessing the `data` parameter, which represents the currently displayed group, you can incorporate its properties such as `Field` (column's field name), `HeaderText` (column's header text), `Key`(grouped value) and `Count` (count of the grouped records) into the caption template.
 
@@ -29,7 +29,7 @@ The following example demonstrates how to customize the group header caption in
 
 ## Adding custom text in group caption
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net MVC Grid allows you to enhance the group captions by adding custom text, providing a more meaningful and informative representation of the grouped data. By utilizing the [CaptionTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridGroupSettings.html#Syncfusion_EJ2_Grids_GridGroupSettings_CaptionTemplate) property, you can add specific text or information to the group caption, offering flexibility in customization.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid allows you to enhance the group captions by adding custom text, providing a more meaningful and informative representation of the grouped data. By utilizing the [CaptionTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridGroupSettings.html#Syncfusion_EJ2_Grids_GridGroupSettings_CaptionTemplate) property, you can add specific text or information to the group caption, offering flexibility in customization.
 
 The following example demonstrates how to add a custom text to the group caption using the `CaptionTemplate` property. The data parameter is utilized to display the  **key**, **count** and **headerText** of the grouped columns along with the custom text. 
 
@@ -46,7 +46,7 @@ The following example demonstrates how to add a custom text to the group caption
 
 ## Customize group caption text using locale
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net MVC Grid allows you to customize the group caption text based on the locale. This feature enables you to display localized text or translated content in the group captions according to different language or region settings.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid allows you to customize the group caption text based on the locale. This feature enables you to display localized text or translated content in the group captions according to different language or region settings.
 
 To achieve this, you can utilize the `L10n` and `setCulture` methods from the `@syncfusion/ej2-base` package. The `L10n.load()` method is used to load the localized strings, where the grid object contains the specific translations for the group caption text and the `setCulture` method sets the active locale to **ar** culture to the Grid component.
 
@@ -65,7 +65,7 @@ The following example demonstrates, how to customize group caption text based on
 
 ## Render custom component in group caption
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net MVC Grid offers the flexibility to render a custom component in the group caption, providing advanced or interactive functionality within the group caption row. This feature allows you to display custom UI elements, like buttons, icons, or dropdowns, and handle user interactions directly within the group caption. 
+The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid offers the flexibility to render a custom component in the group caption, providing advanced or interactive functionality within the group caption row. This feature allows you to display custom UI elements, like buttons, icons, or dropdowns, and handle user interactions directly within the group caption. 
 
 To render custom component in the group caption, you can utilize the [CaptionTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridGroupSettings.html#Syncfusion_EJ2_Grids_GridGroupSettings_CaptionTemplate) property. This feature enables you to replace plain text with a custom component in the group caption, enhancing customization and interactivity.
 
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/grouping/grouping.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/grouping/grouping.md
index 9c0dde4a13..e5ce40b1a2 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/grouping/grouping.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/grouping/grouping.md
@@ -8,9 +8,9 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Grouping in ASP.Net MVC Grid component
+# Grouping in ASP.NET MVC Grid component
 
-The grouping feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net MVC Grid allows you to organize data into a hierarchical structure, making it easier to expand and collapse records. You can group the columns by simply dragging and dropping the column header to the group drop area. To enable grouping in the grid, you need to set the [AllowGrouping](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowGrouping) property to **true**. Additionally, you can customize the grouping options using the [GroupSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_GroupSettings) property.
+The grouping feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid allows you to organize data into a hierarchical structure, making it easier to expand and collapse records. You can group the columns by simply dragging and dropping the column header to the group drop area. To enable grouping in the grid, you need to set the [AllowGrouping](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowGrouping) property to **true**. Additionally, you can customize the grouping options using the [GroupSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_GroupSettings) property.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -43,7 +43,7 @@ The following example demonstrates how to set an initial grouping for the **Cust
 
 ![Initial group](../images/grouping/grouping-initail.png)
 
-> You can group by multiple columns by specifying an array of column names in the columns property of the `GroupSettings`.
+> * You can group by multiple columns by specifying an array of column names in the columns property of the `GroupSettings`.
 
 ## Prevent grouping for particular column
 
@@ -62,7 +62,7 @@ The Grid component provides the ability to prevent grouping for a particular col
 
 By default, the Grid provides a drop area for grouping columns. This drop area allows you to drag and drop columns to group and ungroup them. However, in some cases, you may want to prevent ungrouping or further grouping a column after initial grouping.
 
-To hide the drop area in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net MVC Grid, you can set the [GroupSettings.ShowDropArea](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridGroupSettings.html#Syncfusion_EJ2_Grids_GridGroupSettings_ShowDropArea) property to **false**. 
+To hide the drop area in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid, you can set the [GroupSettings.ShowDropArea](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridGroupSettings.html#Syncfusion_EJ2_Grids_GridGroupSettings_ShowDropArea) property to **false**. 
 
 In the following example, the [EJ2 Toggle Switch Button](https://ej2.syncfusion.com/aspnetmvc/documentation/switch/getting-started) component is added to hide or show the drop area. When the switch is toggled, the [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.Switch.html#Syncfusion_EJ2_Buttons_Switch_Change) event is triggered and the `GroupSettings.ShowDropArea` property of the grid is updated accordingly. 
 
@@ -81,7 +81,7 @@ In the following example, the [EJ2 Toggle Switch Button](https://ej2.syncfusion.
 
 ## Show the grouped column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net MVC Grid has a default behavior where the grouped column is hidden, to provide a cleaner and more focused view of your data. However, if you prefer to show the grouped column in the grid, you can achieve this by setting the [GroupSettings.ShowGroupedColumn](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridGroupSettings.html#Syncfusion_EJ2_Grids_GridGroupSettings_ShowGroupedColumn) property to **true**.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid has a default behavior where the grouped column is hidden, to provide a cleaner and more focused view of your data. However, if you prefer to show the grouped column in the grid, you can achieve this by setting the [GroupSettings.ShowGroupedColumn](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridGroupSettings.html#Syncfusion_EJ2_Grids_GridGroupSettings_ShowGroupedColumn) property to **true**.
 
 In the following example, the [EJ2 Toggle Switch Button](https://ej2.syncfusion.com/aspnetmvc/documentation/switch/getting-started) component is added to hide or show the grouped columns. When the switch is toggled, the [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.Switch.html#Syncfusion_EJ2_Buttons_Switch_Change) event is triggered and the `GroupSettings.ShowGroupedColumn` property of the grid is updated accordingly. 
 
@@ -98,7 +98,7 @@ In the following example, the [EJ2 Toggle Switch Button](https://ej2.syncfusion.
 
 ## Reordering on grouped columns 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net MVC Grid allows you to easily reorder the grouped columns by dragging and dropping the grouped header cells in the group drag area. By changing the order of the grouped columns, the corresponding changes are automatically reflected in the grouping hierarchy of the grid. The grid dynamically adjusts the grouping based on the reordered columns in the group drag area. Additionally, you can also drop new columns into specific positions within the group drag area.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid allows you to easily reorder the grouped columns by dragging and dropping the grouped header cells in the group drag area. By changing the order of the grouped columns, the corresponding changes are automatically reflected in the grouping hierarchy of the grid. The grid dynamically adjusts the grouping based on the reordered columns in the group drag area. Additionally, you can also drop new columns into specific positions within the group drag area.
 
 To enable this feature, you have to set the [GroupSettings.AllowReordering](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridGroupSettings.html#Syncfusion_EJ2_Grids_GridGroupSettings_AllowReordering) property as **true**. This is demonstrated in the sample below.
 
@@ -157,7 +157,7 @@ The following example demonstrates how to perform a group action using the `Enab
 
 ## Collapse all grouped rows at initial rendering
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net MVC Grid offers a convenient feature to expand or collapse grouped rows, allowing you to control the visibility of grouped data. The option is useful when dealing with a large dataset that contains many groups, and there is a need to provide a summarized view by initially hiding the details.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid offers a convenient feature to expand or collapse grouped rows, allowing you to control the visibility of grouped data. The option is useful when dealing with a large dataset that contains many groups, and there is a need to provide a summarized view by initially hiding the details.
 
 To collapse all grouped rows at the initial rendering of the Grid using the [DataBound](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DataBound) event along with the `collapseAll` method.
 
@@ -206,7 +206,7 @@ The following example demonstrates how to group and ungroup the columns in a gri
 
 ## Expand or collapse externally
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net MVC Grid offers a convenient feature to expand or collapse grouped rows, allowing you to control the visibility of grouped data. This section will provide guidance on enabling this functionality and integrating it into your application using the Grid properties and methods.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid offers a convenient feature to expand or collapse grouped rows, allowing you to control the visibility of grouped data. This section will provide guidance on enabling this functionality and integrating it into your application using the Grid properties and methods.
 
 ### Expand or collapse all grouped rows
 
@@ -227,7 +227,7 @@ In the following example, the [EJ2 Toggle Switch Button](https://ej2.syncfusion.
 
 ### Expand or collapse selected grouped row
 
-Expanding or collapsing selected grouped rows in a Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net MVC Grid involves implementing the functionality to expand or collapse grouped records programatically.
+Expanding or collapsing selected grouped rows in a Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid involves implementing the functionality to expand or collapse grouped records programatically.
 
 To enable the expand and collapse functionality for grouped rows in a grid, you can utilize the `expandCollapseRows` method. This method is designed to handle two scenarios such as expanding collapsed grouped records and collapsing expanded grouped records.
 
@@ -254,7 +254,7 @@ The following example demonstrates the function that collapses the selected row
 
 ## Clear grouping 
 
-The clear grouping feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net MVC Grid allows you to removing all the grouped columns from the grid. This feature provides a convenient way to clear the grouping of columns in your application.
+The clear grouping feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid allows you to removing all the grouped columns from the grid. This feature provides a convenient way to clear the grouping of columns in your application.
 
 To clear all the grouped columns in the Grid, you can utilize the `clearGrouping` method of the grid.
 
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/grouping/lazy-load-grouping.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/grouping/lazy-load-grouping.md
index f8d4107d2c..64376e2460 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/grouping/lazy-load-grouping.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/grouping/lazy-load-grouping.md
@@ -8,9 +8,9 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Lazy load grouping in ASP.Net MVC Grid component
+# Lazy load grouping in ASP.NET MVC Grid component
 
-In ASP.Net MVC, lazy loading refers to the technique of loading data dynamically when they are needed, instead of loading everything upfront. Lazy loading can significantly improve the performance of your application by reducing the initial load time.
+In ASP.NET MVC, lazy loading refers to the technique of loading data dynamically when they are needed, instead of loading everything upfront. Lazy loading can significantly improve the performance of your application by reducing the initial load time.
 
 Lazy load grouping in Syncfusion<sup style="font-size:70%">&reg;</sup> Grid allows you to load and display grouped data efficiently by fetching only the required data on demand. This feature is useful when dealing with large datasets where loading all the data at once might affect performance. The Grid will render only the initial level caption rows in the collapsed state at grouping. The child rows of each caption will be fetched in on demand and render in the Grid when you expand the caption row.
 
@@ -128,7 +128,7 @@ The following example demonstrates how to enable the lazy load grouping with inf
 
 ## Lazy load grouping with virtual scrolling
 
-The lazy load grouping with virtual scrolling feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net MVC Grid allows you to efficiently present and analyze large grouped datasets. This feature optimizes performance, reduces initial load time, and provides smooth scrolling through the dataset. 
+The lazy load grouping with virtual scrolling feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid allows you to efficiently present and analyze large grouped datasets. This feature optimizes performance, reduces initial load time, and provides smooth scrolling through the dataset. 
 
 **How lazy load grouping with virtual scrolling works**
 
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/paging.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/paging.md
index 53c4eb4f83..6789860416 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/paging.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/paging.md
@@ -26,7 +26,7 @@ Customizing the pager options in the Syncfusion<sup style="font-size:70%">&reg;<
 
 The Syncfusion<sup style="font-size:70%">&reg;</sup> Grid allows you to control the number of records displayed per page, providing you with flexibility in managing your data. This feature is particularly useful when you want to adjust the amount of data visible to you at any given time. To achieve this, you can utilize the [PageSettings.PageSize](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_PageSize) property. This property is used to specify the initial number of records to display on each page. The default value of `PageSize` property is **12**.
 
-The following example demonstrates how to change the page size of a Grid using an external button click based on **TextBox** input.
+The following example demonstrates how to change the page size of a Grid using an external button click based on [TextBox](https://ej2.syncfusion.com/aspnetmvc/documentation/textbox/getting-started) input.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -45,7 +45,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Grid allows you to adjust t
 
 To change the page count in the Syncfusion<sup style="font-size:70%">&reg;</sup> Grid, you can utilize the [PageSettings.PageCount](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_PageCount) property, which defines the number of pages displayed in the pager container.
 
-The following example demonstrates how to change the page count of a Grid using an external button click based on **TextBox** input.
+The following example demonstrates how to change the page count of a Grid using an external button click based on [TextBox](https://ej2.syncfusion.com/aspnetmvc/documentation/textbox/getting-started) input.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -64,7 +64,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Grid allows you to change t
 
 To change the current page in the Syncfusion<sup style="font-size:70%">&reg;</sup> Grid, you can utilize the [PageSettings.CurrentPage](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_CurrentPage) property, which defines the current page number of the pager.
 
-The following example demonstrates how to dynamically change the current page using an external button click based on **TextBox** input:
+The following example demonstrates how to dynamically change the current page using an external button click based on [TextBox](https://ej2.syncfusion.com/aspnetmvc/documentation/textbox/getting-started) input:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -104,7 +104,7 @@ The pager template in Syncfusion<sup style="font-size:70%">&reg;</sup> Grid allo
 
 To use the pager template, you need to specify the [PagerTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_PagerTemplate) property in your Syncfusion<sup style="font-size:70%">&reg;</sup> Grid configuration. The `PagerTemplate` property allows you to define a custom template for the pager. Within the template, you can access the [CurrentPage](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_CurrentPage), [PageSize](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_PageSize), [PageCount](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_PageCount), **totalPage** and **totalRecordCount** values.
 
-The following example demonstrates how to render a **NumericTextBox** component in the pager using the `PagerTemplate` property:
+The following example demonstrates how to render a [NumericTextBox](https://ej2.syncfusion.com/aspnetmvc/documentation/numerictextbox/getting-started) component in the pager using the `PagerTemplate` property:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -163,7 +163,7 @@ Navigating to a particular page in the Syncfusion<sup style="font-size:70%">&reg
 
 To achieve page navigation, you can use the `goToPage` method provided by Syncfusion<sup style="font-size:70%">&reg;</sup> Grid. This method allows you to programmatically navigate to a specific page within the grid.
 
-The following example demonstrates how to dynamically navigate to a particular page using the `goToPage` method triggered by an external button click based on **TextBox** input:
+The following example demonstrates how to dynamically navigate to a particular page using the `goToPage` method triggered by an external button click based on [TextBox](https://ej2.syncfusion.com/aspnetmvc/documentation/textbox/getting-started) input:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -193,7 +193,7 @@ You have an option to dynamically calculate the page size of a grid by consideri
 
 To achieve page size calculation based on an element's height in the Grid, you can utilize the `calculatePageSizeByParentHeight` method. This method calculates the page size based on the height of the parent element.
 
-The following example demonstrates how to calculate the page size based on element height using the `calculatePageSizeByParentHeight` method triggered by a change event based on the **NumericTextBox** input:
+The following example demonstrates how to calculate the page size based on element height using the `calculatePageSizeByParentHeight` method triggered by a change event based on the [NumericTextBox](https://ej2.syncfusion.com/aspnetmvc/documentation/numerictextbox/getting-started) input:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
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 a3235eb010..4f1c6dc510 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/print.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/print.md
@@ -180,7 +180,7 @@ The following example demonstrates how to print the expanded child grids from ot
 {% endhighlight %}
 {% endtabs %}
 
-![Print the expanded state from other pages](../images/print/print-another-page.png)
+![Print the expanded state from other pages](images/print/print-another-page.png)
 
 ## Limitations of printing large data
 
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/row/detail-template.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/row/detail-template.md
index 7b9227dbdd..7fae2d682d 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/row/detail-template.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/row/detail-template.md
@@ -29,7 +29,7 @@ Here's an example of using the `DetailTemplate` property in the grid component:
 
 The Grid component provides a powerful feature that allows you to render custom components inside the detail row. This feature is helpful when you need to add additional information or functionality for a specific row in the grid.
 
-To render a custom component inside the detail row, you need to define a template using the [DetailTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DetailTemplate) property and handle the [DetailDataBound](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DetailDataBound) event.This template can include any HTML element or ASP.NET MVC component that you want to display as the detail content.
+To render a custom component inside the detail row, you need to define a template using the [DetailTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DetailTemplate) property and handle the [DetailDataBound](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DetailDataBound) event.This template can include any HTML element or ASP.NET MVC component that you want to display as the detail content.
 
 The `DetailDataBound` event is an event that is triggered after a detail row is bound to data. This event provides an object of type `DetailDataBoundEventArgs` as a parameter.
 
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/scrolling/infinite-scrolling.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/scrolling/infinite-scrolling.md
index e8c0245820..6cfaffe5b8 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/scrolling/infinite-scrolling.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/scrolling/infinite-scrolling.md
@@ -59,7 +59,7 @@ To enable cache mode, you need to define [EnableCache](https://help.syncfusion.c
 
 To enable maximum blocks, you need to define `MaxBlocks` count of [InfiniteScrollSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridInfiniteScrollSettings.html), By default this property value is 3.
 
-The following example that demonstrates how to enable/disable cache mode in infinite scrolling of the grid based on a [Switch](https://ej2.syncfusion.com/aspnetmvc/documentation/switch/getting-started) component[Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.Switch.html#Syncfusion_EJ2_Buttons_Switch_Change) event :
+The following example that demonstrates how to enable/disable cache mode in infinite scrolling of the grid based on a [Switch](https://ej2.syncfusion.com/aspnetmvc/documentation/switch/getting-started) component [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.Switch.html#Syncfusion_EJ2_Buttons_Switch_Change) event :
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/searching.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/searching.md
index ce677797ab..5776a79038 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/searching.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/searching.md
@@ -12,7 +12,7 @@ documentation: ug
 
 The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid includes a powerful built-in searching feature that allows users to search for specific data within the grid. This feature enables efficient filtering of grid records based on user-defined search criteria, making it easier to locate and display relevant information. Whether you have a large dataset or simply need to find specific records quickly, the search feature provides a convenient solution.
 
-To set the [allowSearching](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#allowsearching) property to true to enable the searching feature in the grid.
+To set the `AllowSearching` property to true to enable the searching feature in the grid.
 
 To further enhance the search functionality, you can integrate a search text box directly into the grid's toolbar. This allows users to enter search criteria conveniently within the grid interface. To add the search item to the grid's toolbar, use the [Toolbar](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_Toolbar) property and add **Search** item.
 
@@ -197,7 +197,7 @@ On the other hand, the [ActionComplete](https://help.syncfusion.com/cr/aspnetmvc
 
 By default, the searching operation in the Grid component does not ignore diacritic characters or accents. However, there are cases where ignoring diacritic characters becomes necessary. This feature enhances the search experience by enabling data searching without considering accents, ensuring a more comprehensive and accurate search  and it can be achieved by utilizing the [SearchSettings.IgnoreAccent](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridSearchSettings.html#Syncfusion_EJ2_Grids_GridSearchSettings_IgnoreAccent) property of the Grid component as **true**.
 
-The following example demonstrates how to define the `IgnoreAccent` property within the [SearchSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridSearchSettings.html) property of the grid. Additionally, the [EJ2 Toggle Switch Button](https://ej2.syncfusion.com/aspnetmvc/documentation/switch/getting-started) component is included to modify the value of the `SearchSettings.IgnoreAccent` property. When the switch is toggled, the `change` event is triggered, and the `SearchSettings.IgnoreAccent` property is updated accordingly. This functionality helps to visualize the impact of the `SearchSettings.IgnoreAccent` setting when performing search operations.
+The following example demonstrates how to define the `IgnoreAccent` property within the [SearchSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridSearchSettings.html) property of the grid. Additionally, the [EJ2 Toggle Switch Button](https://ej2.syncfusion.com/aspnetmvc/documentation/switch/getting-started) component is included to modify the value of the `SearchSettings.IgnoreAccent` property. When the switch is toggled, the `Change` event is triggered, and the `SearchSettings.IgnoreAccent` property is updated accordingly. This functionality helps to visualize the impact of the `SearchSettings.IgnoreAccent` setting when performing search operations.
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/state-management.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/state-management.md
index 36009de8d1..2371c4be8c 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/state-management.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/state-management.md
@@ -51,7 +51,6 @@ If you want to restore the initial state of the grid, consider changing the comp
 
 Here is an example code to change the component id dynamically to restore initial grid state.
 
-
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/grid/state-persist/state-changing-id/razor %}
@@ -131,8 +130,6 @@ When [EnablePersistence](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion
 {% endhighlight %}
 {% endtabs %}
 
-![Maintaining custom query in a persistent state](images/cell/display-html-content.gif)
-
 ## Get or set local storage value
 
 If the [EnablePersistence](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_EnablePersistence) property is set to **true**, the Grid property value is saved in the **window.localStorage** for reference. You can get or set the localStorage value by using the **getItem** and **setItem** methods in **window.localStorage**.
@@ -158,7 +155,6 @@ In the Syncfusion ASP.NET MVC Grid component, you may sometimes want to prevent
 
 The following example demonstrates how to prevent Grid columns from persisting. In the [DataBound](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DataBound) event of the Grid, you can override the `addOnPersist` method and remove the columns from the key list given for persistence.
 
-
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/grid/state-persist/state-prevent/razor %}
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/custom-aggregate.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/custom-aggregate.md
index ba048e885f..efa0923ba9 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/custom-aggregate.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/custom-aggregate.md
@@ -8,9 +8,9 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Custom aggregate in ASP.Net Core Grid component
+# Custom aggregate in ASP.NET Core Grid component
 
-The custom aggregate feature in Syncfusion's ASP.Net Core Grid component allows you to calculate aggregate values using your own aggregate function. This feature can be useful in scenarios where the built-in aggregate functions do not meet your specific requirements. To use the custom aggregate option, follow the steps below:
+The custom aggregate feature in Syncfusion's ASP.NET Core Grid component allows you to calculate aggregate values using your own aggregate function. This feature can be useful in scenarios where the built-in aggregate functions do not meet your specific requirements. To use the custom aggregate option, follow the steps below:
 
 * Set the `type` property to **Custom** in the `aggregateColumn`.
 
@@ -22,7 +22,7 @@ The custom aggregate function will be invoked differently for total and group ag
 
 **Group Aggregation:** The custom aggregate function will be called with the current group details and the aggregate column object as arguments.
 
-Here's an example that demonstrates how to use the custom aggregate feature in the ASP.Net Core Grid component:
+Here's an example that demonstrates how to use the custom aggregate feature in the ASP.NET Core Grid component:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/footer-aggregate.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/footer-aggregate.md
index c6cfd71558..a37415b42e 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/footer-aggregate.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/footer-aggregate.md
@@ -8,9 +8,9 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Footer aggregate in ASP.Net Core Grid component
+# Footer aggregate in ASP.NET Core Grid component
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net Core Grid component allows you to calculate and display aggregate values in the footer cells. The footer aggregate value is calculated from all the rows in the grid. You can use the `footerTemplate` property to render the aggregate value in the footer cells.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Grid component allows you to calculate and display aggregate values in the footer cells. The footer aggregate value is calculated from all the rows in the grid. You can use the `footerTemplate` property to render the aggregate value in the footer cells.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -28,7 +28,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net Core Grid component
 
 ## Format the aggregate value
 
-To format the aggregate value result in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net Core Grid component, you can use the `format` property of the `aggregateColumn`. The `format` property allows you to specify a format string that determines how the aggregate value will be displayed.
+To format the aggregate value result in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Grid component, you can use the `format` property of the `aggregateColumn`. The `format` property allows you to specify a format string that determines how the aggregate value will be displayed.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/group-and-caption-aggregate.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/group-and-caption-aggregate.md
index 0d1832267a..f08167fc3e 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/group-and-caption-aggregate.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/group-and-caption-aggregate.md
@@ -8,9 +8,9 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Group and caption aggregate in ASP.Net Core Grid component
+# Group and caption aggregate in ASP.NET Core Grid component
 
-Group footer and caption aggregates in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net Core Grid component allow you to calculate aggregate values based on the current group items. These aggregate values can be displayed in the group footer cells and group caption cells, respectively. To achieve this, you can use the `groupFooterTemplate` and `groupCaptionTemplate` properties of the `aggregateColumn`.
+Group footer and caption aggregates in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Grid component allow you to calculate aggregate values based on the current group items. These aggregate values can be displayed in the group footer cells and group caption cells, respectively. To achieve this, you can use the `groupFooterTemplate` and `groupCaptionTemplate` properties of the `aggregateColumn`.
 
 > When working with group aggregates in Syncfusion<sup style="font-size:70%">&reg;</sup> Grid, it is important to set the property [allowGrouping](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowGrouping) of the `column` to **true**. 
 > To maintain grouped columns in the grid after grouping, set [showGroupedColumn](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridGroupSettings.html#Syncfusion_EJ2_Grids_GridGroupSettings_ShowGroupedColumn) to **true**.
@@ -19,7 +19,7 @@ Group footer and caption aggregates in the Syncfusion<sup style="font-size:70%">
 
 Group footer aggregates are displayed in the footer cells of each group. These cells appear at the bottom of each group and provide aggregate values based on the grouped data. To display group footer aggregates, you need to provide a template using the `groupFooterTemplate` property. The template will be used to render the aggregate values in the group footer cells.
 
-Here's an example that demonstrates how to use group footer aggregates in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net Core Grid component:
+Here's an example that demonstrates how to use group footer aggregates in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Grid component:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -39,7 +39,7 @@ Here's an example that demonstrates how to use group footer aggregates in the Sy
 
 Group caption aggregates are displayed in the caption cells of each group. These cells appear at the top of each group and provide a summary of the grouped data. To display group caption aggregates, you can use the `groupCaptionTemplate` property. This property allows you to define a template that will be used to display the aggregate values in the group caption cells.
 
-Here's an example that demonstrates how to use group and caption aggregates in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net Core Grid component:
+Here's an example that demonstrates how to use group and caption aggregates in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Grid component:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -57,7 +57,7 @@ Here's an example that demonstrates how to use group and caption aggregates in t
 
 ## Disable page wise aggregates for grouping
 
-In some cases, you may want to disable the page-wise aggregates for grouping in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net Core Grid component. By default, when grouping is enabled with paging, the grid calculates the aggregates for each page separately. However, you can choose to disable this behavior and calculate aggregates for the entire grouped data instead. This can be achieved by setting the [disablePageWiseAggregates](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridGroupSettings.html#Syncfusion_EJ2_Grids_GridGroupSettings_DisablePageWiseAggregates) property to **true**.
+In some cases, you may want to disable the page-wise aggregates for grouping in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Grid component. By default, when grouping is enabled with paging, the grid calculates the aggregates for each page separately. However, you can choose to disable this behavior and calculate aggregates for the entire grouped data instead. This can be achieved by setting the [disablePageWiseAggregates](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridGroupSettings.html#Syncfusion_EJ2_Grids_GridGroupSettings_DisablePageWiseAggregates) property to **true**.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/reactive-aggregate.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/reactive-aggregate.md
index 3773968029..ca00ca367a 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/reactive-aggregate.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/aggregates/reactive-aggregate.md
@@ -8,9 +8,9 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Reactive aggregate in ASP.Net Core Grid component
+# Reactive aggregate in ASP.NET Core Grid component
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.Net Core Grid component provides support for reactive aggregates, which allow you to update the aggregate values dynamically as the data changes. Reactive aggregates automatically recalculate their values when there are changes in the underlying data, providing real-time updates to the aggregate values in the grid.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Grid component provides support for reactive aggregates, which allow you to update the aggregate values dynamically as the data changes. Reactive aggregates automatically recalculate their values when there are changes in the underlying data, providing real-time updates to the aggregate values in the grid.
 
 ## Auto update aggregate value in batch editing
 
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-chooser.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-chooser.md
index 32b34aef03..20527db167 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-chooser.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-chooser.md
@@ -120,6 +120,4 @@ Here is an example that demonstrates the usage of the `ignoreAccent` property to
 {% highlight c# tabtitle="Columnchooser.cs" %}
 {% include code-snippet/grid/columns/columnchooser-diacritics/columnchooser.cs %}
 {% endhighlight %}
-{% endtabs %}
-
-![Diacritics searching in column chooser](../images/columns/Column-headertext.png)
\ No newline at end of file
+{% endtabs %}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/frozen-column.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/frozen-column.md
index ba58fb7c8f..953a487fcb 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/frozen-column.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/frozen-column.md
@@ -36,7 +36,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Grid provides
 
 To freeze a particular column in the grid, you can utilize the `isFrozen` property of the grid component as **true**.
 
-The following example demonstrates how to freeze particular column in grid using `isFrozen` property. This is achieved by the [change](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the `DropDownList` component. Within the change event, you can modify the `isFrozen` property of the selected column using the `getColumnByField` method. Afterward, you can use the `refreshColumns` method to update the displayed columns based on your interaction.
+The following example demonstrates how to freeze particular column in grid using `isFrozen` property. This is achieved by the [change](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the [DropDownList](https://ej2.syncfusion.com/aspnetcore/documentation/drop-down-list/getting-started) component. Within the change event, you can modify the `isFrozen` property of the selected column using the `getColumnByField` method. Afterward, you can use the `refreshColumns` method to update the displayed columns based on your interaction.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/paging.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/paging.md
index ea94524600..d90cd28da3 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/paging.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/paging.md
@@ -26,7 +26,7 @@ Customizing the pager options in the Syncfusion<sup style="font-size:70%">&reg;<
 
 The Syncfusion<sup style="font-size:70%">&reg;</sup> Grid allows you to control the number of records displayed per page, providing you with flexibility in managing your data. This feature is particularly useful when you want to adjust the amount of data visible to you at any given time. To achieve this, you can utilize the [pageSettings.pageSize](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_PageSize) property. This property is used to specify the initial number of records to display on each page. The default value of `pageSize` property is **12**.
 
-The following example demonstrates how to change the page size of a Grid using an external button click based on **TextBox** input.
+The following example demonstrates how to change the page size of a Grid using an external button click based on [TextBox](https://ej2.syncfusion.com/aspnetcore/documentation/textbox/getting-started)input.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -45,7 +45,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Grid allows you to adjust t
 
 To change the page count in the Syncfusion<sup style="font-size:70%">&reg;</sup> Grid, you can utilize the [pageSettings.pageCount](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_PageCount) property, which defines the number of pages displayed in the pager container.
 
-The following example demonstrates how to change the page count of a Grid using an external button click based on **TextBox** input.
+The following example demonstrates how to change the page count of a Grid using an external button click based on [TextBox](https://ej2.syncfusion.com/aspnetcore/documentation/textbox/getting-started) input.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -64,7 +64,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Grid allows you to change t
 
 To change the current page in the Syncfusion<sup style="font-size:70%">&reg;</sup> Grid, you can utilize the [pageSettings.currentPage](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_CurrentPage) property, which defines the current page number of the pager.
 
-The following example demonstrates how to dynamically change the current page using an external button click based on **TextBox** input:
+The following example demonstrates how to dynamically change the current page using an external button click based on [TextBox](https://ej2.syncfusion.com/aspnetcore/documentation/textbox/getting-started) input:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -104,7 +104,7 @@ The pager template in Syncfusion<sup style="font-size:70%">&reg;</sup> Grid allo
 
 To use the pager template, you need to specify the [pagerTemplate](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_PagerTemplate) property in your Syncfusion<sup style="font-size:70%">&reg;</sup> Grid configuration. The `pagerTemplate` property allows you to define a custom template for the pager. Within the template, you can access the [currentPage](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_CurrentPage), [pageSize](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_PageSize), [pageCount](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_PageCount), **totalPage** and **totalRecordCount** values.
 
-The following example demonstrates how to render a **NumericTextBox** component in the pager using the `pagerTemplate` property:
+The following example demonstrates how to render a [NumericTextBox](https://ej2.syncfusion.com/aspnetcore/documentation/numerictextbox/getting-started) component in the pager using the `pagerTemplate` property:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -163,7 +163,7 @@ Navigating to a particular page in the Syncfusion<sup style="font-size:70%">&reg
 
 To achieve page navigation, you can use the `goToPage` method provided by Syncfusion<sup style="font-size:70%">&reg;</sup> Grid. This method allows you to programmatically navigate to a specific page within the grid.
 
-The following example demonstrates how to dynamically navigate to a particular page using the `goToPage` method triggered by an external button click based on **TextBox** input:
+The following example demonstrates how to dynamically navigate to a particular page using the `goToPage` method triggered by an external button click based on [TextBox](https://ej2.syncfusion.com/aspnetcore/documentation/textbox/getting-started) input:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -193,7 +193,7 @@ You have an option to dynamically calculate the page size of a grid by consideri
 
 To achieve page size calculation based on an element's height in the Grid, you can utilize the `calculatePageSizeByParentHeight` method. This method calculates the page size based on the height of the parent element.
 
-The following example demonstrates how to calculate the page size based on element height using the `calculatePageSizeByParentHeight` method triggered by a change event based on the **NumericTextBox** input:
+The following example demonstrates how to calculate the page size based on element height using the `calculatePageSizeByParentHeight` method triggered by a change event based on the [NumericTextBox](https://ej2.syncfusion.com/aspnetcore/documentation/numerictextbox/getting-started) input:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
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 b2b61463a4..fec7713f55 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/print.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/print.md
@@ -180,7 +180,7 @@ The following example demonstrates how to print the expanded child grids from ot
 {% endhighlight %}
 {% endtabs %}
 
-![Retain grid styles while printing](images/print/print-style.png)
+![Print the expanded state from other pages](images/print/print-another-page.png)
 
 ## Limitations of printing large data
 
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/searching.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/searching.md
index b06ed67c76..f22d72acad 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/searching.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/searching.md
@@ -8,11 +8,11 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Searching in  ASP.NET Core Grid component
+# Searching in ASP.NET Core Grid component
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup>  ASP.NET Core Grid includes a powerful built-in searching feature that allows users to search for specific data within the grid. This feature enables efficient filtering of grid records based on user-defined search criteria, making it easier to locate and display relevant information. Whether you have a large dataset or simply need to find specific records quickly, the search feature provides a convenient solution.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Grid includes a powerful built-in searching feature that allows users to search for specific data within the grid. This feature enables efficient filtering of grid records based on user-defined search criteria, making it easier to locate and display relevant information. Whether you have a large dataset or simply need to find specific records quickly, the search feature provides a convenient solution.
 
-To set the [allowSearching](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#allowsearching) property to true to enable the searching feature in the grid.
+To set the `allowSearching` property to true to enable the searching feature in the grid.
 
 To further enhance the search functionality, you can integrate a search text box directly into the grid's toolbar. This allows users to enter search criteria conveniently within the grid interface. To add the search item to the grid's toolbar, use the [toolbar](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Toolbar) property and add **Search** item.
 
@@ -197,7 +197,7 @@ On the other hand, the [actionComplete](https://help.syncfusion.com/cr/aspnetcor
 
 By default, the searching operation in the Grid component does not ignore diacritic characters or accents. However, there are cases where ignoring diacritic characters becomes necessary. This feature enhances the search experience by enabling data searching without considering accents, ensuring a more comprehensive and accurate search  and it can be achieved by utilizing the [searchSettings.ignoreAccent](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridSearchSettings.html#Syncfusion_EJ2_Grids_GridSearchSettings_IgnoreAccent) property of the Grid component as **true**.
 
-The following example demonstrates how to define the `ignoreAccent` property within the [searchSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridSearchSettings.html) property of the grid. Additionally, the [EJ2 Toggle Switch Button](https://ej2.syncfusion.com/aspnetcore/documentation/switch/getting-started) component is included to modify the value of the `searchSettings.ignoreAccent` property. When the switch is toggled, the `change` event is triggered, and the `searchSettings.ignoreAccent` property is updated accordingly. This functionality helps to visualize the impact of the `searchSettings.ignoreAccent` setting when performing search operations.
+The following example demonstrates how to define the `ignoreAccent` property within the [searchSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridSearchSettings.html) property of the grid. Additionally, the [EJ2 Toggle Switch Button](https://ej2.syncfusion.com/aspnetcore/documentation/switch/getting-started) component is included to modify the value of the `searchSettings.ignoreAccent` property. When the switch is toggled, the `Change` event is triggered, and the `searchSettings.ignoreAccent` property is updated accordingly. This functionality helps to visualize the impact of the `searchSettings.ignoreAccent` setting when performing search operations.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/state-management.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/state-management.md
index 46329571d2..181ed59c9d 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/state-management.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/state-management.md
@@ -151,7 +151,7 @@ window.localStorage.setItem('gridOrders', JSON.stringify(value)); //"gridOrders"
 
 ## Prevent columns from persisting
 
-In the Syncfusion ASP.NET Core Grid component, you may sometimes want to prevent certain settings from being persisted when using the [enablePersistence](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_EnablePersistence) feature. When the enablePersistence property is set to **true**, the Grid properties such as [Grouping](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridGroupSettings.html), [Paging](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html), [Filtering](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridFilterSettings.html), [Sorting](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridSortSettings.html), and [columns](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumns.html) will persist. You can use the `addOnPersist` method to prevent these Grid properties from persisting.
+In the Syncfusion ASP.NET Core Grid component, you may sometimes want to prevent certain settings from being persisted when using the [enablePersistence](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_EnablePersistence) feature. When the enablePersistence property is set to **true**, the Grid properties such as [grouping](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridGroupSettings.html), [paging](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html), [filtering](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridFilterSettings.html), [sorting](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridSortSettings.html), and [columns](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumns.html) will persist. You can use the `addOnPersist` method to prevent these Grid properties from persisting.
 
 The following example demonstrates how to prevent Grid columns from persisting. In the [dataBound](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DataBound) event of the Grid, you can override the `addOnPersist` method and remove the columns from the key list given for persistence.
 
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/tool-bar/tool-bar.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/tool-bar/tool-bar.md
index 8358edc5b5..dae9576409 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/tool-bar/tool-bar.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/tool-bar/tool-bar.md
@@ -44,7 +44,7 @@ In the following example, the [EJ2 Toggle Switch Button component](https://ej2.s
 {% endhighlight %}
 {% endtabs %}
 
-![Enable or disable toolbar items](../images/toolbar/toolbar-enable-disable.gif)
+![Enable or disable toolbar items](../images/toolbar/expand-toolbar.gif)
 
 ## Add toolbar at the bottom of grid
 
diff --git a/ej2-asp-core-mvc/grid/images/column-chooser/frozon-direction.png b/ej2-asp-core-mvc/grid/images/column-chooser/frozon-direction.png
index 868c6ad337..f49269e2fb 100644
Binary files a/ej2-asp-core-mvc/grid/images/column-chooser/frozon-direction.png and b/ej2-asp-core-mvc/grid/images/column-chooser/frozon-direction.png differ
diff --git a/ej2-asp-core-mvc/grid/images/column-chooser/frozon-particular.png b/ej2-asp-core-mvc/grid/images/column-chooser/frozon-particular.png
index 77297fa5d9..ec1363cd90 100644
Binary files a/ej2-asp-core-mvc/grid/images/column-chooser/frozon-particular.png and b/ej2-asp-core-mvc/grid/images/column-chooser/frozon-particular.png differ
diff --git a/ej2-asp-core-mvc/grid/images/search/search-clear.gif b/ej2-asp-core-mvc/grid/images/search/search-clear.gif
index a68cb7ed64..cf7888141d 100644
Binary files a/ej2-asp-core-mvc/grid/images/search/search-clear.gif and b/ej2-asp-core-mvc/grid/images/search/search-clear.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/search/search-format.png b/ej2-asp-core-mvc/grid/images/search/search-format.png
index 835ee25b98..772cba29c4 100644
Binary files a/ej2-asp-core-mvc/grid/images/search/search-format.png and b/ej2-asp-core-mvc/grid/images/search/search-format.png differ
diff --git a/ej2-asp-core-mvc/grid/images/search/search-highlight.png b/ej2-asp-core-mvc/grid/images/search/search-highlight.png
index 86cd7ce2bb..e4d3f76c19 100644
Binary files a/ej2-asp-core-mvc/grid/images/search/search-highlight.png and b/ej2-asp-core-mvc/grid/images/search/search-highlight.png differ
diff --git a/ej2-asp-core-mvc/grid/images/search/search-keystoke.gif b/ej2-asp-core-mvc/grid/images/search/search-keystoke.gif
index 5e58c0985e..d08a29506d 100644
Binary files a/ej2-asp-core-mvc/grid/images/search/search-keystoke.gif and b/ej2-asp-core-mvc/grid/images/search/search-keystoke.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/search/search-multiple-key.png b/ej2-asp-core-mvc/grid/images/search/search-multiple-key.png
index 1ca457241f..7c654d5909 100644
Binary files a/ej2-asp-core-mvc/grid/images/search/search-multiple-key.png and b/ej2-asp-core-mvc/grid/images/search/search-multiple-key.png differ
diff --git a/ej2-asp-core-mvc/grid/images/search/search-operator.gif b/ej2-asp-core-mvc/grid/images/search/search-operator.gif
index c3627efde8..20c33e467e 100644
Binary files a/ej2-asp-core-mvc/grid/images/search/search-operator.gif and b/ej2-asp-core-mvc/grid/images/search/search-operator.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/search/search-specific.gif b/ej2-asp-core-mvc/grid/images/search/search-specific.gif
index cb67bed6c8..328e98a72f 100644
Binary files a/ej2-asp-core-mvc/grid/images/search/search-specific.gif and b/ej2-asp-core-mvc/grid/images/search/search-specific.gif differ