diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-contains/columnchooser.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-contains/columnchooser.cs
new file mode 100644
index 0000000000..a313f00f64
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-contains/columnchooser.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-contains/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-contains/razor
new file mode 100644
index 0000000000..0df9804a6e
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-contains/razor
@@ -0,0 +1,8 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnChooser(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();
+}).Toolbar(new List<string>() { "ColumnChooser" }).ColumnChooserSettings(choose=> { choose.Operator("Contains"); }).Render()
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-contains/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-contains/tagHelper
new file mode 100644
index 0000000000..7c6a7cb598
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-contains/tagHelper
@@ -0,0 +1,10 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnChooser='true' toolbar="@(new List<string>() { "ColumnChooser"})">
+    <e-grid-columnChooserSettings operator='contains'></e-grid-columnChooserSettings>
+    <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="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>
+</ejs-grid>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-diacritics/columnchooser.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-diacritics/columnchooser.cs
new file mode 100644
index 0000000000..a313f00f64
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-diacritics/columnchooser.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-diacritics/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-diacritics/razor
new file mode 100644
index 0000000000..89f0215ba8
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-diacritics/razor
@@ -0,0 +1,8 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnChooser(true).Columns(col =>
+{
+    col.Field("ÒrderID̂").HeaderText("Òrder ID̂").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add();
+    col.Field("F̂reight").HeaderText("F̂reight").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();
+}).Toolbar(new List<string>() { "ColumnChooser" }).ColumnChooserSettings(choose => { choose.IgnoreAccent(true); }).Render()
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-diacritics/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-diacritics/tagHelper
new file mode 100644
index 0000000000..da1b269679
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-diacritics/tagHelper
@@ -0,0 +1,10 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnChooser='true' toolbar="@(new List<string>() { "ColumnChooser"})">
+    <e-grid-columnChooserSettings ignoreAccent= "true"></e-grid-columnChooserSettings>
+    <e-grid-columns>
+        <e-grid-column field='ÒrderID̂' headerText='Òrder 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="F̂reight" headerText="F̂reight" 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>
+</ejs-grid>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-external/columnchooser.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-external/columnchooser.cs
new file mode 100644
index 0000000000..a313f00f64
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-external/columnchooser.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 
\ 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
new file mode 100644
index 0000000000..80979ed8ef
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-external/razor
@@ -0,0 +1,17 @@
+<div style="padding:0px 0px 20px 0px">
+    @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 =>
+{
+    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>
+    document.getElementById('show').addEventListener('click', () => {
+        var gridObj = document.getElementById("Grid").ej2_instances[0];
+        gridObj.columnChooserModule.openColumnChooser(100, 40);
+    });
+</script>
\ No newline at end of file
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
new file mode 100644
index 0000000000..cb51a6087b
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-external/tagHelper
@@ -0,0 +1,19 @@
+<div style="padding:0px 0px 20px 0px">
+<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>
+        <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="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>
+</ejs-grid>
+
+<script>
+    document.getElementById('show').addEventListener('click', () => {
+        var gridObj = document.getElementById("Grid").ej2_instances[0];
+        gridObj.columnChooserModule.openColumnChooser(100, 40);
+    });
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-hide/columnchooser.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-hide/columnchooser.cs
new file mode 100644
index 0000000000..a313f00f64
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-hide/columnchooser.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-hide/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-hide/razor
new file mode 100644
index 0000000000..85efbe3b53
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-hide/razor
@@ -0,0 +1,8 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("270px").ShowColumnChooser(true).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").ShowInColumnChooser(false).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();
+}).Toolbar(new List<string>() { "ColumnChooser" }).Render()
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-hide/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-hide/tagHelper
new file mode 100644
index 0000000000..9c92958b15
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-hide/tagHelper
@@ -0,0 +1,9 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="270px" showColumnChooser='true' toolbar="@(new List<string>() { "ColumnChooser"})">
+    <e-grid-columns>
+        <e-grid-column field='OrderID' headerText='Order ID' showInColumnChooser="false" 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="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>
+</ejs-grid>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-size/columnchooser.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-size/columnchooser.cs
new file mode 100644
index 0000000000..a313f00f64
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-size/columnchooser.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-size/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-size/razor
new file mode 100644
index 0000000000..9faa7dd1c0
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-size/razor
@@ -0,0 +1,19 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnChooser(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();
+}).Toolbar(new List<string>() { "ColumnChooser" }).Render()
+
+<style>
+    .e-grid .e-dialog.e-ccdlg {
+        height: 500px;
+        width: 200px;
+    }
+    .e-grid .e-ccdlg .e-cc-contentdiv {
+            height: 200px;
+            width: 230px;
+    }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-size/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-size/tagHelper
new file mode 100644
index 0000000000..02817bd563
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-size/tagHelper
@@ -0,0 +1,19 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnChooser='true' toolbar="@(new List<string>() { "ColumnChooser"})">
+    <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="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>
+</ejs-grid>
+<style>
+    .e-grid .e-dialog.e-ccdlg {
+        height: 500px;
+        width: 200px;
+    }
+    .e-grid .e-ccdlg .e-cc-contentdiv {
+        height: 200px;
+        width: 230px;
+    }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser/columnchooser.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser/columnchooser.cs
index f6f0126ac7..a313f00f64 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser/columnchooser.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser/columnchooser.cs
@@ -1,6 +1,6 @@
 public IActionResult Index()
 {
-    var Order = OrderDetails.GetAllRecords();
+    var Order = OrdersDetails.GetAllRecords();
     ViewBag.DataSource = Order;
     return View();
 } 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser/razor
index f0394688c1..2c228663b7 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser/razor
@@ -1,11 +1,8 @@
-@Html.EJS().Grid("ColumnChooser").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnChooser(true).Columns(col =>
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("270px").ShowColumnChooser(true).Columns(col =>
 {
     col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("CustomerID").HeaderText("Customer Name").Width("150").ShowInColumnChooser(false).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("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("ShippedDate").HeaderText("Shipped Date").Width("140").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("ShipCity").Visible(false).HeaderText("Ship Country").Width("150").Visible(false).Add();
-    col.Field("ShipCountry").Visible(false).HeaderText("Ship Country").Width("150").Add();
-
-}).AllowPaging().Toolbar(new List<string>() { "ColumnChooser" }).Render()
\ No newline at end of file
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
+}).Toolbar(new List<string>() { "ColumnChooser" }).Render()
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser/tagHelper
index 3a1bb75a71..f9a1c619db 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser/tagHelper
@@ -1,12 +1,9 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnChooser="true" toolbar="@(new List<string>() { "ColumnChooser"})">    
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="270px" showColumnChooser='true' toolbar="@(new List<string>() { "ColumnChooser"})">
     <e-grid-columns>
-        <e-grid-column field="OrderID" headerText="Order ID" width="150" ></e-grid-column>
-        <e-grid-column field="CustomerID" headerText="Customer ID" showInColumnChooser="true" 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" width="150"></e-grid-column>
-        <e-grid-column field="ShipppedDate" headerText="Shipped Date" format="yMd" textAlign="Right" width="130"></e-grid-column>
-        <e-grid-column field="ShipCountry"  headerText="Ship Country" width="150" ></e-grid-column>
-        <e-grid-column field="ShipCity" headerText="Ship City" visible="false" width="150"></e-grid-column>
+        <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="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>
-</ejs-grid>
-
+</ejs-grid>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu-stacked/columnmenu.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu-stacked/columnmenu.cs
new file mode 100644
index 0000000000..a313f00f64
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu-stacked/columnmenu.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 
\ No newline at end of file
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
new file mode 100644
index 0000000000..3bbd7720c8
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu-stacked/razor
@@ -0,0 +1,46 @@
+@{
+    var columnMenuItems = new List<object>
+        {
+            "SortAscending",
+            "SortDescending",
+            "Group",
+            "Ungroup",
+            "Filter",
+            new
+            {
+                text = "Sub Menu",
+                items = new List<object>
+                {
+                    new { text = "Option 1", id = "option1" },
+                    new { text = "Option 2", id = "option2" },
+                    new { text = "Option 3", id = "option3" },
+                    new
+                    {
+                        text = "Nested Sub Menu",
+                        items = new List<object>
+                        {
+                            new { text = "Nested Option 1", id = "nestedoption1" },
+                            new { text = "Nested Option 2", id = "nestedoption2" }
+                        }
+                    }
+                }
+            }
+        };
+}
+
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnMenu(true).AllowSorting().AllowFiltering(true).AllowGrouping().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("130").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();
+}).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') {
+            // custom function
+        }
+    }
+</script>
\ No newline at end of file
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
new file mode 100644
index 0000000000..a7224fcf60
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu-stacked/tagHelper
@@ -0,0 +1,50 @@
+@{
+    
+    var columnMenuItems = new List<object>
+        {
+            "SortAscending",
+            "SortDescending",
+            "Group",
+            "Ungroup",
+            "Filter",
+            new
+            {
+                text = "Sub Menu",
+                items = new List<object>
+                {
+                    new { text = "Option 1", id = "option1" },
+                    new { text = "Option 2", id = "option2" },
+                    new { text = "Option 3", id = "option3" },
+                    new
+                    {
+                        text = "Nested Sub Menu",
+                        items = new List<object>
+                        {
+                            new { text = "Nested Option 1", id = "nestedoption1" },
+                            new { text = "Nested Option 2", id = "nestedoption2" }
+                        }
+                    }
+                }
+            }
+        };
+    
+}
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' allowSorting='true' columnMenuItems='columnMenuItems' 
+showColumnMenu='true' allowFiltering='true' allowGrouping='true' columnMenuClick='columnMenuClick'>
+    <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-columns>
+</ejs-grid>
+<script>
+    function columnMenuClick(args) {
+        if (args.item.id === 'option1') {
+                // custom function
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu/columnmenu.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu/columnmenu.cs
index f6f0126ac7..a313f00f64 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu/columnmenu.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu/columnmenu.cs
@@ -1,6 +1,6 @@
 public IActionResult Index()
 {
-    var Order = OrderDetails.GetAllRecords();
+    var Order = OrdersDetails.GetAllRecords();
     ViewBag.DataSource = Order;
     return View();
 } 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu/razor
index a5c0b6fa82..8eeb3bfcec 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu/razor
@@ -1,9 +1,8 @@
-@Html.EJS().Grid("ColumnMenu").DataSource((IEnumerable<object>)ViewBag.dataSource).ShowColumnMenu(true).AllowSorting().AllowFiltering(true).AllowGrouping().Columns(col => {
-
-  col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-  col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
-  col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-  col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
-  col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
-
-}).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox); }).GroupSettings(group => { group.ShowGroupedColumn(true); }).AllowPaging().Render()
\ No newline at end of file
+   @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnMenu(true).AllowSorting().AllowFiltering(true).AllowGrouping().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();
+   }).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox); }).GroupSettings(group => { group.ShowGroupedColumn(true); }).AllowPaging().Render()
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 bed94f01ea..ec0f0574c9 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu/tagHelper
@@ -1,11 +1,12 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnMenu="true" allowSorting="true" allowFiltering="true" allowPaging="true" allowGrouping="true"> 
-   <e-grid-groupsettings showGroupedColumn="true"></e-grid-groupsettings>
-    <e-grid-filtersettings type="CheckBox"></e-grid-filtersettings>   
+<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"  width="200"  textAlign="Right" showInColumnChooser="false" ></e-grid-column>        
-        <e-grid-column field="Freight" headerText="Freight" textAlign="Right"  format="C2" editType="numericedit" width="150"></e-grid-column>
-        <e-grid-column field="ShipName" headerText="Ship Name"  width="300"></e-grid-column>
-        <e-grid-column field="ShipCountry"  headerText="Ship Country" visible="false"  width="200" ></e-grid-column>
-        <e-grid-column field="ShipCity" headerText="Ship City"  width="200"></e-grid-column>
+        <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-columns>
 </ejs-grid>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenuevents/columnmenuevents.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenuevents/columnmenu.cs
similarity index 100%
rename from ej2-asp-core-mvc/code-snippet/grid/columns/columnmenuevents/columnmenuevents.cs
rename to ej2-asp-core-mvc/code-snippet/grid/columns/columnmenuevents/columnmenu.cs
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 92906881df..426ddfcf20 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,22 @@
+    <div id="message" style="color: red; text-align: center;padding-bottom:20px"></div>
 
-@Html.EJS().Grid("ColumnMenu").DataSource((IEnumerable<object>)ViewBag.dataSource).ShowColumnMenu(true).AllowSorting().AllowFiltering(true).AllowGrouping().Columns(col => {
+    @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()
 
-  col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-  col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
-  col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-  col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
-  col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+    <script>
+        function columnMenuOpen(args) {
+            document.getElementById("message").innerText = 'columnMenuOpen event is triggered';
+        }
 
-}).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox); }).GroupSettings(group => { group.ShowGroupedColumn(true); }).AllowPaging().ColumnMenuOpen("columnMenuOpen").ColumnMenuClick("columnMenuClick").Render()
-
-<script>
-
-  function columnMenuOpen() {
-    alert('columnMenuOpen event is triggered')
-  }
-
-  function columnMenuClick() {
-    alert('columnMenuClick event is triggered')
-  }
-
-</script>
\ No newline at end of file
+        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 9c7b4a509a..a79f4be052 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenuevents/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/columnmenuevents/tagHelper
@@ -1,22 +1,25 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnMenu="true" allowSorting="true" allowFiltering="true" allowPaging="true" allowGrouping="true"
-columnMenuOpen="columnMenuOpen" columnMenuClick="columnMenuClick"> 
-   <e-grid-groupsettings  showGroupedColumn="true"></e-grid-groupsettings>
-    <e-grid-filtersettings type="CheckBox"></e-grid-filtersettings>   
+<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'>
+    <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"  width="200"  textAlign="Right" showInColumnChooser="false" ></e-grid-column>        
-        <e-grid-column field="Freight" headerText="Freight" textAlign="Right"  format="C2" editType="numericedit" width="150"></e-grid-column>
-        <e-grid-column field="ShipName" headerText="Ship Name"  width="300"></e-grid-column>
-        <e-grid-column field="ShipCountry"  headerText="Ship Country" visible="false"  width="200" ></e-grid-column>
-        <e-grid-column field="ShipCity" headerText="Ship City"  width="200"></e-grid-column>
+        <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-columns>
 </ejs-grid>
 
 <script>
     function columnMenuOpen() {
-        alert('columnMenuOpen event is triggered')
+        document.getElementById("message").innerText = 'columnMenuOpen event is Triggered';
     }
 
     function columnMenuClick() {
-        alert('columnMenuClick event is triggered')
+        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/custom-column-menu-icon/columnmenu.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/custom-column-menu-icon/columnmenu.cs
new file mode 100644
index 0000000000..47e5e3b61d
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/custom-column-menu-icon/columnmenu.cs
@@ -0,0 +1,5 @@
+public IActionResult Index()
+{
+    ViewBag.DataSource = OrdersDetails.GetAllRecords();
+    return View();
+} 
\ 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
new file mode 100644
index 0000000000..dce9561d9f
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/custom-column-menu-icon/razor
@@ -0,0 +1,18 @@
+<link href="https://cdn.syncfusion.com/ej2/ej2-icons/styles/bootstrap5.css" rel="stylesheet" />
+
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnMenu(true).Columns(col =>
+{
+  col.Field("OrderID").HeaderText("Order ID").Width("120").Add();
+  col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
+  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()
+
+<style>
+    .e-grid .e-columnheader .e-icons.e-columnmenu::before {
+        content: "\e799";
+    }
+</style>
+
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
new file mode 100644
index 0000000000..345c420a4e
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/custom-column-menu-icon/tagHelper
@@ -0,0 +1,16 @@
+<link href="https://cdn.syncfusion.com/ej2/ej2-icons/styles/bootstrap5.css" rel="stylesheet" />
+
+<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-columns>
+</ejs-grid>
+
+<style>
+   .e-grid .e-columnheader .e-icons.e-columnmenu::before {
+        content: "\e799";
+    }   
+</style>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/customcolumnmenu/columnmenu.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/customcolumnmenu/columnmenu.cs
new file mode 100644
index 0000000000..a313f00f64
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/customcolumnmenu/columnmenu.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 
\ No newline at end of file
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 02c4c54550..8a00c326e2 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/customcolumnmenu/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/customcolumnmenu/razor
@@ -2,25 +2,22 @@
     List<object> columnMenuitems = new List<object>();
     columnMenuitems.Add(new { text = "Clear Sorting", id = "gridclearsorting" });
     List<object> cols = new List<object>();
-    cols.Add(new { field = "CustomerID", direction = "Ascending" });
+    cols.Add(new { field = "OrderID", direction = "Ascending" });
 }
-
-@Html.EJS().Grid("CustomColumnMenu").DataSource((IEnumerable<object>)ViewBag.dataSource).ShowColumnMenu(true).AllowSorting().Columns(col =>
-{
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnMenu(true).AllowSorting().Columns(col =>
+    {
     col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
-    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
-    col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
-
-}).AllowPaging().SortSettings(sort => sort.Columns(cols)).ColumnMenuItems(columnMenuitems).ColumnMenuClick("columnMenuClick").ShowColumnMenu(true).Render()
+    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").SortSettings(sort => sort.Columns(cols)).ColumnMenuItems(columnMenuitems).Render()
 
 <script>
-
     function columnMenuClick(args) {
         if (args.item.id === 'gridclearsorting') {
-            this.clearSorting();
+            var grid = document.getElementById("Grid").ej2_instances[0];
+            grid.clearSorting();
         }
     }
-    
-</script>
\ No newline at end of file
+</script>
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 39ff7c7126..531dc8df76 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/customcolumnmenu/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/customcolumnmenu/tagHelper
@@ -1,22 +1,29 @@
-@{ 
+@{
+    List<object> columnMenuitems = new List<object>();
+    columnMenuitems.Add(new { text = "Clear Sorting", id = "gridclearsorting" });
+     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'>
+    <e-grid-sortsettings columns='cols'></e-grid-sortsettings>
 
-        List<object> columnMenuitems = new List<object>();
-        columnMenuitems.Add(new { text = "Clear Sorting", id = "gridclearsorting" });
- }
- <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" columnMenuItems="columnMenuitems"  columnMenuClick="columnMenuClick" showColumnMenu="true" allowSorting="true"  allowPaging="true" >
     <e-grid-columns>
-        <e-grid-column field="OrderID" headerText="Order ID"  width="200"  textAlign="Right" showInColumnChooser="false" ></e-grid-column>
-        <e-grid-column field="Freight" headerText="Freight" textAlign="Right"  format="C2" editType="numericedit" width="150"></e-grid-column>
-        <e-grid-column field="ShipName" headerText="Ship Name"  width="300"></e-grid-column>
-        <e-grid-column field="ShipCountry"  headerText="Ship Country" visible="false"  width="200" ></e-grid-column>
-        <e-grid-column field="ShipCity" headerText="Ship City"  width="200"></e-grid-column>
+        <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-columns>
 </ejs-grid>
 
 <script>
     function columnMenuClick(args) {
         if (args.item.id === 'gridclearsorting') {
-            this.clearSorting();
+           var grid = document.getElementById("Grid").ej2_instances[0];
+           grid.clearSorting();
         }
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/customizecolumnmenu/columnmenu.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/customizecolumnmenu/columnmenu.cs
new file mode 100644
index 0000000000..a313f00f64
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/customizecolumnmenu/columnmenu.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 
\ No newline at end of file
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 ccea87fa73..a0f128a0a9 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/customizecolumnmenu/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/customizecolumnmenu/razor
@@ -1,13 +1,11 @@
-@Html.EJS().Grid("CustomizeColumnMenu").DataSource((IEnumerable<object>)ViewBag.dataSource).ShowColumnMenu(true).AllowSorting().AllowFiltering(true).AllowGrouping().ColumnMenuOpen("columnMenuOpen").Columns(col =>
+@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 Name").Width("150").Add();
-   col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
-   col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
-
-}).FilterSettings(filter=> { filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox); }).GroupSettings(group=>group.ShowGroupedColumn(true)).AllowPaging().Render()
-
+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) {
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 a68c0a4719..7c51d9ba75 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/customizecolumnmenu/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/customizecolumnmenu/tagHelper
@@ -1,13 +1,15 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" columnMenuOpen="columnMenuOpen" allowFiltering="true" allowGrouping="true" showColumnMenu="true" allowSorting="true"  allowPaging="true" >
-     <e-grid-filtersettings type="Menu"></e-grid-filtersettings>
+<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"  width="200"  textAlign="Right"  ></e-grid-column>
-        <e-grid-column field="Freight" headerText="Freight" textAlign="Right"  format="C2" editType="numericedit" width="150"></e-grid-column>
-        <e-grid-column field="ShipName" headerText="Ship Name"  width="300"></e-grid-column>
-        <e-grid-column field="ShipCountry"  headerText="Ship Country" visible="false"  width="200" ></e-grid-column>
-        <e-grid-column field="ShipCity" headerText="Ship City"  width="200"></e-grid-column>
+        <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-columns>
 </ejs-grid>
+
 <script>
     function columnMenuOpen(args) {
         for (let item of args.items) {
@@ -16,6 +18,6 @@
             } else {
                 item.hide = false;
             }
-        }      
+        }
     }
-</script>
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-color/frozen.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-color/frozen.cs
new file mode 100644
index 0000000000..d7ac3aa3f2
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-color/frozen.cs
@@ -0,0 +1,6 @@
+public IActionResult DefaultExporting()
+{
+    var order = OrdersDetails.GetAllRecords();
+    ViewBag.dataSource = order;
+    return View();
+}
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
new file mode 100644
index 0000000000..8ce48b44fd
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-color/razor
@@ -0,0 +1,28 @@
+@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").Freeze(Syncfusion.EJ2.Grids.FreezeDirection.Left).Width("130").Add();
+    col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipAddress").HeaderText("Ship Address").Freeze(Syncfusion.EJ2.Grids.FreezeDirection.Fixed).Width("120").Add();
+    col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipName").HeaderText("Ship Name").Width("120").Add();
+    col.Field("ShipCity").HeaderText("Ship City").Width("120").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Freeze(Syncfusion.EJ2.Grids.FreezeDirection.Right).Width("120").Add();
+}).Render()
+<style>
+    .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;
+    }
+</style>
\ No newline at end of file
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
new file mode 100644
index 0000000000..65ec06d872
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-color/tagHelper
@@ -0,0 +1,29 @@
+<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" freeze='Left' 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="ShipAddress" headerText="Ship Address" freeze='Fixed' 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="ShipName" headerText="Ship Name"  width="120"></e-grid-column>
+        <e-grid-column field="ShipCity" headerText="Ship City" width="120"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" freeze='Right' width="120"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<style>
+    .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;
+    }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-columns/frozen.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-columns/frozen.cs
new file mode 100644
index 0000000000..d7ac3aa3f2
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-columns/frozen.cs
@@ -0,0 +1,6 @@
+public IActionResult DefaultExporting()
+{
+    var order = OrdersDetails.GetAllRecords();
+    ViewBag.dataSource = order;
+    return View();
+}
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
new file mode 100644
index 0000000000..876ce8ed08
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-columns/razor
@@ -0,0 +1,23 @@
+<label style="padding: 10px 10px 26px 0;font-weight:bold">Change the frozen columns:</label>
+@Html.EJS().NumericTextBox("frozenColumns").Min('0').Max('3').Width("100").Format("n").Value(2).ValidateDecimalOnType(true).Decimals(3).Render()
+@Html.EJS().Button("button").Content("Update").Render()
+@Html.EJS().Grid("Grid").FrozenColumns(2).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("EmployeeID").HeaderText("Employee ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).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();
+  col.Field("ShipCity").HeaderText("Ship City").Width("120").Add();
+  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
new file mode 100644
index 0000000000..998cf9a6b8
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-columns/tagHelper
@@ -0,0 +1,24 @@
+<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-button id="button" content="Update"></ejs-button>
+<ejs-grid id="Grid" dataSource="@ViewBag.dataSource" frozenColumns='2'>
+<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='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>
+    <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
+    <e-grid-column field="ShipCity" headerText="Ship City" width="120"></e-grid-column>
+    <e-grid-column field="ShipAddress" headerText="Ship Address" width="120"></e-grid-column>
+    <e-grid-column field="ShipName" headerText="Ship Name" width="120"></e-grid-column>
+</e-grid-columns>
+</ejs-grid>
+<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-direction/frozen.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-direction/frozen.cs
new file mode 100644
index 0000000000..d782bae97c
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-direction/frozen.cs
@@ -0,0 +1,9 @@
+public IActionResult 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" };
+
+    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
new file mode 100644
index 0000000000..9b9f4fae15
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-direction/razor
@@ -0,0 +1,35 @@
+<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()
+    </span>
+</div>
+<div style="display: flex">
+    <label style="padding: 5px 10px 26px 0"> Change freeze direction: </label>
+    <span style="height:fit-content">
+        @Html.EJS().DropDownList("directionDropDown").Index(0).Width("180px").DataSource(@ViewBag.directionData).Render()
+    </span>
+    <div style="padding-left: 20px">
+        @Html.EJS().Button("button").Content("Update").Render()
+    </div>
+</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();
+    col.Field("Freight").HeaderText("Freight").Freeze(Syncfusion.EJ2.Grids.FreezeDirection.Fixed).Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Freeze(Syncfusion.EJ2.Grids.FreezeDirection.Right).Width("130").Add();
+    col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    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();
+}).Render()
+
+<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
+        grid.refreshColumns();
+    });
+</script>
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
new file mode 100644
index 0000000000..267c018f97
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-direction/tagHelper
@@ -0,0 +1,36 @@
+<div style="display: flex">
+    <label style="padding: 5px 10px 26px 0"> Change column: </label>
+    <span style="height:fit-content">
+        <ejs-dropdownlist id="columnDropDown" index="4" dataSource="@ViewBag.dropdownData"></ejs-dropdownlist>
+    </span>
+</div>
+<div style="display: flex">
+    <label style="padding: 5px 10px 26px 0"> Change freeze direction: </label>
+    <span style="height:fit-content">
+        <ejs-dropdownlist id="directionDropDown" index="0" dataSource="@ViewBag.directionData"></ejs-dropdownlist>
+    </span>
+    <div style="padding-left: 20px">
+    <ejs-button  id="button" content="Update"></ejs-button>
+    </div>
+</div>
+
+<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="Freight" headerText="Freight" format='C' freeze='Fixed' textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" freeze='Right' width="130"></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="ShipName" headerText="Ship Name"  width="120"></e-grid-column>
+        <e-grid-column field="ShipAddress" headerText="Ship Address" width="120"></e-grid-column>
+        <e-grid-column field="ShipCity" headerText="Ship City" width="120"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" freeze='Left' width="120"></e-grid-column>
+    </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
+        grid.refreshColumns();
+   });
+</script>
\ No newline at end of file
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
new file mode 100644
index 0000000000..bdcc7dd630
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-particular/frozen.cs
@@ -0,0 +1,7 @@
+public IActionResult DefaultExporting()
+{
+    var order = OrdersDetails.GetAllRecords();
+     ViewBag.dropdownData = new string[] { "OrderID", "CustomerID", "EmployeeID", "Freight", "OrderDate", "ShipCountry", "ShipCity", "ShipAddress", "ShipName" };
+    ViewBag.dataSource = order;
+    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
new file mode 100644
index 0000000000..d0629207a3
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-particular/razor
@@ -0,0 +1,37 @@
+<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()
+  </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();
+    col.Field("CustomerID").HeaderText("Customer ID").IsFrozen(true).Width("130").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).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();
+    col.Field("ShipCity").HeaderText("Ship City").Width("120").Add();
+    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];
+        const selectedColumn = grid.getColumnByField(args.value);
+        // Iterate through all columns and unfreeze any previously frozen columns
+        grid.columns.forEach((column) => {
+            if (column.isFrozen) {
+                column.isFrozen = false;
+            }
+        });
+        // Freeze the newly selected column, if it exists
+        if (selectedColumn) {
+            selectedColumn.isFrozen = true;
+        }
+        // Refresh the columns
+        grid.refreshColumns();
+    }
+</script>
\ No newline at end of file
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
new file mode 100644
index 0000000000..8d7a100008
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/frozen-particular/tagHelper
@@ -0,0 +1,38 @@
+<div style="display: flex">
+    <label style="padding: 10px 10px 26px 0"> Change the frozen column: </label>
+    <span style="height:fit-content">
+        <ejs-dropdownlist id="dropdown" index="1" dataSource="@ViewBag.dropdownData" change="columnChange"></ejs-dropdownlist>
+    </span>
+</div>
+
+<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" 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>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
+        <e-grid-column field="ShipCity" headerText="Ship City" width="120"></e-grid-column>
+        <e-grid-column field="ShipAddress" headerText="Ship Address" width="120"></e-grid-column>
+        <e-grid-column field="ShipName" headerText="Ship Name" width="120"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<script type="text/javascript">
+   function columnChange(args) {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        const selectedColumn = grid.getColumnByField(args.value);
+        // Iterate through all columns and unfreeze any previously frozen columns
+        grid.columns.forEach((column) => {
+            if (column.isFrozen) {
+                column.isFrozen = false;
+            }
+        });
+        // Freeze the newly selected column, if it exists
+        if (selectedColumn) {
+            selectedColumn.isFrozen = true;
+        }
+        // Refresh the columns
+        grid.refreshColumns();
+    }
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/headertemplate.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/headertemplate.cs
index 62440176fe..17bfdc3653 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/headertemplate.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/headertemplate.cs
@@ -1,6 +1,6 @@
 public IActionResult Index()
 {
-    var Emp = EmployeeDetails.GetAllRecords();
-    ViewBag.DataSource = Emp;
-    return View();
-} 
\ No newline at end of file
+  var orders = OrdersDetails.GetAllRecords();
+  ViewBag.DataSource = orders;
+  return View();
+}
\ No newline at end of file
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 dec2bb2f80..7bb1c4d30f 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/razor
@@ -1,31 +1,75 @@
-@Html.EJS().Grid("HeaderTemplate").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
 {
-    col.Field("EmployeeID").HeaderTemplate("#employeetemplate").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("FirstName").Width("140").Add();
-    col.Field("BirthDate").HeaderTemplate("#datetemplate").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("City").Width("120").Add();
-    col.Field("Country").Width("140").Add();
-
-}).AllowPaging().Render()
-
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("140").HeaderTemplate("#customerTemplate").Add();
+    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>
-    .e-grid .e-icon-userlogin::before {
-        width: 15px !important;
-        content: '\e7d4';
+    @@font-face {
+        font-family: 'ej2-headertemplate';
+        src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1vTFIAAAEoAAAAVmNtYXDS2c5qAAABjAAAAEBnbHlmQmNFrQAAAdQAAANoaGVhZBRdbkIAAADQAAAANmhoZWEIUQQEAAAArAAAACRobXR4DAAAAAAAAYAAAAAMbG9jYQCOAbQAAAHMAAAACG1heHABHgENAAABCAAAACBuYW1lohGZJQAABTwAAAKpcG9zdA2o3w0AAAfoAAAAQAABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAATBXy9l8PPPUACwQAAAAAANillKkAAAAA2KWUqQAAAAAD9APzAAAACAACAAAAAAAAAAEAAAADAQEAEQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wLpYAQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAsAAAABgAEAAEAAucC6WD//wAA5wLpYP//AAAAAAABAAYABgAAAAIAAQAAAAAAjgG0ABEAAAAAA8kD8wADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwBPAGsAACUVIzUjFSM1IxUjNSMVIzUjFSM1JRUjNSMVIzUjFSM1IxUjNSMVIzUlFSM1IxUjNSMVIzUjFSM1IxUjNQMVHwYhPwcRITcjDwghNS8HIzUjFSE1IwN2U1NTU1RTU1NTAuxTU1NTVFNTU1MC7FNTU1NUU1NTU1QCAwUGBggIA0QICAcHBQQBAvxsp30ICAcHAgUDAQEDlAECBAUHBwgIfVP+YFOzU1NTU1NTU1NTU6dUVFRUVFRUVFRUplNTU1NTU1NTU1P+NgQIBwcGBAMCAQIEBQcHAwgCdPoBAgQFAwcHCIF8CQgHBgUEAgFTU1MABAAAAAAD9APeADQAbQCuAQAAAAEfCDc1Lwc1PwIPBy8HHww3HwQPATMVPwc1Lx0jDwMfAgUdAR8GBTUzLxQjDx0BFxUfEDsBPxA1Nyc1LxIPEhUCCg8OGxcVExANCgMBAQMDCQQDAgECAxESEhMTExUUFRQTFBISEhEHCwYHCAkKCw0NDw8SuQQGAwIBAgRxlgsKCQcGBAMBAgMDAwUFBQcGBwgICQkKCgsKDAsMDQwNDQ4NDg45BQUDAQEEA/1eAgUGBwkKCwHjeggKDhEUFxs1FRMSEA4NCwoJBwcJBjwODg0ODQ0MDQwLDAoLCgoJCQgIBwYHBQUFAwMDAgEBAQECAgYICg0ODxISFBUXFwwMDA0MDQwMFxcVFBISDw4MCwgGAgIBAQICAwcJCw0PERITFRUXDAwMDA0NDAwMDAsXFRQTEQ8ODQoIBgICAVQEAwgJCgsMCwwbEBAREREZEA8VDAwKCgoIBwYFAwIBAQIDBQYHCAoUFQwLCwsLCgoJCAcGMwsWFhUVHB3QAQIEBggICgueDg4ODg0NDA0MCwsLCwoKCQgJBwgGBwUFBAQDAwECCw8NDxETCrIlawsKCAgGBAIB0AoLCwoLCQgNCAkLDA0NDg4ODg4ZFAIBAwMEBAUGBgYIBwkICQoKCwsLDAwMDA0ODQ4ODgH7DQwMDBgWFRQTERAODAoIBgICAQECAgYICgwOEBETFBUWGAwMDA0MDQwMCxcWFRMSEA8NDAkHAwIBAQEBAQECAwMICwwOEBETFBUWFwwMDQAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQASAAEAAQAAAAAAAgAHABMAAQAAAAAAAwASABoAAQAAAAAABAASACwAAQAAAAAABQALAD4AAQAAAAAABgASAEkAAQAAAAAACgAsAFsAAQAAAAAACwASAIcAAwABBAkAAAACAJkAAwABBAkAAQAkAJsAAwABBAkAAgAOAL8AAwABBAkAAwAkAM0AAwABBAkABAAkAPEAAwABBAkABQAWARUAAwABBAkABgAkASsAAwABBAkACgBYAU8AAwABBAkACwAkAacgZWoyLWhlYWRlcnRlbXBsYXRlUmVndWxhcmVqMi1oZWFkZXJ0ZW1wbGF0ZWVqMi1oZWFkZXJ0ZW1wbGF0ZVZlcnNpb24gMS4wZWoyLWhlYWRlcnRlbXBsYXRlRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABlAGoAMgAtAGgAZQBhAGQAZQByAHQAZQBtAHAAbABhAHQAZQBSAGUAZwB1AGwAYQByAGUAagAyAC0AaABlAGEAZABlAHIAdABlAG0AcABsAGEAdABlAGUAagAyAC0AaABlAGEAZABlAHIAdABlAG0AcABsAGEAdABlAFYAZQByAHMAaQBvAG4AIAAxAC4AMABlAGoAMgAtAGgAZQBhAGQAZQByAHQAZQBtAHAAbABhAHQAZQBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAQIBAwEEAAtCVF9DYWxlbmRhcghlbXBsb3llZQAA) format('truetype');
+        font-weight: normal;
+        font-style: normal;
     }
 
-    .e-grid .e-icon-calender::before {
-        width: 15px !important;
-        content: '\e7b5';
+    .e-icon-calender::before {
+        font-family: 'ej2-headertemplate';
+        content: "\e960";
     }
-</style>
 
+    .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>
+    </div>
+</script>
+<script id="freightTemplate" type="text/x-template">
+    <div id='dropdown'></div>
+</script>
 <script id="datetemplate" type="text/x-template">
-    <span class="e-icon-calender e-icons headericon"></span> Order Date
+    <div style="display:inline-flex">
+        <div id="switch"></div>
+        <label style="padding: 0px 0px 0px 10px" id="dateLabel">Order Date</label>
+    </div>
 </script>
 
-<script id="employeetemplate" type="text/x-template">
-    <span class="e-icon-userlogin e-icons employee"></span> Emp ID
+<script>
+    var headerText = "Order Date";
+    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);
+                }
+           
+        }
+        if (args.cell.column.field === 'OrderDate') {
+            var switchElement = args.node.querySelector('#switch');
+            if (switchElement) {
+                new ej.buttons.Switch({
+                    change: onSwitchToggle
+                }).appendTo(switchElement);
+            }
+
+        }
+    }
+    function onSwitchToggle(args) {
+        headerText = args.checked ? "Purchase Date" : "Order Date";
+        document.getElementById('dateLabel').innerText = headerText;
+    }
 </script>
\ No newline at end of file
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 37c784bc56..e9b4787a70 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertemplate/tagHelper
@@ -1,29 +1,72 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
+<ejs-grid id="Grid" dataSource="@(ViewBag.DataSource)" headerCellInfo="onHeaderCellInfo">
     <e-grid-columns>
-        <e-grid-column field="EmployeeID" headerTemplate="#employeetemplate" textAlign="Right" width="120"></e-grid-column>
-        <e-grid-column field="FirstName" width="140"></e-grid-column>
-        <e-grid-column field="BirthDate" headerTemplate="#datetemplate" textAlign="Right" width="130"></e-grid-column>
-        <e-grid-column field="City" width="120"></e-grid-column>
-        <e-grid-column field="Country" width="140"></e-grid-column>
+        <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-grid-column>
+        <e-grid-column field="CustomerID" headerTemplate="#customerTemplate" width="130"></e-grid-column>
+        <e-grid-column field="Freight" headerText='Freight' width="120" headerTemplate="#freightTemplate" textAlign="Right"></e-grid-column>
+        <e-grid-column field="OrderDate" headerTemplate="#datetemplate" textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
 
-    <style>
-        .e-grid .e-icon-userlogin::before {
-            width: 15px !important;
-            content: '\e7d4';
-        }
+<style>
+    @@font-face {
+        font-family: 'ej2-headertemplate';
+        src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1vTFIAAAEoAAAAVmNtYXDS2c5qAAABjAAAAEBnbHlmQmNFrQAAAdQAAANoaGVhZBRdbkIAAADQAAAANmhoZWEIUQQEAAAArAAAACRobXR4DAAAAAAAAYAAAAAMbG9jYQCOAbQAAAHMAAAACG1heHABHgENAAABCAAAACBuYW1lohGZJQAABTwAAAKpcG9zdA2o3w0AAAfoAAAAQAABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAATBXy9l8PPPUACwQAAAAAANillKkAAAAA2KWUqQAAAAAD9APzAAAACAACAAAAAAAAAAEAAAADAQEAEQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wLpYAQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAsAAAABgAEAAEAAucC6WD//wAA5wLpYP//AAAAAAABAAYABgAAAAIAAQAAAAAAjgG0ABEAAAAAA8kD8wADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwBPAGsAACUVIzUjFSM1IxUjNSMVIzUjFSM1JRUjNSMVIzUjFSM1IxUjNSMVIzUlFSM1IxUjNSMVIzUjFSM1IxUjNQMVHwYhPwcRITcjDwghNS8HIzUjFSE1IwN2U1NTU1RTU1NTAuxTU1NTVFNTU1MC7FNTU1NUU1NTU1QCAwUGBggIA0QICAcHBQQBAvxsp30ICAcHAgUDAQEDlAECBAUHBwgIfVP+YFOzU1NTU1NTU1NTU6dUVFRUVFRUVFRUplNTU1NTU1NTU1P+NgQIBwcGBAMCAQIEBQcHAwgCdPoBAgQFAwcHCIF8CQgHBgUEAgFTU1MABAAAAAAD9APeADQAbQCuAQAAAAEfCDc1Lwc1PwIPBy8HHww3HwQPATMVPwc1Lx0jDwMfAgUdAR8GBTUzLxQjDx0BFxUfEDsBPxA1Nyc1LxIPEhUCCg8OGxcVExANCgMBAQMDCQQDAgECAxESEhMTExUUFRQTFBISEhEHCwYHCAkKCw0NDw8SuQQGAwIBAgRxlgsKCQcGBAMBAgMDAwUFBQcGBwgICQkKCgsKDAsMDQwNDQ4NDg45BQUDAQEEA/1eAgUGBwkKCwHjeggKDhEUFxs1FRMSEA4NCwoJBwcJBjwODg0ODQ0MDQwLDAoLCgoJCQgIBwYHBQUFAwMDAgEBAQECAgYICg0ODxISFBUXFwwMDA0MDQwMFxcVFBISDw4MCwgGAgIBAQICAwcJCw0PERITFRUXDAwMDA0NDAwMDAsXFRQTEQ8ODQoIBgICAVQEAwgJCgsMCwwbEBAREREZEA8VDAwKCgoIBwYFAwIBAQIDBQYHCAoUFQwLCwsLCgoJCAcGMwsWFhUVHB3QAQIEBggICgueDg4ODg0NDA0MCwsLCwoKCQgJBwgGBwUFBAQDAwECCw8NDxETCrIlawsKCAgGBAIB0AoLCwoLCQgNCAkLDA0NDg4ODg4ZFAIBAwMEBAUGBgYIBwkICQoKCwsLDAwMDA0ODQ4ODgH7DQwMDBgWFRQTERAODAoIBgICAQECAgYICgwOEBETFBUWGAwMDA0MDQwMCxcWFRMSEA8NDAkHAwIBAQEBAQECAwMICwwOEBETFBUWFwwMDQAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQASAAEAAQAAAAAAAgAHABMAAQAAAAAAAwASABoAAQAAAAAABAASACwAAQAAAAAABQALAD4AAQAAAAAABgASAEkAAQAAAAAACgAsAFsAAQAAAAAACwASAIcAAwABBAkAAAACAJkAAwABBAkAAQAkAJsAAwABBAkAAgAOAL8AAwABBAkAAwAkAM0AAwABBAkABAAkAPEAAwABBAkABQAWARUAAwABBAkABgAkASsAAwABBAkACgBYAU8AAwABBAkACwAkAacgZWoyLWhlYWRlcnRlbXBsYXRlUmVndWxhcmVqMi1oZWFkZXJ0ZW1wbGF0ZWVqMi1oZWFkZXJ0ZW1wbGF0ZVZlcnNpb24gMS4wZWoyLWhlYWRlcnRlbXBsYXRlRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABlAGoAMgAtAGgAZQBhAGQAZQByAHQAZQBtAHAAbABhAHQAZQBSAGUAZwB1AGwAYQByAGUAagAyAC0AaABlAGEAZABlAHIAdABlAG0AcABsAGEAdABlAGUAagAyAC0AaABlAGEAZABlAHIAdABlAG0AcABsAGEAdABlAFYAZQByAHMAaQBvAG4AIAAxAC4AMABlAGoAMgAtAGgAZQBhAGQAZQByAHQAZQBtAHAAbABhAHQAZQBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAQIBAwEEAAtCVF9DYWxlbmRhcghlbXBsb3llZQAA) format('truetype');
+        font-weight: normal;
+        font-style: normal;
+    }
+    .e-icon-calender::before {
+        font-family: 'ej2-headertemplate';
+        content: "\e960";
+    }
 
-        .e-grid .e-icon-calender::before {
-            width: 15px !important;
-            content: '\e7b5';
-        }
-    </style>
+    .e-icon-userlogin::before {
+        font-family: 'ej2-headertemplate';
+        content: "\e702";
+    }
+</style>
 
-    <script id="datetemplate" type="text/x-template">
-        <span class="e-icon-calender e-icons headericon"></span> Order Date
-    </script>
+<script id="customerTemplate" type="text/x-template">
+    <div>
+        <span class="e-icon-userlogin e-icons employee">Customer ID</span>
+    </div>
+</script>
+<script id="freightTemplate" type="text/x-template">
+    <div id='dropdown'></div>
+</script>
+<script id="datetemplate" type="text/x-template">
+    <div style="display:inline-flex">
+        <div id="switch"></div>
+        <label style="padding: 0px 0px 0px 10px" id="dateLabel">Order Date</label>
+    </div>
+</script>
 
-    <script id="employeetemplate" type="text/x-template">
-        <span class="e-icon-userlogin e-icons employee"></span> Emp ID
-    </script>
\ No newline at end of file
+<script>
+    var headerText = "Order Date";
+    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);
+                }
+        }
+        if (args.cell.column.field === 'OrderDate')
+        {
+            var switchElement = args.node.querySelector('#switch');
+            if (switchElement) {
+                new ej.buttons.Switch({
+                    change: onSwitchToggle
+                }).appendTo(switchElement);
+            }
+
+        }
+    }
+    function onSwitchToggle(args) {
+        headerText = args.checked ? "Purchase Date" : "Order Date";
+        document.getElementById('dateLabel').innerText = headerText;
+    }
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/headertext.cs
new file mode 100644
index 0000000000..76029d8c4a
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/headertext.cs
@@ -0,0 +1,7 @@
+public IActionResult Index()
+{
+    var Order = InventoryDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    ViewBag.dropdownData = new string[] { "Header", "Both" };
+    return View();
+}
\ No newline at end of file
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
new file mode 100644
index 0000000000..0e2f4d9211
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/razor
@@ -0,0 +1,21 @@
+<div style="display: flex">
+    <label style="padding: 10px 10px 26px 0"> Change the wrapmode of auto wrap feature: </label>
+    <span style="height:fit-content">
+        @Html.EJS().DropDownList("Wrap").Index(0).Width("180px").DataSource(@ViewBag.dropdownData).Change("valueChange").Render()
+    </span>
+</div>
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowTextWrap().Columns(col =>
+{
+    col.Field("Inventor").HeaderText("Inventor Name").Width("130").Add();
+    col.Field("NumberOfPatentFamilies").HeaderText("Number of Patent Families").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("Country").HeaderText("Country").Width("100").Add();
+    col.Field("Active").HeaderText("Active").Width("100").Add();
+    col.Field("Mainfieldsofinvention").HeaderText("Main Fields Of Invention").Width("150").Add();
+}).TextWrapSettings(text => { text.WrapMode(Syncfusion.EJ2.Grids.WrapMode.Header); }).Render()
+
+<script>
+    function valueChange(args) {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.textWrapSettings.wrapMode = args.value;
+    }
+</script>
\ No newline at end of file
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
new file mode 100644
index 0000000000..19581f9017
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-autowrap/tagHelper
@@ -0,0 +1,23 @@
+<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>
+    </span>
+</div>
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowTextWrap=true>
+    <e-grid-textwrapsettings wrapMode="Header"></e-grid-textwrapsettings>
+    <e-grid-columns>
+        <e-grid-column field="Inventor" headerText="Inventor Name" textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="NumberOfPatentFamilies" headerText="Number of Patent families" textAlign="Right" width="150"></e-grid-column>
+        <e-grid-column field="Country" headerText="Country" width="100"></e-grid-column>
+        <e-grid-column field="Active" headerText="Active" textAlign="Right" width="100"></e-grid-column>
+        <e-grid-column field="Mainfieldsofinvention" headerText="Main Fields Of Invention" width="150"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+
+<script type="text/javascript">
+    function valueChange(args) {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.textWrapSettings.wrapMode = args.value;
+    }
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/columntext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/columntext.cs
new file mode 100644
index 0000000000..17bfdc3653
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/columntext.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+  var orders = OrdersDetails.GetAllRecords();
+  ViewBag.DataSource = orders;
+  return View();
+}
\ No newline at end of file
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
new file mode 100644
index 0000000000..a0ac706b5a
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/razor
@@ -0,0 +1,28 @@
+<div style="padding:0px 0px 20px 0px">
+    @Html.EJS().Button("buttons").Content("Change Header Text").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();
+    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 () {
+        const headerTextMap = {
+                OrderID: "Order ID",
+                CustomerID: "Customer ID",
+                Freight: "Freight Charge",
+                ShipCountry: "Ship To Country",
+        }
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.columnModel.forEach((column) => {
+            column.headerText = headerTextMap[column.field];
+        });
+        grid.refreshHeader();
+    });
+</script>
+
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
new file mode 100644
index 0000000000..7b1c05d438
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-all/tagHelper
@@ -0,0 +1,30 @@
+<div style="padding:0px 0px 20px 0px">
+    <ejs-button id="buttons" content="Change Header Text">
+    </ejs-button>
+</div>
+<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="130"></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>
+</ejs-grid>
+
+<script type="text/javascript">
+    document.getElementById('buttons').addEventListener('click', function () {
+        const headerTextMap = {
+            OrderID: "Order ID",
+            CustomerID: "Customer ID",
+            Freight: "Freight Charge",
+            ShipCountry: "Ship To Country",
+        }
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.columnModel.forEach((column) => {
+            column.headerText = headerTextMap[column.field];
+        });
+        grid.refreshHeader();
+
+    });
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-height/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-height/headertext.cs
new file mode 100644
index 0000000000..17bfdc3653
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-height/headertext.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+  var orders = OrdersDetails.GetAllRecords();
+  ViewBag.DataSource = orders;
+  return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-height/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-height/razor
new file mode 100644
index 0000000000..a3132d9992
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-height/razor
@@ -0,0 +1,34 @@
+<div id="changeHeight">
+    @Html.EJS().Button("small").Content("Change height 20px").Render()
+    @Html.EJS().Button("medium").Content("Default height 42px").Render()
+    @Html.EJS().Button("big").Content("Change height 60px").Render()
+</div>
+<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>
+<style>
+    #medium,#big {
+        margin-left: 20px;
+    }
+</style>
+<script>
+    document.getElementById('changeHeight').addEventListener('click', function (event) {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        const heightMap = {
+            small: "20px",
+            medium: "34px",
+            big: "60px",
+        };
+        const headerCells = grid.getHeaderContent().querySelectorAll(".e-headercell");
+        headerCells.forEach((headerCell) => {
+            headerCell.style.height = heightMap[event.target.id];
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-height/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-height/tagHelper
new file mode 100644
index 0000000000..fd78af6c13
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change-height/tagHelper
@@ -0,0 +1,36 @@
+<div id="changeHeight">
+    <ejs-button id="small" content="Change height 20px"></ejs-button>
+    <ejs-button id="medium" content="Default height 42px"></ejs-button>
+    <ejs-button id="big" content="Change height 60px"></ejs-button>
+</div>
+<div style='padding:20px 0px 0px 0px'>
+<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="130"></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>
+</ejs-grid>
+</div>
+<style>
+#medium,
+#big {
+  margin-left: 20px;
+}
+</style>
+<script>
+    document.getElementById('changeHeight').addEventListener('click', function (event) {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        const heightMap = {
+              small: "20px",
+              medium: "34px",
+              big: "60px",
+        };
+        const headerCells = grid.getHeaderContent().querySelectorAll(".e-headercell");
+        headerCells.forEach((headerCell) => {
+          headerCell.style.height = heightMap[event.target.id];
+        });
+    });
+</script>
\ No newline at end of file
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
new file mode 100644
index 0000000000..0899739419
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/columntext.cs
@@ -0,0 +1,7 @@
+public IActionResult Index()
+{
+  var orders = OrdersDetails.GetAllRecords();
+  ViewBag.DataSource = orders;
+  ViewBag.dropdownData = new string[] { "OrderID", "CustomerID", "Freight", "OrderDate","ShipCountry" };
+  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
new file mode 100644
index 0000000000..e7b051dd1b
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/razor
@@ -0,0 +1,34 @@
+<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()
+    </span>
+</div>
+<div style="padding:0px 0px 20px 0px">
+    <label style="padding: 23px 4px 0 0;font-weight: bold;">Enter new header text :</label>
+    @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();
+    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();
+}).AllowPaging().Render()
+
+<script>
+    document.getElementById('buttons').addEventListener('click', function () {
+        var TextBoxValue = document.getElementById('textbox').value;
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        if (TextBoxValue !== "") {
+            const column = grid.getColumnByField(
+                document.getElementById('dropdown').value
+            );
+            column.headerText = TextBoxValue;
+            grid.refreshHeader();
+        }
+    });
+</script>
\ No newline at end of file
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
new file mode 100644
index 0000000000..549f988332
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-change/tagHelper
@@ -0,0 +1,37 @@
+<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>
+    </span>
+</div>
+<div style="padding:0px 0px 20px 0px">
+    <label style="padding: 23px 4px 0 0;font-weight: bold;">Enter new header text :</label>
+    <ejs-textbox id="textbox" placeholder="Enter new header text" width="220">
+    </ejs-textbox>
+    <ejs-button style="margin-left: 10px" id="buttons" content="Change">
+    </ejs-button>
+</div>
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true">
+    <e-grid-columns>
+        <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" 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="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>
+</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 !== "") {
+            const column = grid.getColumnByField(
+                document.getElementById('dropdown').value
+            );
+            column.headerText = TextBoxValue;
+            grid.refreshHeader();
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/headertext.cs
new file mode 100644
index 0000000000..17bfdc3653
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/headertext.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+  var orders = OrdersDetails.GetAllRecords();
+  ViewBag.DataSource = orders;
+  return View();
+}
\ No newline at end of file
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
new file mode 100644
index 0000000000..38c07e16df
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/razor
@@ -0,0 +1,23 @@
+@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.Center).CustomAttributes(new { @class = "orientationcss" }).Add();
+    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);
+    }
+</style>
+<script>
+    function setHeaderHeight(args) {
+        var textWidth = document.querySelector(".orientationcss > div").scrollWidth; // obtain the width of the headerText content.
+        var headerCell = document.querySelectorAll(".e-headercell");
+        for (var i = 0; i < headerCell.length; i++) {
+            headerCell.item(i).style.height = textWidth + 'px'; // assign the obtained textWidth as the height of the headerCell.
+        }
+    }
+</script>
\ No newline at end of file
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
new file mode 100644
index 0000000000..64393d4224
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-orientation/tagHelper
@@ -0,0 +1,24 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" created="setHeaderHeight">
+    <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" customAttributes="@(new { @class="orientationcss" })" format='C' textAlign="Center" 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="ShipCity" headerText="Ship City" width="120"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+
+<style>
+    .orientationcss .e-headercelldiv {
+        transform: rotate(90deg);
+    }
+</style>
+<script>
+    function setHeaderHeight(args) {
+        var textWidth = document.querySelector(".orientationcss > div").scrollWidth; // obtain the width of the headerText content.
+        var headerCell = document.querySelectorAll(".e-headercell");
+        for (var i = 0; i < headerCell.length; i++) {
+            headerCell.item(i).style.height = textWidth + 'px'; // assign the obtained textWidth as the height of the headerCell.
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/headertext.cs
new file mode 100644
index 0000000000..17bfdc3653
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/headertext.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+  var orders = OrdersDetails.GetAllRecords();
+  ViewBag.DataSource = orders;
+  return View();
+}
\ No newline at end of file
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
new file mode 100644
index 0000000000..479fc970ea
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/razor
@@ -0,0 +1,21 @@
+@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
new file mode 100644
index 0000000000..5cbcac8b10
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-refresh/tagHelper
@@ -0,0 +1,21 @@
+<ejs-button id="button" content="Refresh Header"></ejs-button>
+<div style='padding:20px 0px 0px 0px'>
+<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="130"></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>
+</ejs-grid>
+</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-stacked/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/razor
new file mode 100644
index 0000000000..d8388dd5e0
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/razor
@@ -0,0 +1,58 @@
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").HeaderTemplate("#orderIDTemplate").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.HeaderText("Order Details").HeaderTemplate("#orderDetailsTemplate").Columns(new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { Field = "OrderDate",HeaderTemplate= "#datetemplate", Width = "135", HeaderText = "Order Date",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right,Format="yMd", MinWidth="10" },
+        new Syncfusion.EJ2.Grids.GridColumn { Field = "Freight", Width = "130", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right, HeaderText = "Freight($)", Format="C2", MinWidth="10"} }).Add();
+    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";
+        src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1vTFIAAAEoAAAAVmNtYXDS2c5qAAABjAAAAEBnbHlmQmNFrQAAAdQAAANoaGVhZBRdbkIAAADQAAAANmhoZWEIUQQEAAAArAAAACRobXR4DAAAAAAAAYAAAAAMbG9jYQCOAbQAAAHMAAAACG1heHABHgENAAABCAAAACBuYW1lohGZJQAABTwAAAKpcG9zdA2o3w0AAAfoAAAAQAABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAATBXy9l8PPPUACwQAAAAAANillKkAAAAA2KWUqQAAAAAD9APzAAAACAACAAAAAAAAAAEAAAADAQEAEQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wLpYAQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAsAAAABgAEAAEAAucC6WD//wAA5wLpYP//AAAAAAABAAYABgAAAAIAAQAAAAAAjgG0ABEAAAAAA8kD8wADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwBPAGsAACUVIzUjFSM1IxUjNSMVIzUjFSM1JRUjNSMVIzUjFSM1IxUjNSMVIzUlFSM1IxUjNSMVIzUjFSM1IxUjNQMVHwYhPwcRITcjDwghNS8HIzUjFSE1IwN2U1NTU1RTU1NTAuxTU1NTVFNTU1MC7FNTU1NUU1NTU1QCAwUGBggIA0QICAcHBQQBAvxsp30ICAcHAgUDAQEDlAECBAUHBwgIfVP+YFOzU1NTU1NTU1NTU6dUVFRUVFRUVFRUplNTU1NTU1NTU1P+NgQIBwcGBAMCAQIEBQcHAwgCdPoBAgQFAwcHCIF8CQgHBgUEAgFTU1MABAAAAAAD9APeADQAbQCuAQAAAAEfCDc1Lwc1PwIPBy8HHww3HwQPATMVPwc1Lx0jDwMfAgUdAR8GBTUzLxQjDx0BFxUfEDsBPxA1Nyc1LxIPEhUCCg8OGxcVExANCgMBAQMDCQQDAgECAxESEhMTExUUFRQTFBISEhEHCwYHCAkKCw0NDw8SuQQGAwIBAgRxlgsKCQcGBAMBAgMDAwUFBQcGBwgICQkKCgsKDAsMDQwNDQ4NDg45BQUDAQEEA/1eAgUGBwkKCwHjeggKDhEUFxs1FRMSEA4NCwoJBwcJBjwODg0ODQ0MDQwLDAoLCgoJCQgIBwYHBQUFAwMDAgEBAQECAgYICg0ODxISFBUXFwwMDA0MDQwMFxcVFBISDw4MCwgGAgIBAQICAwcJCw0PERITFRUXDAwMDA0NDAwMDAsXFRQTEQ8ODQoIBgICAVQEAwgJCgsMCwwbEBAREREZEA8VDAwKCgoIBwYFAwIBAQIDBQYHCAoUFQwLCwsLCgoJCAcGMwsWFhUVHB3QAQIEBggICgueDg4ODg0NDA0MCwsLCwoKCQgJBwgGBwUFBAQDAwECCw8NDxETCrIlawsKCAgGBAIB0AoLCwoLCQgNCAkLDA0NDg4ODg4ZFAIBAwMEBAUGBgYIBwkICQoKCwsLDAwMDA0ODQ4ODgH7DQwMDBgWFRQTERAODAoIBgICAQECAgYICgwOEBETFBUWGAwMDA0MDQwMCxcWFRMSEA8NDAkHAwIBAQEBAQECAwMICwwOEBETFBUWFwwMDQAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQASAAEAAQAAAAAAAgAHABMAAQAAAAAAAwASABoAAQAAAAAABAASACwAAQAAAAAABQALAD4AAQAAAAAABgASAEkAAQAAAAAACgAsAFsAAQAAAAAACwASAIcAAwABBAkAAAACAJkAAwABBAkAAQAkAJsAAwABBAkAAgAOAL8AAwABBAkAAwAkAM0AAwABBAkABAAkAPEAAwABBAkABQAWARUAAwABBAkABgAkASsAAwABBAkACgBYAU8AAwABBAkACwAkAacgZWoyLWhlYWRlcnRlbXBsYXRlUmVndWxhcmVqMi1oZWFkZXJ0ZW1wbGF0ZWVqMi1oZWFkZXJ0ZW1wbGF0ZVZlcnNpb24gMS4wZWoyLWhlYWRlcnRlbXBsYXRlRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABlAGoAMgAtAGgAZQBhAGQAZQByAHQAZQBtAHAAbABhAHQAZQBSAGUAZwB1AGwAYQByAGUAagAyAC0AaABlAGEAZABlAHIAdABlAG0AcABsAGEAdABlAGUAagAyAC0AaABlAGEAZABlAHIAdABlAG0AcABsAGEAdABlAFYAZQByAHMAaQBvAG4AIAAxAC4AMABlAGoAMgAtAGgAZQBhAGQAZQByAHQAZQBtAHAAbABhAHQAZQBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAQIBAwEEAAtCVF9DYWxlbmRhcghlbXBsb3llZQAA) format("truetype");
+        font-weight: normal;
+        font-style: normal;
+    }
+    .e-icon-calender::before {
+        font-family: "ej2-headertemplate";
+        content: "\e960";
+    }
+</style>
+<script id="orderIDTemplate" type="text/x-template">
+    <a href="#">OrderID</a>
+</script>
+<script id="shipDetailsTemplate" type="text/x-template">
+    <div>
+        <span>Ship Details</span>
+        <span>
+            (<i class="fa fa-truck"></i>)
+        </span>
+    </div>
+</script>
+<script id="orderDetailsTemplate" type="text/x-template">
+    <div id='dropdown'></div>
+</script>
+<script id="datetemplate" type="text/x-template">
+    <div>
+        <span style="padding-right: 7px;" class="e-icon-calender e-icons headericon"></span>
+        Order Date
+    </div>
+</script>
+<script>
+    var dropdownData = ["Order Details", "Order Information"]
+    function onHeaderCellInfo(args) {
+        if (args.cell.column.headerText === 'Order Details') {
+            var dropdownElement = args.node.querySelector('#dropdown');
+            if (dropdownElement) {
+                new ej.dropdowns.DropDownList({
+                    index: "0",
+                    dataSource: dropdownData
+                }).appendTo(dropdownElement);
+            }
+        }
+
+    }
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/stackedHeader.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/stackedHeader.cs
new file mode 100644
index 0000000000..7bee9f9efa
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/stackedHeader.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+  var orders = OrdersDetails.GetAllRecords();
+  ViewBag.DataSource= orders;
+  return View();
+}
\ 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
new file mode 100644
index 0000000000..3707b4fad0
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-stacked/tagHelper
@@ -0,0 +1,58 @@
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+<ejs-grid id="Grid" dataSource="@(ViewBag.DataSource)" headerCellInfo="onHeaderCellInfo">
+    <e-grid-columns>
+        <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' headerTemplate="#orderIDTemplate" width=120></e-grid-column>
+        <e-grid-column headerText="Order Details"
+            columns="@( new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { Field = "OrderDate", Width = "130", HeaderText = "Order Date", Format="yMd",HeaderTemplate= "#datetemplate" ,TextAlign= Syncfusion.EJ2.Grids.TextAlign.Right,MinWidth="10" },
+                new Syncfusion.EJ2.Grids.GridColumn { Field = "Freight", Width = "135", HeaderText = "Freight($)", Format="C2",  TextAlign= Syncfusion.EJ2.Grids.TextAlign.Right,  MinWidth="10" } } )"
+                width="130" headerTemplate="#orderDetailsTemplate"></e-grid-column>
+        <e-grid-column 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" } } )">
+        </e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<style>
+    @@font-face {
+        font-family: "ej2-headertemplate";
+        src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1vTFIAAAEoAAAAVmNtYXDS2c5qAAABjAAAAEBnbHlmQmNFrQAAAdQAAANoaGVhZBRdbkIAAADQAAAANmhoZWEIUQQEAAAArAAAACRobXR4DAAAAAAAAYAAAAAMbG9jYQCOAbQAAAHMAAAACG1heHABHgENAAABCAAAACBuYW1lohGZJQAABTwAAAKpcG9zdA2o3w0AAAfoAAAAQAABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAATBXy9l8PPPUACwQAAAAAANillKkAAAAA2KWUqQAAAAAD9APzAAAACAACAAAAAAAAAAEAAAADAQEAEQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wLpYAQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAsAAAABgAEAAEAAucC6WD//wAA5wLpYP//AAAAAAABAAYABgAAAAIAAQAAAAAAjgG0ABEAAAAAA8kD8wADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwBPAGsAACUVIzUjFSM1IxUjNSMVIzUjFSM1JRUjNSMVIzUjFSM1IxUjNSMVIzUlFSM1IxUjNSMVIzUjFSM1IxUjNQMVHwYhPwcRITcjDwghNS8HIzUjFSE1IwN2U1NTU1RTU1NTAuxTU1NTVFNTU1MC7FNTU1NUU1NTU1QCAwUGBggIA0QICAcHBQQBAvxsp30ICAcHAgUDAQEDlAECBAUHBwgIfVP+YFOzU1NTU1NTU1NTU6dUVFRUVFRUVFRUplNTU1NTU1NTU1P+NgQIBwcGBAMCAQIEBQcHAwgCdPoBAgQFAwcHCIF8CQgHBgUEAgFTU1MABAAAAAAD9APeADQAbQCuAQAAAAEfCDc1Lwc1PwIPBy8HHww3HwQPATMVPwc1Lx0jDwMfAgUdAR8GBTUzLxQjDx0BFxUfEDsBPxA1Nyc1LxIPEhUCCg8OGxcVExANCgMBAQMDCQQDAgECAxESEhMTExUUFRQTFBISEhEHCwYHCAkKCw0NDw8SuQQGAwIBAgRxlgsKCQcGBAMBAgMDAwUFBQcGBwgICQkKCgsKDAsMDQwNDQ4NDg45BQUDAQEEA/1eAgUGBwkKCwHjeggKDhEUFxs1FRMSEA4NCwoJBwcJBjwODg0ODQ0MDQwLDAoLCgoJCQgIBwYHBQUFAwMDAgEBAQECAgYICg0ODxISFBUXFwwMDA0MDQwMFxcVFBISDw4MCwgGAgIBAQICAwcJCw0PERITFRUXDAwMDA0NDAwMDAsXFRQTEQ8ODQoIBgICAVQEAwgJCgsMCwwbEBAREREZEA8VDAwKCgoIBwYFAwIBAQIDBQYHCAoUFQwLCwsLCgoJCAcGMwsWFhUVHB3QAQIEBggICgueDg4ODg0NDA0MCwsLCwoKCQgJBwgGBwUFBAQDAwECCw8NDxETCrIlawsKCAgGBAIB0AoLCwoLCQgNCAkLDA0NDg4ODg4ZFAIBAwMEBAUGBgYIBwkICQoKCwsLDAwMDA0ODQ4ODgH7DQwMDBgWFRQTERAODAoIBgICAQECAgYICgwOEBETFBUWGAwMDA0MDQwMCxcWFRMSEA8NDAkHAwIBAQEBAQECAwMICwwOEBETFBUWFwwMDQAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQASAAEAAQAAAAAAAgAHABMAAQAAAAAAAwASABoAAQAAAAAABAASACwAAQAAAAAABQALAD4AAQAAAAAABgASAEkAAQAAAAAACgAsAFsAAQAAAAAACwASAIcAAwABBAkAAAACAJkAAwABBAkAAQAkAJsAAwABBAkAAgAOAL8AAwABBAkAAwAkAM0AAwABBAkABAAkAPEAAwABBAkABQAWARUAAwABBAkABgAkASsAAwABBAkACgBYAU8AAwABBAkACwAkAacgZWoyLWhlYWRlcnRlbXBsYXRlUmVndWxhcmVqMi1oZWFkZXJ0ZW1wbGF0ZWVqMi1oZWFkZXJ0ZW1wbGF0ZVZlcnNpb24gMS4wZWoyLWhlYWRlcnRlbXBsYXRlRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABlAGoAMgAtAGgAZQBhAGQAZQByAHQAZQBtAHAAbABhAHQAZQBSAGUAZwB1AGwAYQByAGUAagAyAC0AaABlAGEAZABlAHIAdABlAG0AcABsAGEAdABlAGUAagAyAC0AaABlAGEAZABlAHIAdABlAG0AcABsAGEAdABlAFYAZQByAHMAaQBvAG4AIAAxAC4AMABlAGoAMgAtAGgAZQBhAGQAZQByAHQAZQBtAHAAbABhAHQAZQBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAQIBAwEEAAtCVF9DYWxlbmRhcghlbXBsb3llZQAA) format("truetype");
+        font-weight: normal;
+        font-style: normal;
+    }
+    .e-icon-calender::before {
+        font-family: "ej2-headertemplate";
+        content: "\e960";
+    }
+
+</style>
+<script id="orderIDTemplate"  type="text/x-template">
+    <a href="#">OrderID</a>
+</script>
+<script id="shipDetailsTemplate"   type="text/x-template">
+    <div> <span>Ship Details</span>
+    <span>(<i class="fa fa-truck"></i>)
+    </span></div>
+</script>
+<script id="orderDetailsTemplate" type="text/x-template">
+    <div id='dropdown'></div>
+</script>
+<script id="datetemplate" type="text/x-template">
+    <div>
+        <span style="padding-right: 7px;" class="e-icon-calender e-icons headericon"></span>
+        Order Date
+    <div>    
+</script>
+<script>
+    var dropdownData = ["Order Details", "Order Information"]
+    function onHeaderCellInfo(args) {
+        if (args.cell.column.headerText === 'Order Details') {
+            var dropdownElement = args.node.querySelector('#dropdown');
+            if (dropdownElement) {
+                new ej.dropdowns.DropDownList({
+                    index:"0",
+                    dataSource: dropdownData
+                }).appendTo(dropdownElement);
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/headertext.cs
new file mode 100644
index 0000000000..f9f98c90cb
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/headertext.cs
@@ -0,0 +1,7 @@
+public IActionResult Index()
+{
+  var orders = OrdersDetails.GetAllRecords();
+  ViewBag.DataSource = orders;
+  ViewBag.dropdownData = new string[] { "Left", "Right", "Center", "Justify"};
+  return View();
+}
\ No newline at end of file
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
new file mode 100644
index 0000000000..a345da7aab
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/razor
@@ -0,0 +1,23 @@
+<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()
+    </span>
+</div>
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
+    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.refreshHeader();
+    }
+</script>
\ No newline at end of file
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
new file mode 100644
index 0000000000..63a11919e3
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-textalign/tagHelper
@@ -0,0 +1,23 @@
+<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>
+    </span>
+</div>
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="315px">
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" width="120" textAlign="Left"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID"  width="140"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format="C" width="120" textAlign="Left"></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="140" textAlign="Left"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<script type="text/javascript">
+    function changeAlignment(args) {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.columnModel.forEach((col) => {
+            col.headerTextAlign = args.value;
+        });
+        grid.refreshHeader();
+    }
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-tooltip/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-tooltip/headertext.cs
new file mode 100644
index 0000000000..17bfdc3653
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-tooltip/headertext.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+  var orders = OrdersDetails.GetAllRecords();
+  ViewBag.DataSource = orders;
+  return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-tooltip/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-tooltip/razor
new file mode 100644
index 0000000000..5e2c9dc15e
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-tooltip/razor
@@ -0,0 +1,27 @@
+@Html.EJS().Tooltip("tooltip").Target(".e-headertext").Position(Syncfusion.EJ2.Popups.Position.TopCenter).ContentTemplate(@<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();
+        col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+        col.Field("ShipName").HeaderText("Ship Name").Width("120").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>).BeforeRender("beforeRender").Render()
+<script>
+    function beforeRender(args) {
+        const columnDescriptions = {
+            "Order ID": "A unique number assigned to each order.",
+            "Freight": "The cost of shipping the order.",
+            "Ship Name": "The name of the person or company who will receive the shipment.",
+            "Ship Country": "The country to which the shipment will be sent.",
+            "Order Date": "The date when the order was placed.",
+        };
+        var tooltip = document.getElementById("tooltip").ej2_instances[0];
+        const headerText = args.target.innerText;
+        const description = columnDescriptions[headerText];
+        if (description) {
+            tooltip.content = headerText + ": " + description;
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-tooltip/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-tooltip/tagHelper
new file mode 100644
index 0000000000..e33d9e32a7
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-tooltip/tagHelper
@@ -0,0 +1,30 @@
+<ejs-tooltip id="tooltip" position="TopCenter" target=".e-headertext" beforeRender="beforeRender">
+    <e-content-template>
+        <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="Freight" headerText="Freight" format='C' textAlign="Center" width="120"></e-grid-column>
+                <e-grid-column field="ShipName" headerText="Ship Name" 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>
+        </ejs-grid>
+    </e-content-template>
+</ejs-tooltip>
+<script>
+    function beforeRender(args) {
+        const columnDescriptions = {
+            "Order ID": "A unique number assigned to each order.",
+            "Freight": "The cost of shipping the order.",
+            "Ship Name": "The name of the person or company who will receive the shipment.",
+            "Ship Country": "The country to which the shipment will be sent.",
+            "Order Date": "The date when the order was placed.",
+        };
+        var tooltip = document.getElementById("tooltip").ej2_instances[0];
+        const headerText = args.target.innerText;
+        const description = columnDescriptions[headerText];
+        if (description) {
+            tooltip.content = headerText + ": " + description;
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-css/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-css/headertext.cs
new file mode 100644
index 0000000000..17bfdc3653
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-css/headertext.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+  var orders = OrdersDetails.GetAllRecords();
+  ViewBag.DataSource = orders;
+  return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-css/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-css/razor
new file mode 100644
index 0000000000..c6087aa71e
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-css/razor
@@ -0,0 +1,14 @@
+@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()
+<style>
+    .e-grid .e-headercell {
+        background-color: #a2d6f4;
+        color: rgb(3, 2, 2);
+    }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-css/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-css/tagHelper
new file mode 100644
index 0000000000..391599e9ae
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-css/tagHelper
@@ -0,0 +1,15 @@
+<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="130"></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>
+</ejs-grid>
+<style>
+    .e-grid .e-headercell {
+        background-color: #a2d6f4;
+        color: rgb(3, 2, 2);
+    }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/headertext.cs
new file mode 100644
index 0000000000..17bfdc3653
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/headertext.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+  var orders = OrdersDetails.GetAllRecords();
+  ViewBag.DataSource = orders;
+  return View();
+}
\ No newline at end of file
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
new file mode 100644
index 0000000000..a172ab0eb0
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/razor
@@ -0,0 +1,21 @@
+@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();
+}).HeaderCellInfo("onHeaderCellInfo").Render()
+
+<style>
+    .e-grid .e-headercell.customcss {
+        color: rgb(14, 10, 10);
+        background-color: #52c5dcab;
+    }
+</style>
+<script>
+    function onHeaderCellInfo(args) {
+        if (args.cell.column.field == "OrderDate")
+            args.node.classList.add("customcss");
+    }
+</script>
\ No newline at end of file
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
new file mode 100644
index 0000000000..bdaf4acf36
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-event/tagHelper
@@ -0,0 +1,21 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true" headerCellInfo="onHeaderCellInfo">
+    <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="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>
+</ejs-grid>
+<style>
+    .e-grid .e-headercell.customcss {
+        color: rgb(14, 10, 10);
+        background-color: #52c5dcab;
+    }
+</style>
+<script>
+    function onHeaderCellInfo(args) {
+        if (args.cell.column.field == "OrderDate")
+            args.node.classList.add("customcss");
+    }
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-method/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-method/headertext.cs
new file mode 100644
index 0000000000..17bfdc3653
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-method/headertext.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+  var orders = OrdersDetails.GetAllRecords();
+  ViewBag.DataSource = orders;
+  return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-method/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-method/razor
new file mode 100644
index 0000000000..ba416163c1
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-method/razor
@@ -0,0 +1,24 @@
+@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("ShipCountry").HeaderText("Ship Country").Width("120").Add();
+}).DataBound("dataBound").Render()
+    
+<script>
+    function dataBound() {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.getColumnHeaderByIndex(0).style.color = 'green';
+        grid.getColumnHeaderByField('CustomerID').style.background = 'rgb(217, 244, 235)';
+        grid.getColumnHeaderByField('OrderID').style.background = 'rgb(217, 244, 235)';
+        grid.getColumnHeaderByField('ShipCountry').style.background = 'rgb(217, 244, 235)';
+        grid.getColumnHeaderByField('CustomerID').style.color = 'green';
+        grid.getColumnHeaderByUid('grid-column2').style.background = 'rgb(217, 244, 235)';
+        const columnIndex = grid.getColumnIndexByField('ShipCountry');
+        grid.getColumnHeaderByIndex(columnIndex).style.color = 'green';
+        const index = grid.getColumnIndexByUid('grid-column2');
+        grid.getColumnHeaderByIndex(index).style.color = 'green';
+    
+    }
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-method/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-method/tagHelper
new file mode 100644
index 0000000000..76a5b36f05
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-method/tagHelper
@@ -0,0 +1,23 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" dataBound="dataBound" height="320">
+    <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="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<script>
+    function dataBound(args) {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.getColumnHeaderByIndex(0).style.color = 'green';
+        grid.getColumnHeaderByField('CustomerID').style.background = 'rgb(217, 244, 235)';
+        grid.getColumnHeaderByField('OrderID').style.background = 'rgb(217, 244, 235)';
+        grid.getColumnHeaderByField('ShipCountry').style.background = 'rgb(217, 244, 235)';
+        grid.getColumnHeaderByField('CustomerID').style.color = 'green';
+        grid.getColumnHeaderByUid('grid-column2').style.background = 'rgb(217, 244, 235)';
+        const columnIndex = grid.getColumnIndexByField('ShipCountry');
+        grid.getColumnHeaderByIndex(columnIndex).style.color = 'green';
+        const index = grid.getColumnIndexByUid('grid-column2');
+        grid.getColumnHeaderByIndex(index).style.color = 'green';
+    }
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-property/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-property/headertext.cs
new file mode 100644
index 0000000000..17bfdc3653
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-property/headertext.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+  var orders = OrdersDetails.GetAllRecords();
+  ViewBag.DataSource = orders;
+  return View();
+}
\ No newline at end of file
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
new file mode 100644
index 0000000000..e2e9bb36c0
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-property/razor
@@ -0,0 +1,18 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").CustomAttributes(new { @class = "customcss" }).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").CustomAttributes(new { @class = "customcss" }).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").CustomAttributes(new { @class = "customcss" }).Width("120").Add();
+}).Render()
+
+<style>
+   .e-grid .e-headercell.customcss {
+        background-color: rgb(43, 195, 226);
+        color: rgb(10, 8, 8);
+    }
+    .e-grid .e-headercell {
+        background-color: #a2d6f4;
+    }
+</style> 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-property/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-property/tagHelper
new file mode 100644
index 0000000000..51b2f29bf5
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext-using-property/tagHelper
@@ -0,0 +1,18 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
+    <e-grid-columns>
+        <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' customAttributes="@(new { @class="customcss" })" 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" customAttributes="@(new { @class="customcss" })" 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" customAttributes="@(new { @class="customcss" })" width="120"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<style>
+    .e-grid .e-headercell.customcss {
+        background-color: rgb(43, 195, 226);
+        color: rgb(10, 8, 8);
+    }
+    .e-grid .e-headercell {
+        background-color: #a2d6f4;
+    }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/headertext.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/headertext.cs
index 62440176fe..27e57a554b 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/headertext.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/headertext.cs
@@ -1,6 +1,7 @@
 public IActionResult Index()
 {
-    var Emp = EmployeeDetails.GetAllRecords();
-    ViewBag.DataSource = Emp;
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
     return View();
-} 
\ No newline at end of file
+} 
+
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/razor
index e8f5740e7a..e6287cd6f6 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/razor
@@ -1,9 +1,7 @@
-@Html.EJS().Grid("HeaderText").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
+@Html.EJS().Grid("HeaderText").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
 {
-    col.Field("EmployeeID").HeaderText("Employee ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("FirstName").HeaderText("First Name").Width("140").Add();
-    col.Field("BirthDate").HeaderText("Birth Date").Format("yMd").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("City").Width("120").Add();
-    col.Field("Country").HeaderText("Country").Width("140").Add();
-
-}).AllowPaging().Render()
\ No newline at end of file
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
+    col.Field("Freight").HeaderText("Freight").Format("yMd").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("OrderDate").HeaderText("Order Date").Width("140").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+}).Render()
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/tagHelper
index a243b9f449..b38e02948b 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/headertext/tagHelper
@@ -1,9 +1,8 @@
 <ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
     <e-grid-columns>
-        <e-grid-column field="EmployeeID" headerText="Employee ID"  textAlign="Right" width="120"></e-grid-column>
-        <e-grid-column field="FirstName" headerText="First Name" width="140"></e-grid-column>
-        <e-grid-column field="BirthDate" headerText="Birth Date"  textAlign="Right" width="130"></e-grid-column>
-        <e-grid-column field="City" headerText="City" width="120"></e-grid-column>
-        <e-grid-column field="Country" width="140"></e-grid-column>
+        <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" textAlign='Left'></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format='C' width="120"></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" type='date' format="yMd" width="140"></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/reorder-field/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-field/razor
new file mode 100644
index 0000000000..40d766ac87
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-field/razor
@@ -0,0 +1,31 @@
+<div style="padding:0px 0px 20px 0px">
+    @Html.EJS().Button("reordersingle").CssClass("e-info").Content("Reorder single column").Render()
+    @Html.EJS().Button("reordermultiple").CssClass("e-info").Content("Reorder mutiple columns").Render()
+</div>
+@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();
+}).Render()
+
+</div>
+<style>
+.e-btn.e-info, .e-css.e-btn.e-info {
+    margin-right: 4px;
+    margin-bottom: 3px;
+}
+</style>
+<script type="text/javascript">
+document.getElementById('reordersingle').addEventListener('click', function () {
+    var grid = document.getElementById("Grid").ej2_instances[0];
+    grid.reorderColumns("ShipCity", "OrderID");
+});
+document.getElementById('reordermultiple').addEventListener('click', function () {
+    var grid = document.getElementById("Grid").ej2_instances[0];
+    grid.reorderColumns(['ShipName', 'ShipCity', 'ShipCountry'], 'OrderID');
+});
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-field/reorder.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-field/reorder.cs
new file mode 100644
index 0000000000..a313f00f64
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-field/reorder.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 
\ No newline at end of file
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
new file mode 100644
index 0000000000..7472af37f1
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-field/tagHelper
@@ -0,0 +1,31 @@
+<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 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>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="100"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="130"></e-grid-column>
+        <e-grid-column field="ShipName" headerText="Ship Name" 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>
+<style>
+    .e-btn.e-info, .e-css.e-btn.e-info {
+        margin-right: 4px;
+        margin-bottom: 3px;
+    }
+</style >
+<script type="text/javascript">
+    document.getElementById('reordersingle').addEventListener('click', function () {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.reorderColumns("ShipCity", "OrderID");
+    });
+    document.getElementById('reordermultiple').addEventListener('click', function () {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.reorderColumns(['ShipName', 'ShipCity', 'ShipCountry'], 'OrderID');
+    });
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-prevent/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-prevent/razor
new file mode 100644
index 0000000000..27e6864f97
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-prevent/razor
@@ -0,0 +1,8 @@
+@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("120").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").AllowReordering(false).Add();
+    col.Field("ShipCity").HeaderText("Ship City").Width("130").Add();
+}).Render()
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-prevent/reorder.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-prevent/reorder.cs
new file mode 100644
index 0000000000..a313f00f64
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-prevent/reorder.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-prevent/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-prevent/tagHelper
new file mode 100644
index 0000000000..882c8a4f94
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder-prevent/tagHelper
@@ -0,0 +1,9 @@
+<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>
+        <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="120"></e-grid-column>
+        <e-grid-column field="ShipName" headerText="Ship Name" allowReordering='false' width="130"></e-grid-column>
+        <e-grid-column field="ShipCity" headerText="Ship City" 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/reorder/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder/razor
index 34ac655ad1..3f2aa56c56 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/reorder/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder/razor
@@ -1,8 +1,8 @@
-@Html.EJS().Grid("Reorder").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowReordering().Columns(col =>
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowReordering().Columns(col =>
 {
-   col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("FirstName").HeaderText("Name").Width("125").Add();
-   col.Field("Title").HeaderText("Title").Width("190").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("HireDate").HeaderText("Hire Date").Width("135").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
-
+    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("OrderDate").HeaderText("Order Date").Width("120").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("130").Add();
 }).Render()
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reorder/reorder.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder/reorder.cs
index 62440176fe..a313f00f64 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/reorder/reorder.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder/reorder.cs
@@ -1,6 +1,6 @@
 public IActionResult Index()
 {
-    var Emp = EmployeeDetails.GetAllRecords();
-    ViewBag.DataSource = Emp;
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
     return View();
 } 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reorder/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder/tagHelper
index 4702b77d7e..42fe9cd61d 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/reorder/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reorder/tagHelper
@@ -1,8 +1,9 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowReordering="true"  height="315">   
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowReordering='true'>
     <e-grid-columns>
-        <e-grid-column field="EmployeeID" headerText="Employee ID"  width="100"></e-grid-column>
-        <e-grid-column field="FirstName" headerText="First Name"  width="120"></e-grid-column>
-        <e-grid-column field="Title" headerText="Title" width="100"></e-grid-column>
-        <e-grid-column field="BirthDate" headerText="Birth Date" width="100" format="yMd"></e-grid-column>
+        <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width="120"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="100"></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="120"></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/reordercols/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/reordercols/razor
index 67e32e07f4..276e6d4c5c 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/reordercols/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reordercols/razor
@@ -1,19 +1,17 @@
-@Html.EJS().Button("ReorderSingleCols").Content("Reorder Name Column to Last").Render()
-
-@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowReordering().Columns(col =>
- {
-     col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-     col.Field("FirstName").HeaderText("Name").Width("125").Add();
-     col.Field("City").HeaderText("City").Width("190").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-     col.Field("Country").HeaderText("Country").Width("135").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-
- }).Render()
-
-<script>
-
-    document.getElementById("ReorderSingleCols").onclick = function () {
+<div style="padding:0px 0px 20px 0px">
+    @Html.EJS().Button("button").CssClass("e-primary").Content("Reorder column by index").Render()
+</div>
+@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("OrderDate").HeaderText("Order Date").Width("120").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("130").Add();
+}).Render()
+<script type="text/javascript">
+    document.getElementById('button').addEventListener('click', function () {
         var grid = document.getElementById("Grid").ej2_instances[0];
-        grid.reorderColumns('FirstName', 'Country');
-    }
-
+        grid.reorderColumnByIndex(1, 3);
+    });
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reordercols/reorder.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/reordercols/reorder.cs
new file mode 100644
index 0000000000..a313f00f64
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reordercols/reorder.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reordercols/reordercols.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/reordercols/reordercols.cs
deleted file mode 100644
index 62440176fe..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/reordercols/reordercols.cs
+++ /dev/null
@@ -1,6 +0,0 @@
-public IActionResult Index()
-{
-    var Emp = EmployeeDetails.GetAllRecords();
-    ViewBag.DataSource = Emp;
-    return View();
-} 
\ No newline at end of file
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 518689c39d..d8d4049de0 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/reordercols/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reordercols/tagHelper
@@ -1,18 +1,19 @@
-<ejs-button id="ReorderSingleCols" content="Reorder Name Column to Last"></ejs-button>
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowReordering="true" height="315">   
+<div style="padding:0px 0px 20px 0px">
+<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="EmployeeID" headerText="Employee ID"  width="100"></e-grid-column>
-        <e-grid-column field="FirstName" headerText="Name"  width="120"></e-grid-column>
-        <e-grid-column field="Title" headerText="Title" width="100"></e-grid-column>
-        <e-grid-column field="BirthDate" headerText="Birth Date" width="100" format="yMd"></e-grid-column>
+        <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width="120"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="100"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="130"></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" type='date' format="yMd" width="120"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="130"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
-
-<script>
-
-document.getElementById("ReorderSingleCols").onclick = function () {
-    var grid = document.getElementById("Grid").ej2_instances[0];
-    grid.reorderColumns('FirstName','BirthDate');
-}
-
+<script type="text/javascript">
+    document.getElementById('button').addEventListener('click', function () {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.reorderColumnByIndex(1, 3);
+    });
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reordercolumns/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/reordercolumns/razor
deleted file mode 100644
index 4a12732149..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/reordercolumns/razor
+++ /dev/null
@@ -1,19 +0,0 @@
-@Html.EJS().Button("ReorderMultipleCols").Content("Reorder Name and City to Last").Render()
-
-@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowReordering().Columns(col =>
-{
-    col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("FirstName").HeaderText("Name").Width("125").Add();
-    col.Field("City").HeaderText("City").Width("190").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("Country").HeaderText("Country").Width("135").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-
-}).Render()
-
-<script>
-
-    document.getElementById("ReorderMultipleCols").onclick = function () {
-        var grid = document.getElementById("Grid").ej2_instances[0];
-        grid.reorderColumns(['FirstName', 'City'], 'Country');
-    }
-
-</script>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reordercolumns/reordercols.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/reordercolumns/reordercols.cs
deleted file mode 100644
index 62440176fe..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/reordercolumns/reordercols.cs
+++ /dev/null
@@ -1,6 +0,0 @@
-public IActionResult Index()
-{
-    var Emp = EmployeeDetails.GetAllRecords();
-    ViewBag.DataSource = Emp;
-    return View();
-} 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reordercolumns/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/reordercolumns/tagHelper
deleted file mode 100644
index 5f5b1d3b58..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/reordercolumns/tagHelper
+++ /dev/null
@@ -1,18 +0,0 @@
-<ejs-button id="reorderMultipleCols" content="Reorder Name and Title to Last"></ejs-button>
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowReordering="true"  height="315">   
-    <e-grid-columns>
-        <e-grid-column field="EmployeeID" headerText="Employee ID"  width="100"></e-grid-column>
-        <e-grid-column field="FirstName" headerText="Name"  width="120"></e-grid-column>
-        <e-grid-column field="Title" headerText="Title" width="100"></e-grid-column>
-        <e-grid-column field="BirthDate" headerText="Birth Date" width="100" format="yMd"></e-grid-column>
-    </e-grid-columns>
-</ejs-grid>
-
-<script>
-
-document.getElementById("reorderMultipleCols").onclick = function () {
-    var grid = document.getElementById("Grid").ej2_instances[0];
-    grid.reorderColumns(['FirstName','Title'],'BirthDate');
-}
-
-</script>
\ No newline at end of file
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 326efa9cf2..00b924620a 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/reorderevents/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reorderevents/razor
@@ -1,22 +1,36 @@
-@Html.EJS().Grid("Reorder").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowReordering().Columns(col =>
-{
-    col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("FirstName").HeaderText("Name").Width("125").Add();
-    col.Field("City").HeaderText("City").Width("190").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("Country").HeaderText("Country").Width("135").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-
-}).ColumnDragStart("columnDragStart").ColumnDrag("columnDrag").ColumnDrop("columnDrop").Render()
-
-<script>
-
-    function columnDragStart() {
-        alert('columnDragStart event is triggered')
+  <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()
+  
+<style>
+    .e-grid .e-headercell.customcss, .e-grid .e-rowcell.customcss {
+          background-color: rgb(43, 195, 226);
     }
-    function columnDrag() {
-        alert('columnDrag event is triggered')
+</style>
+<script type="text/javascript">
+    function columnDragStart(args) {
+        document.getElementById('message').innerText = `columnDragStart event triggered`;
+        if (args.column.field === 'OrderID') {
+            args.cancel = true;
+        }
     }
-    function columnDrop() {
-        alert('columnDrop event is triggered')
+    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) {
+            args.column.customAttributes = { class: 'customcss' };
+        }
     }
-
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reorderevents/reorder.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/reorderevents/reorder.cs
new file mode 100644
index 0000000000..a313f00f64
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reorderevents/reorder.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reorderevents/reorderevents.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/reorderevents/reorderevents.cs
deleted file mode 100644
index 62440176fe..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/reorderevents/reorderevents.cs
+++ /dev/null
@@ -1,6 +0,0 @@
-public IActionResult Index()
-{
-    var Emp = EmployeeDetails.GetAllRecords();
-    ViewBag.DataSource = Emp;
-    return View();
-} 
\ No newline at end of file
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 39de39d1aa..a1caed1edb 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/reorderevents/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reorderevents/tagHelper
@@ -1,23 +1,41 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowReordering="true" height="315" columnDragStart="columnDragStart"
-columnDrag="columnDrag" columnDrop="columnDrop">   
+<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="EmployeeID" headerText="Employee ID"  width="100"></e-grid-column>
-        <e-grid-column field="FirstName" headerText="First Name"  width="120"></e-grid-column>
-        <e-grid-column field="Title" headerText="Title" width="100"></e-grid-column>
-        <e-grid-column field="BirthDate" headerText="Birth Date" width="100" format="yMd"></e-grid-column>
+        <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width="120"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="100"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="130"></e-grid-column>
+        <e-grid-column field="ShipName" headerText="Ship Name" 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>
+<style>
+    .e-grid .e-headercell.customcss, .e-grid .e-rowcell.customcss {
+        background-color: rgb(43, 195, 226);
+    }
+</style>
 
-    function columnDragStart() {
-        alert('columnDragStart event is triggered')
+<script type="text/javascript">
+    function columnDragStart(args) {
+        document.getElementById('message').innerText = `columnDragStart event triggered`;
+        if (args.column.field === 'OrderID') {
+            args.cancel = true; // Prevent reordering
+        }
     }
-    function columnDrag() {
-        alert('columnDrag event is triggered')
+
+    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() {
-        alert('columnDrop event is triggered')
+
+    function columnDrop(args) {
+        document.getElementById('message').innerText = `columnDrop event triggered`;
+        if (args.column.allowReordering === true) {
+            args.column.customAttributes = { class: 'customcss' };
+        }
     }
-    
-  </script>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reordertargetcolumns/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/reordertargetcolumns/razor
new file mode 100644
index 0000000000..f1568cf0a8
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reordertargetcolumns/razor
@@ -0,0 +1,28 @@
+<div style="padding:0px 0px 20px 0px">
+    @Html.EJS().Button("reordersingle").CssClass("e-info").Content("Reorder single column").Render()
+    @Html.EJS().Button("reordermultiple").CssClass("e-info").Content("Reorder mutiple columns").Render()
+</div>
+@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("OrderDate").HeaderText("Order Date").Width("120").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+col.Field("ShipCountry").HeaderText("Ship Country").Width("130").Add();
+}).Render()
+<style>
+    .e-btn.e-info, .e-css.e-btn.e-info {
+        margin-right: 4px;
+        margin-bottom: 3px;
+    }
+</style>
+<script type="text/javascript">
+    document.getElementById('reordersingle').addEventListener('click', function () {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.reorderColumnByTargetIndex("OrderID", 3); // move column with field name "OrderID" to index 3
+    });
+    document.getElementById('reordermultiple').addEventListener('click', function () {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.reorderColumnByTargetIndex(['OrderID', 'CustomerID'], 3); // move columns with field name "OrderID" and "CustomerID" to index 3
+    });
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reordertargetcolumns/reorder.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/reordertargetcolumns/reorder.cs
new file mode 100644
index 0000000000..a313f00f64
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reordertargetcolumns/reorder.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/reordertargetcolumns/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/reordertargetcolumns/tagHelper
new file mode 100644
index 0000000000..f5e6c86e6c
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/reordertargetcolumns/tagHelper
@@ -0,0 +1,30 @@
+<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>
+</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>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="100"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="130"></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" type='date' format="yMd" width="120"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="130"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<style>
+    .e-btn.e-info, .e-css.e-btn.e-info {
+        margin-right: 4px;
+        margin-bottom: 3px;
+    }
+</style>
+<script type="text/javascript">
+    document.getElementById('reordersingle').addEventListener('click', function () {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.reorderColumnByTargetIndex("OrderID", 3); // move column with field name "OrderID" to index 3
+    });
+    document.getElementById('reordermultiple').addEventListener('click', function () {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.reorderColumnByTargetIndex(['OrderID', 'CustomerID'], 3); // move columns with field name "OrderID" and "CustomerID" to index 3
+    });
+</script>
\ No newline at end of file
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
new file mode 100644
index 0000000000..6b60fb914e
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-external/razor
@@ -0,0 +1,27 @@
+<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()
+    </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()
+
+<script type="text/javascript">
+    document.getElementById('buttons').addEventListener('click', function () {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.getColumnByField(document.getElementById('dropdown').value).width = document.getElementById('textbox').value;
+        grid.refreshColumns();
+    });
+</script>
\ No newline at end of file
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
new file mode 100644
index 0000000000..a313f00f64
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-external/resize.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    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
new file mode 100644
index 0000000000..dddf1bd7a2
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-external/tagHelper
@@ -0,0 +1,30 @@
+<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>
+    </span>
+</div>
+<div style="padding:0px 0px 20px 0px">
+    <label style="padding: 23px 4px 0 0;font-weight: bold;">Enter the width:</label>
+    <ejs-textbox id="textbox" placeholder="Enter new width" width="220">
+    </ejs-textbox>
+    <ejs-button cssClass='e-outline' style="margin-left: 10px" id="buttons" content="Resize">
+    </ejs-button>
+</div>
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowResizing='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="130"></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>
+</ejs-grid>
+
+<script type="text/javascript">
+    document.getElementById('buttons').addEventListener('click', function () {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.getColumnByField(document.getElementById('dropdown').value).width = document.getElementById('textbox').value;
+        grid.refreshColumns();
+    });
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/resize-max/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-max/razor
new file mode 100644
index 0000000000..31cc7ec82b
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-max/razor
@@ -0,0 +1,8 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowResizing(true).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").MinWidth("100").Width("150").MaxWidth("250").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").MinWidth("150").Width("200").MaxWidth("300").Add();
+    col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("OrderDate").HeaderText("Order Date").Width("100").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").MinWidth("120").Width("150").MaxWidth("260").Add();
+}).Render()
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/resize-max/resize.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-max/resize.cs
new file mode 100644
index 0000000000..a313f00f64
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-max/resize.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/resize-max/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-max/tagHelper
new file mode 100644
index 0000000000..a9c9bb3624
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-max/tagHelper
@@ -0,0 +1,9 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowResizing='true'>
+    <e-grid-columns>
+        <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' minWidth="100" width="150" maxWidth="250"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" minWidth="150" width="200" maxWidth="300"></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" minWidth="120" width="150" maxWidth="260"></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/resize-mode/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-mode/razor
new file mode 100644
index 0000000000..b81671953d
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-mode/razor
@@ -0,0 +1,20 @@
+<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()
+    </span>
+</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").AllowResizing(false).Width("130").Add();
+    col.Field("Freight").HeaderText("Freight").Width("100").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("ShipAddress").HeaderText("Ship Address").Width("150").Add();
+}).Render()
+<script type="text/javascript">
+    function change(args) {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.resizeSettings = { mode: args.value }
+    }
+</script>
\ No newline at end of file
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
new file mode 100644
index 0000000000..a313f00f64
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-mode/resize.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    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
new file mode 100644
index 0000000000..955e7ba9b3
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-mode/tagHelper
@@ -0,0 +1,22 @@
+<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>
+    </span>
+</div>
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowResizing='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" allowResizing="false" width="130"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="200"></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="150"></e-grid-column>
+        <e-grid-column field="ShipAddress" headerText="ShipAddress" width="120"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<script type="text/javascript">
+    function Change(args) {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.resizeSettings = { mode: args.value }
+    }
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/resize-prevent/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-prevent/razor
new file mode 100644
index 0000000000..33df1e3ab7
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-prevent/razor
@@ -0,0 +1,8 @@
+@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").AllowResizing(false).Width("130").Add();
+    col.Field("Freight").HeaderText("Freight").Width("100").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("ShipAddress").HeaderText("Ship Address").Width("150").Add();
+}).Render()
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/resizeevents/resizeevents.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-prevent/resize.cs
similarity index 100%
rename from ej2-asp-core-mvc/code-snippet/grid/columns/resizeevents/resizeevents.cs
rename to ej2-asp-core-mvc/code-snippet/grid/columns/resize-prevent/resize.cs
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/resize-prevent/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-prevent/tagHelper
new file mode 100644
index 0000000000..434066c9ac
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-prevent/tagHelper
@@ -0,0 +1,10 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowResizing='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" allowResizing="true" width="130"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="200"></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="150"></e-grid-column>
+        <e-grid-column field="ShipAddress" headerText="ShipAddress" width="120"></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/resize-stacked/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-stacked/razor
new file mode 100644
index 0000000000..d9b08d1df5
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-stacked/razor
@@ -0,0 +1,8 @@
+@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.HeaderText("Order Details").Columns(new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { Field = "OrderDate", Width = "135", HeaderText = "Order Date",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right,Format="yMd", MinWidth="10" },
+        new Syncfusion.EJ2.Grids.GridColumn { Field = "Freight", Width = "130", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right, HeaderText = "Freight($)", Format="C2", MinWidth="10"} }).Add();
+    col.HeaderText("Shipped Details").Columns(new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { Field = "ShipCity", Width = "140", HeaderText = "Ship City",AllowResizing=false, MinWidth="10" },
+        new Syncfusion.EJ2.Grids.GridColumn { Field = "ShipCountry", Width = "145",  HeaderText = "Ship Country", MinWidth="10" } }).Add();
+}).Render()
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/resize-stacked/resize.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-stacked/resize.cs
new file mode 100644
index 0000000000..a313f00f64
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-stacked/resize.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/resize-stacked/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-stacked/tagHelper
new file mode 100644
index 0000000000..4efe654fb9
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize-stacked/tagHelper
@@ -0,0 +1,11 @@
+<ejs-grid id="Grid" dataSource="@(ViewBag.DataSource)" allowResizing='true'>
+    <e-grid-columns>
+        <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-grid-column>
+        <e-grid-column headerText="Order Details"
+        columns="@( new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { Field = "OrderDate", Width = "130", HeaderText = "Order Date", Format="yMd" ,TextAlign= Syncfusion.EJ2.Grids.TextAlign.Right,MinWidth="10" },
+        new Syncfusion.EJ2.Grids.GridColumn { Field = "Freight", Width = "135", HeaderText = "Freight($)", Format="C2",  TextAlign= Syncfusion.EJ2.Grids.TextAlign.Right,  MinWidth="10" } } )" width="130"></e-grid-column>
+        <e-grid-column headerText="Shipped Details" columns="@( new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { Field = "ShipCity", Width = "140", HeaderText = "Ship City",AllowResizing= false, MinWidth="10"  },
+        new Syncfusion.EJ2.Grids.GridColumn { Field = "ShipCountry", Width = "145", HeaderText = "Ship Country", MinWidth="10" } } )">
+        </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/resize/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/resize/razor
index f57a3a8ff1..9bff8cfc30 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/resize/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize/razor
@@ -1,12 +1,9 @@
-@Html.EJS().Grid("ColumnResize").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowResizing(true).Columns(col =>
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowResizing(true).Columns(col =>
 {
-   col.Field("OrderID").HeaderText("Order ID").Width("200").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
-   col.Field("OrderDate").HeaderText("Order Date").Width("200").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("Freight").HeaderText("Freight").Width("150").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("ShipName").HeaderText("Ship Country").Width("300").Add();
-   col.Field("ShippedDate").HeaderText("Shipped Date").Width("200").Format("yMd").AllowResizing(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("ShipName").HeaderText("Ship Country").Width("200").Add();
-   col.Field("ShipName").HeaderText("Ship Country").Width("200").Add();
-
-}).AllowPaging().Render()
\ No newline at end of file
+    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("100").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();
+    col.Field("ShipAddress").HeaderText("Ship Address").Width("120").Add();
+}).Render()
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/resize/resize.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/resize/resize.cs
index f6f0126ac7..a313f00f64 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/resize/resize.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize/resize.cs
@@ -1,6 +1,6 @@
 public IActionResult Index()
 {
-    var Order = OrderDetails.GetAllRecords();
+    var Order = OrdersDetails.GetAllRecords();
     ViewBag.DataSource = Order;
     return View();
 } 
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/resize/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/resize/tagHelper
index 529ed21354..3502ff0dc4 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/resize/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resize/tagHelper
@@ -1,12 +1,10 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowResizing="true"  height="315">   
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowResizing='true'>
     <e-grid-columns>
-        <e-grid-column field="OrderID" headerText="Order ID" width="150" ></e-grid-column>
-        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
-        <e-grid-column field="Freight" headerText="Freight" width="150"></e-grid-column>        
-        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
-        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
-        <e-grid-column field="ShipAddress" headerText="Ship Address" width="150"></e-grid-column>
-        <e-grid-column field="ShipCountry"  headerText="Ship Country" width="150"></e-grid-column>
-        <e-grid-column field="ShipPostalCode" headerText="Ship Postal Code width="150"></e-grid-column>
+        <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="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-column field="ShipAddress" headerText="ShipAddress" width="120"></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/resizeevents/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/resizeevents/razor
index 3f9c562c5e..eb2ffa4ca6 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/resizeevents/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resizeevents/razor
@@ -1,25 +1,38 @@
-@Html.EJS().Grid("ColumnResize").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowResizing(true).Columns(col =>
+<div style="margin-left:180px">
+  <p style="color:red;" id="message"></p>
+</div>
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowResizing(true).Columns(col =>
 {
-   col.Field("OrderID").HeaderText("Order ID").Width("200").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
-   col.Field("OrderDate").HeaderText("Order Date").Width("200").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("Freight").HeaderText("Freight").Width("150").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("ShipName").HeaderText("Ship Country").Width("300").Add();
-   col.Field("ShippedDate").HeaderText("Shipped Date").Width("200").Format("yMd").AllowResizing(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("ShipName").HeaderText("Ship Country").Width("200").Add();
-
-}).AllowPaging().ResizeStart("resizeStart").Resizing("resizing").ResizeStop("resizeStop").Render()
-
-<script>
-
-    function resizeStart() {
-        alert('resizeStart event is triggered')
+    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();
+}).ResizeStart("resizeStart").Resizing("resizing").ResizeStop("resizeStop").Render()
+<style>
+    .e-grid .customcss {
+        background-color: rgb(43, 195, 226);
+    }
+</style>
+<script type="text/javascript">
+    function resizeStart(args) {
+        document.getElementById('message').innerText = `resizeStart event triggered`;
+        if (args.column.field === 'OrderID') {
+            args.cancel = true;
+        }
     }
     function resizing() {
-        alert('resizing event is triggered')
+        document.getElementById('message').innerText = `resizing event triggered`;
     }
-    function resizeStop() {
-        alert('resizeStop event is triggered')
+    function resizeStop(args) {
+        document.getElementById('message').innerText = `resizeStop event triggered`;
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        const headerCell = grid.getColumnHeaderByField(args.column.field);
+        headerCell.classList.add('customcss');
+        const columnCells = grid.getContentTable()
+            .querySelectorAll(`[data-colindex="${args.column.index}"]`);
+        columnCells.forEach(cell => {
+            cell.style.backgroundColor = 'rgb(43, 195, 226)';
+        });
     }
-
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/resizeevents/resize.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/resizeevents/resize.cs
new file mode 100644
index 0000000000..a313f00f64
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resizeevents/resize.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 
\ No newline at end of file
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 3c0da5b6b6..d8a50a5619 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/resizeevents/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/columns/resizeevents/tagHelper
@@ -1,26 +1,41 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowResizing="true" height="315" resizeStart="resizeStart"
-resizing="resizing" resizeStop="resizeStop">   
+<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>
-        <e-grid-column field="OrderID" headerText="Order ID" width="150" ></e-grid-column>
-        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
-        <e-grid-column field="Freight" headerText="Freight" width="150"></e-grid-column>        
-        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
-        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
-        <e-grid-column field="ShipAddress" headerText="Ship Address" width="150"></e-grid-column>
-        <e-grid-column field="ShipCountry"  headerText="Ship Country" width="150"></e-grid-column>
-        <e-grid-column field="ShipPostalCode" headerText="Ship Postal Code" width="150"></e-grid-column>
+        <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="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>
 </ejs-grid>
-
-  <script>
-
-    function resizeStart() {
-        alert('resizeStart event is triggered')
+<style>
+    .e-grid .customcss {
+        background-color: rgb(43, 195, 226);
+    }
+</style>
+<script type="text/javascript">
+    function resizeStart(args) {
+        document.getElementById('message').innerText = `resizeStart event triggered`;
+        if (args.column.field === 'OrderID') {
+            args.cancel = true;
+        }
     }
     function resizing() {
-        alert('resizing event is triggered')
+        document.getElementById('message').innerText = `resizing event triggered`;
     }
-    function resizeStop() {
-        alert('resizeStop event is triggered')
+    function resizeStop(args) {
+        document.getElementById('message').innerText = `resizeStop event triggered`;
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        const headerCell = grid.getColumnHeaderByField(args.column.field);
+        headerCell.classList.add('customcss');
+        const columnCells = grid.getContentTable()
+            .querySelectorAll(`[data-colindex="${args.column.index}"]`);
+        columnCells.forEach(cell => {
+            cell.style.backgroundColor = 'rgb(43, 195, 226)';
+        });
     }
-  </script>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/cell.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/cell.md
index 7b4823c3e6..953c8c8d1c 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/cell.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/cell.md
@@ -8,9 +8,9 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Cell in ##Platform_Name## Grid component
+# Cell in ASP.NET MVC Grid component
 
-In the Syncfusion ##Platform_Name## Grid, a **cell** refers to an individual data point or a unit within a grid column that displays data. It represents the intersection of a row and a column, and it contains specific information associated with that row and column. Each cell can display text, numbers, or other content related to the data it represents. 
+In the Syncfusion ASP.NET MVC Grid, a **cell** refers to an individual data point or a unit within a grid column that displays data. It represents the intersection of a row and a column, and it contains specific information associated with that row and column. Each cell can display text, numbers, or other content related to the data it represents. 
 
 The Grid component allows you to customize the appearance and behavior of cells using various features and options. You can define templates, format cell values, enable or disable editing, and perform various other operations on the cells to create interactive and informative data grids in your web applications.
 
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 262c04ac53..cd1e7fbe2a 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
@@ -8,62 +8,118 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Column Chooser
+# Column chooser in ASP.NET MVC Grid component
 
-The column chooser has options to show or hide columns dynamically. It can be enabled by defining the [`ShowColumnChooser`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ShowColumnChooser) as true.
-
-{% if page.publishingplatform == "aspnet-core" %}
+The column chooser feature in the Syncfusion ASP.NET MVC Grid component allows you to dynamically show or hide columns. This feature can be enabled by defining the [ShowColumnChooser](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ShowColumnChooser) property as **true**.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/columnchooser/tagHelper %}
+{% include code-snippet/grid/columns/columnchooser/razor %}
 {% endhighlight %}
 {% highlight c# tabtitle="Columnchooser.cs" %}
 {% include code-snippet/grid/columns/columnchooser/columnchooser.cs %}
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+![Column chooser](../../images/column-chooser/Colum-chooser.png)
+
+> The column chooser dialog displays the header text of each column by default. If the header text is not defined for a column, the corresponding column field name is displayed instead.
+
+## Hide column in column chooser dialog
+
+You can hide the column names in column chooser by defining the `Columns.ShowInColumnChooser` as **false**. This feature is useful when working with a large number of columns or when you want to limit the number of columns that are available for selection in the column chooser dialog.
+
+In this example, the `Columns.ShowInColumnChooser` property is set to **false** for the **Order ID** column. As a result, the **Order ID** column will not be displayed in the column chooser dialog.
 
 {% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/columnchooser/razor %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/columnchooser-hide/razor %}
 {% endhighlight %}
 {% highlight c# tabtitle="Columnchooser.cs" %}
-{% include code-snippet/grid/columns/columnchooser/columnchooser.cs %}
+{% include code-snippet/grid/columns/columnchooser-hide/columnchooser.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
 
+![Hide column in column chooser dialog](../../images/column-chooser/Colum-chooser-hide.png)
 
+>The `Columns.ShowInColumnChooser` property is applied to each column element individually. By setting it to **false**, you can hide specific columns from the column chooser dialog.
 
-N> You can hide the column names in column chooser by defining the [`ShowInColumnChooser`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_ShowInColumnChooser) as false.
+## Open column chooser by externally
+
+The Syncfusion ASP.NET MVC Grid provides the flexibility to open the column chooser dialog on a web page using an external button. By default, the column chooser button is displayed in the right corner of the grid component, and clicking the button opens the column chooser dialog below it. However, you can programmatically open the column chooser dialog at specific **X** and **Y** axis positions by using the `openColumnChooser` method.
+
+Here's an example of how to open the column chooser in the Grid using an external button:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/columnchooser-external/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Columnchooser.cs" %}
+{% include code-snippet/grid/columns/columnchooser-external/columnchooser.cs %}
+{% endhighlight %}
+{% endtabs %}
 
-## Open column chooser by external button
+![Open column chooser by externally](../../images/column-chooser/Colum-chooser-external.png)
 
-The Column chooser can be displayed on a page through external button by invoking the **openColumnChooser** method with X and Y axis positions.
+## Customize column chooser dialog size
+	
+The column chooser dialog in Syncfusion ASP.NET MVC Grid comes with default size, but you can modify its height and width as per your specific needs using CSS styles.
+To customize the column chooser dialog size, you can use the following CSS styles:
 
-{% if page.publishingplatform == "aspnet-core" %}
+```css
+.e-grid .e-dialog.e-ccdlg {
+    height: 500px;
+    width: 200px;
+}
+.e-grid .e-ccdlg .e-cc-contentdiv {
+    height: 200px;
+    width: 230px;
+}
+```
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/externalbutton/tagHelper %}
+{% include code-snippet/grid/columns/columnchooser-size/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Externalbutton.cs" %}
-{% include code-snippet/grid/columns/externalbutton/externalbutton.cs %}
+{% highlight c# tabtitle="Columnchooser.cs" %}
+{% include code-snippet/grid/columns/columnchooser-size/columnchooser.cs %}
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+![Customize column chooser dialog size](../../images/column-chooser/Colum-chooser-size.png)
+
+## Change default search operator of the column chooser 
+
+The column chooser dialog in the Syncfusion ASP.NET MVC Grid provides a search box that allows you to search for column names. By default, the search functionality uses the "startsWith" operator to match columns and display the results in the column chooser dialog. However, there might be cases where you need to change the default search operator to achieve more precise data matching.
+
+To change the default search operator of the column chooser in Syncfusion Grid, you need to use the [operator](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridColumnChooserSettings.html#Syncfusion_EJ2_Grids_GridColumnChooserSettings_Operator) property of the columnChooserSettings.
+
+Here's an example of how to change the default search operator of the column chooser to **contains** in the ASP.NET MVC Grid:
 
 {% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/externalbutton/razor %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/columnchooser-contains/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Externalbutton.cs" %}
-{% include code-snippet/grid/columns/externalbutton/externalbutton.cs %}
+{% highlight c# tabtitle="Columnchooser.cs" %}
+{% include code-snippet/grid/columns/columnchooser-contains/columnchooser.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
 
+![Change default search operator of the column chooser ](../../images/column-chooser/Colum-chooser-contains.png)
+
+## Diacritics searching in column chooser
+
+By default, the grid ignores diacritic characters when performing a search in the column chooser. However, in some cases, you may want to include diacritic characters in the search. To enable this behavior, you can set the [Columnchoosersettings.IgnoreAccent](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridColumnChooserSettings.html#Syncfusion_EJ2_Grids_GridColumnChooserSettings_IgnoreAccent) property to **true**.
+
+Here is an example that demonstrates the usage of the `IgnoreAccent` property to include diacritic characters for searching in the column chooser:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/columnchooser-diacritics/razor %}
+{% endhighlight %}
+{% 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)
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
new file mode 100644
index 0000000000..51b68ea80f
--- /dev/null
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-headers.md
@@ -0,0 +1,474 @@
+---
+layout: post
+title: Headers in ##Platform_Name## Grid Component
+description: Learn here all about Headers in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Headers
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Headers in ASP.NET MVC Grid component
+
+The Syncfusion ASP.NET MVC Grid component provides a comprehensive set of options to customize and manage headers efficiently. Headers play a crucial role in organizing and presenting data effectively in the grid.
+
+## Header text
+
+The `HeaderText` feature proves particularly beneficial when there is a need for more meaningful and descriptive column headers in the Syncfusion ASP.NET MVC Grid component.
+
+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.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Header text](../../images/columns/Column-headertext.png)
+
+> * If both the `Field` and `HeaderText` are not defined in the column, the column renders with **empty** header text.
+> * The `HeaderText` property is optional, and if it is not defined, then the corresponding column's field value is set as header text for that column.  
+> * You can also use the `HeaderTemplate` property to apply custom HTML content to the header cell.
+
+## Header template
+
+The header template feature in the Syncfusion ASP.NET MVC Grid component allows you to create custom header layouts and content, providing enhanced functionality such as sorting or filtering.
+
+To implement a header template, set the `HeaderTemplate` property within a specific column definition. This allows you to render custom HTML elements or ASP.NET MVC components to the header.
+
+The following example demonstrate, the custom element is rendered for both **CustomerID**,**Freight** and **OrderDate** column headers.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertemplate/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertemplate.cs" %}
+{% include code-snippet/grid/columns/headertemplate/headertemplate.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Header template](../../images/columns/Column-headertext-headerTemplate.png)
+
+>* The `HeaderTemplate` property is only applicable to Grid columns that have a header element.
+>* You can use any HTML or ASP.NET MVC component in the header template to add additional functionality to the header element.
+
+## Stacked header 
+
+In Grid, you can group multiple levels of column headers by stacking the Grid columns. This feature allows you to organize the Grid columns in a more structured and understandable way. This can be achieved by setting the [columns->columns](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Columns) property. Within this property, you can define an array of column objects to group together as sub-headers under a main header. You can define the `HeaderText` property of each sub-header column to set the text for that sub-header.
+
+You can customize the appearance of the stacked header elements by using the `HeaderTemplate` property. This allows you to render custom HTML elements or ASP.NET MVC components to the header. 
+
+Here's an example of how to use stacked headers with a custom `HeaderTemplate` in Syncfusion Grid.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-stacked/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Stackedheader.cs" %}
+{% include code-snippet/grid/columns/headertext-stacked/stackedHeader.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Stacked header](../../images/columns/Column-headertext-stacked.png)
+
+## Align the text of header text
+
+You can horizontally align the text in column headers of the Grid component using the `HeaderTextAlign` property. By default, the text is aligned to the left, but you can change the alignment by setting the value of the `HeaderTextAlign` property to one of the following options:
+
+* **Left**: Aligns the text to the left (default).
+* **Center**: Aligns the text to the center.
+* **Right**: Aligns the text to the right.
+* **Justify**: Header text is justified.
+
+The following example demonstrates how to dynamically change the alignment of the header text based on DropDown change:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-textalign/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext-textalign/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Align the text of header text](../../images/columns/Column-headertext-change-alignment.gif)
+
+>* The `HeaderTextAlign` property only changes the alignment of the text in the column header, and not the content of the column. If you want to align both the column header and content, you can use the [TextAlign](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.TextAlign.html) property.
+>* You can also use the `HeaderTextAlign` property with the stacked header feature in Syncfusion Grid. The property will align the header text in the sub-headers as well.
+
+## Autowrap the header text
+
+The autowrap allows the cell content of the grid to wrap to the next line when it exceeds the boundary of the specified cell width. The cell content wrapping works based on the position of white space between words. To support the Autowrap functionality in Syncfusion Grid, you should set the appropriate [Width](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Width) for the columns. The column width defines the maximum width of a column and helps to wrap the content automatically.
+
+To enable autowrap, set the [AllowTextWrap](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowTextWrap) property to **true**. You can also configure the auto wrap mode by setting the [TextWrapSettings.WrapMode](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridTextWrapSettings.html#Syncfusion_EJ2_Grids_GridTextWrapSettings_WrapMode) property.
+
+Grid provides the below three options for configuring:
+
+* **Both**: This is the default value for wrapMode. With this option, both the grid header text and content is wrapped.
+* **Header**: With this option, only the grid header text is wrapped.
+* **Content**: With this option, only the grid content is wrapped.
+
+>* If a column width is not specified, then the Autowrap of columns will be adjusted with respect to the grid's width.
+>* If a column's header text contains no white space, the text may not be wrapped.
+>* If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In such cases, you can use the `HeaderTemplate` and `Template` properties of the column to customize the appearance of the header and cell content.
+
+The following example demonstrates how to dynamically change the auto-wrap of the header text based on DropDown change.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-autowrap/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext-autowrap/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Autowrap the header text](../../images/columns/Column-headertext-wrap-mode.png)
+
+## Change the height of header
+
+Changing the height of the header can be useful in cases where the default height is not sufficient to display the header content cell. For example, if you have a header with a lot of text or if you want to add an image to the header, you may need to increase the height of the header to accommodate the content.This can be easily achieved by changing the height of the header using CSS or by dynamically adjusting the height using a methods.
+
+**Using css**
+
+You can use CSS to override the default height of the **.e-grid .e-headercell** class to change the height of the header. Here is an example code snippet:
+
+```css
+.e-grid .e-headercell {
+  height: 130px;
+}
+```
+
+**Using methods**
+
+To change the height of the header dynamically, you can use the `getHeaderContent` method to get the header content element of the Syncfusion 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.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-change-height/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext-change-height/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Change the height of header](../../images/columns/Column-headertext-change-height.gif)
+
+>* You can also use the `GetHeaderTable` method to get the table element of the header, and then adjust the height.
+>* You cannot change the height of row below the default height of 42px using the **e-columnheader** class.
+
+## Change header text dynamically
+
+The Syncfusion Grid component provides a way to modify the header text of a corresponding column in real-time based on events or other events. This feature can be useful in various scenarios, such as displaying a custom header text for a specific column or updating the header text dynamically based on input. By allowing for dynamic changes to the header text, the Grid provides a more flexible and customizable experience.
+
+**Using Event**
+
+To modify the header text of a corresponding column dynamically, you can use the [HeaderCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_HeaderCellInfo) event provided by the Syncfusion Grid. This event is triggered for each header cell element rendered in the Grid.
+
+When the `HeaderCellInfo` event is triggered, it provides a **HeaderCellInfoEventArgs** object as a parameter. This object contains the following properties:
+
+* **cell**: Defines the header cell that is being modified.
+* **node**: Defines the DOM element of the header cell that is being modified.
+
+You can use these properties to access and modify the header text of the corresponding column. Once the header text is modified, you can refresh the Grid to reflect the changes by calling the `refreshHeader` method of the Grid.
+
+**Using method**
+
+The Grid component provides several methods that allow you to change the column header text dynamically. Here are some of the methods you can use:
+
+1. `getColumnByField`: This method takes a field name as a parameter and returns the entire column object that corresponds to that field name, including properties such as headerText, width, and alignment. You can use this method to modify any aspect of the column.
+
+2.	`getColumnHeaderByField`: Retrieves the header element of a column based on its field name. You can modify the **textContent** property of the header element to change the header text. This method does not return a reference to the column object itself, only to the header element.
+
+3.	`getColumnIndexByField`: Retrieves the index of a column based on its field name. You can then use the `getColumnByIndex` method to retrieve the column object and modify its `HeaderText` property to change the header text.
+
+4.	`getColumnByUid`: Retrieves the column object based on its unique identifier (UID). You can modify the `HeaderText` property of the column object to change the header text.
+
+5.	`getColumnHeaderByIndex`: Retrieves the header element of a column based on its zero-based index. You can modify the **textContent** property of the header element to change the header text. This method does not return a reference to the column object itself, only to the header element.
+
+6.	`getColumnIndexByUid`: Retrieves the index of a column based on its unique identifier (UID). You can then use the `getColumnByIndex` method to retrieve the column object and modify its `HeaderText` property to change the header text.
+
+7.	`getColumnHeaderByUid`: Retrieves the header element of a column based on its unique identifier (UID). You can modify the **textContent** property of the  header element to change the header text. This method does not return a reference to the column object itself, only to the header element.If you only have an `Template` for the column header, and the column itself is not defined with a `Field` , then you can use the `getColumnHeaderByUid` method to get a reference to the header element and modify its text content to change the header text.
+	
+>* When you change the header text dynamically, you need to **refresh** the Grid to reflect the changes by calling the `refreshHeader` method.
+>* The UID is automatically generated by the Grid component and may change whenever the grid is refreshed or updated.
+
+Here is an example of how to change the header text of a column using the `getColumnByField` method:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-change/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Columntext.cs" %}
+{% include code-snippet/grid/columns/headertext-change/columntext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Change header text dynamically](../../images/columns/Column-headertext-change.png)
+
+
+**Changing the header text of all columns**
+
+If you want to change the header text of all columns in the grid, you can loop through the Columns collection of the grid and set the `headerText` property for each column. Here is an example:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-change-all/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Columntext.cs" %}
+{% include code-snippet/grid/columns/headertext-change-all/columntext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Changing the header text of all columns](../../images/columns/Column-headertext-change-all.gif)
+
+## Change the orientation of header text
+
+By default, the text in the column headers of the Syncfusion Grid control is oriented horizontally. However, in some cases, you may want to change the orientation of the header text to vertical, diagonal, or at a custom angle. This can be achieved by adding a custom CSS class to the column header cell using the `CustomAttributes` property of the Grid columns.
+
+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.
+
+```css
+.orientationcss .e-headercelldiv {
+    transform: rotate(90deg);
+}
+```
+
+**Step 2**: **Add the custom CSS class to the grid column**
+
+Once you have created the CSS class, you can add it to the particular column by using the `CustomAttributes` property. This property allows you to add any custom  attribute to the grid column.
+
+For example, to add the orientationcss class to the Freight column, you can use the following code:
+
+```typescript
+    col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).CustomAttributes(new { @class = "orientationcss" }).Add();
+```
+
+**Step 3**: **Resize the header cell height**
+
+After adding the custom CSS class to a column, you need to resize the header cell height so that the rotated header text is fully visible. You can do this by using the following code:
+
+```typescript
+
+    function setHeaderHeight(args) {
+        var textWidth = document.querySelector(".orientationcss > div").scrollWidth; // obtain the width of the headerText content.
+        var headerCell = document.querySelectorAll(".e-headercell");
+        for (var i = 0; i < headerCell.length; i++) {
+            headerCell.item(i).style.height = textWidth + 'px'; // assign the obtained textWidth as the height of the headerCell.
+        }
+    }
+
+```
+
+The following example demonstrates how to change the orientation of the **Freight** column header text to 90 degrees:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-orientation/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext-orientation/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Change the orientation of header text](../../images/columns/Column-headertext-orientation.png)
+
+## Custom tooltip for header
+
+Custom tooltips for headers provide additional information when hovering over a column header in the Syncfusion 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.
+
+Here's an example of how to use the `BeforeRender` event to add a custom tooltip to a header cell:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-tooltip/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext-tooltip/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Custom tooltip for header](../../images/columns/Column-headertext-tooltip.png)
+
+> * The [HeaderCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_HeaderCellInfo) event can also be used to customize the header tooltip. This event is triggered for each header cell after it is rendered.
+
+## Customize header text styles 
+
+Customizing the grid header styles allows you to modify the appearance of the column header in the Grid control to meet your design requirements. You can customize the font, background color, and other styles of the header cells. To customize the header styles in the grid, you can use CSS, properties, methods, or event support provided by the Syncfusion ASP.NET MVC Grid component.
+
+### Using CSS
+
+You can apply styles to the header cells using CSS selectors. The Grid provides a class name for each header cell element, which you can use to apply styles to that specific header cell. The **.e-headercell** class can be used to change the background color and text color of the column header.
+
+```CSS
+  .e-grid .e-headercell {
+    background-color: #a2d6f4;
+    color:rgb(3, 2, 2);
+  }
+```
+Here's an example that demonstrates how to customize the appearance of a column header in the Grid using **className**.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-using-css/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext-using-css/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Display HTML content](../../images/columns/Column-headertext-using-css.png)
+
+### Using property 
+
+You can customize the appearance of the column headers in Grid using the `CustomAttributes` property. The `CustomAttributes` property takes an object with the name-value pair to customize the CSS properties for grid header cells. You can also set multiple CSS properties to the custom class using the `CustomAttributes` property.
+
+To customize the header of a column, you can follow the steps below:
+
+Step 1: Define a CSS class that specifies the styles you want to apply to the header cell of the column. For example, to change the background color and text color of the header cell, define a CSS class like this:
+
+  ```CSS
+    .e-grid .e-headercell.customcss {
+       background-color: rgb(43, 205, 226);
+       color: black;
+    }
+
+  ```
+
+Step 2: Set the **CustomAttributes** property of the desired column to an object that contains the CSS class **customcss**. This CSS class will be applied to the header cell of the specified column in the Grid.
+
+  ```ts
+    col.Field("Freight").HeaderText("Freight").Width("120").CustomAttributes(new { @class = "customcss" }).Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+  ```
+
+The following example demonstrates how to customize the appearance of the **OrderID** and **OrderDate** columns using custom attributes.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-using-property/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext-using-property/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Using property](../../images/columns/Column-headertext-using-property.png)
+
+### Using method 
+
+The Syncfusion Grid provides methods to customize the appearance of the grid columns header.
+
+1. `getColumnHeaderByIndex`: The method is used to customize the appearance of a specific column header in the grid by specifying the index of the column for which you want to customize the header.
+
+2. `getColumnHeaderByField`: This method is used to retrieve the header element of a specific column by its field name. You can use the retrieved element to customize the appearance of the header element.
+3. `getColumnHeaderByUid`: This method is used to retrieve the header element of a specific column by its unique ID. You can use the retrieved element to customize the appearance of the header element.
+
+ 4. `getColumnIndexByField`:This method is used to retrieve the index of a specific column by its field name. You can use the retrieved index to access the header element and customize its appearance.
+
+ 5. `getColumnIndexByUid`: This method is used to retrieve the index of a specific column by its unique ID. You can use the retrieved index to access the header element and customize its appearance.
+
+Here's an example of how to use these methods to change the style of a specific column header:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-using-method/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext-using-method/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Using method](../../images/columns/Column-headertext-using-method.png)
+
+>* The UID is automatically generated by the Grid component and may change whenever the grid is refreshed or updated.
+
+### Using event
+
+To customize the appearance of the grid header, you can handle the [HeaderCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_HeaderCellInfo) event of the grid. This event is triggered when each header cell is rendered in the grid, and provides an object that contains information about the header cell. You can use this object to modify the styles of the header column.
+
+The following example demonstrates how to add a `HeaderCellInfo` event handler to the grid. In the event handler, checked whether the current header column is **Order Date** field and then applied the appropriate CSS class to the cell based on its value.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-using-event/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext-using-event/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Using event](../../images/columns/Column-headertext-using-event.png)
+
+## How to refresh header 
+
+The refresh header feature in the Syncfusion ASP.NET MVC Grid allows you to update the header section of the grid whenever changes are made to the grid's columns. This feature is useful when you want to reflect changes in the header immediately, such as modifying the column header text, width, or alignment.
+
+To use the refresh header feature, you can call the `refreshHeader` method of the Grid component. This method updates the grid header with the latest changes made to the columns.
+
+The following example demonstrates how to use the `refreshHeader` method to update the grid header:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-refresh/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext-refresh/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![How to refresh header](../../images/columns/Column-headertext-refresh-header.png)
+
+>* The `refreshHeader` method updates only the grid header and not the entire grid.
+>* If you want to refresh the entire grid, you can use the `refresh` method instead.
+
+## How to get header element 
+
+To get the header element in a Syncfusion Grid, you can use one of the following methods:
+
+1. `getHeaderContent`: This method returns the header div element of the Grid. You can use this method to access the entire header content of the Grid.
+
+    ```ts
+    var grid = document.getElementById("Grid").ej2_instances[0]
+    const headerTableElement=grid.getHeaderContent();    
+    ```
+2. `getHeaderTable`: This method returns the header table element of the Grid. You can use this method to access only the header table of the Grid.
+
+   ```ts
+    var grid = document.getElementById("Grid").ej2_instances[0]
+    const headerTableElement = grid.getHeaderTable();
+   ```
+
+3. `getColumnHeaderByUid`: This method returns the column header element by its unique identifier.
+
+   ```ts
+    var grid = document.getElementById("Grid").ej2_instances[0]
+    const columnHeaderElement = grid.getColumnHeaderByUid("e-grid2");
+   ```
+
+4. `getColumnHeaderByIndex`: This method returns the column header element by its index.
+
+   ```ts
+    var grid = document.getElementById("Grid").ej2_instances[0]
+    const columnHeaderElement = grid.getColumnHeaderByIndex(0);
+   ```
+5. `getColumnHeaderByField`: This method returns the column header element by its field name.
+
+   ```ts
+    var grid = document.getElementById("Grid").ej2_instances[0]
+    const columnHeaderElement = grid.getColumnHeaderByField("OrderID"); 
+   ```
+
+>* The UID is automatically generated by the Grid component and may change whenever the grid is refreshed or updated.
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-menu.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-menu.md
index 9b0e0d022d..278e2ab2a6 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-menu.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-menu.md
@@ -8,177 +8,134 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Column Menu
+# Column menu in ASP.NET MVC Grid component
 
-The column menu has options to integrate features like sorting, grouping, filtering, column chooser, and autofit. It will show a menu with the integrated feature when users click on multiple icon of the column. To enable column menu, you need to define the [`ShowColumnMenu`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ShowColumnMenu) property as true.
+The column menu in the Syncfusion ASP.NET MVC Grid component provides options to enable features such as sorting, grouping, filtering, column chooser, and autofit. When users click on the column header's menu icon, a menu will be displayed with these integrated features. To enable the column menu, you need to set the [ShowColumnMenu](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ShowColumnMenu) property to **true** in the Grid configuration.
 
-The default items are displayed in following table.
+The default column menu items are displayed in following table.
 
-| Item | Description |
-|-----|-----|
-| `SortAscending` | Sort the current column in ascending order. |
-| `SortDescending` | Sort the current column in descending order. |
-| `Group` | Group the current column. |
-| `Ungroup` | Ungroup the current column. |
-| `AutoFit` | Auto fit the current column. |
-| `AutoFitAll` | Auto fit all columns. |
-| `ColumnChooser` | Choose the column visibility. |
-| `Filter` | Show the filter option as given in `FilterSettings.Type` |
-
-{% if page.publishingplatform == "aspnet-core" %}
+| Item               | Description                                                                                                                              |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| **SortAscending**  | Sort the current column in ascending order.                                                                                              |
+| **SortDescending** | Sort the current column in descending order.                                                                                             |
+| **Group**          | Group the current column.                                                                                                                |
+| **Ungroup**        | Ungroup the current column.                                                                                                              |
+| **AutoFit**        | Autofit the current column.                                                                                                              |
+| **AutoFitAll**     | Autofit all columns.                                                                                                                     |
+| **ColumnChooser**  | Choose the column visibility.                                                                                                            |
+| **Filter**         | Show the filter option as given in [FilterSettings.Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridFilterSettings.html#Syncfusion_EJ2_Grids_GridFilterSettings_Type) |
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/columnmenu/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Columnmenu.cs" %}
-{% include code-snippet/grid/columns/columnmenu/columnmenu.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/grid/columns/columnmenu/razor %}
 {% endhighlight %}
 {% highlight c# tabtitle="Columnmenu.cs" %}
 {% include code-snippet/grid/columns/columnmenu/columnmenu.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
-
 
+![Column menu](../../images/column-menu/Column-menu.png)
 
-N> You can disable column menu for a particular column by defining the [`ShowColumnMenu`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_ShowColumnMenu) property of [`Columns`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html) as false.
-<br/> You can customize the default items by defining the [`ColumnMenuItems`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuItems) with required items.
+> You can disable column menu for a particular column by defining the `Columns.ShowColumnMenu` as **false**.
 
-## Column menu Events
+> You can customize the default items by defining the [ColumnMenuItems](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuItems) with required items.
 
-During the resizing action, the grid component triggers the below two events.
+## Add custom column menu item
 
-1. The [`ColumnMenuOpen`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuOpen) event triggers before the column menu opens.
-2. The [`ColumnMenuClick`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuClick) event triggers when the user clicks the column menu of the grid.
+The custom column menu item feature allows you to add additional menu items to the column menu in the Syncfusion Grid. These custom menu items can be defined using the [ColumnMenuItems](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuItems) property, which accepts a collection of `columnMenuItemModel` objects. You can define the actions for these custom items in the [ColumnMenuClick](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuClick) event.
 
-{% if page.publishingplatform == "aspnet-core" %}
+Consider the following example, which demonstrates how to add a custom column menu item to clear the sorting of the Grid:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/columnmenuevents/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Columnmenuevents.cs" %}
-{% include code-snippet/grid/columns/columnmenuevents/columnmenuevents.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/columnmenuevents/razor %}
+{% include code-snippet/grid/columns/customcolumnmenu/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Columnmenuevents.cs" %}
-{% include code-snippet/grid/columns/columnmenuevents/columnmenuevents.cs %}
+{% highlight c# tabtitle="Columnmenu.cs" %}
+{% include code-snippet/grid/columns/customcolumnmenu/columnmenu.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
-
 
+![custom menu](../../images/column-menu/Column-menu-custom.gif)
 
-## Custom column menu item
-
-Custom column menu items can be added by defining the [`ColumnMenuItems`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuItems) as collection of the ColumnMenuItemModel.
+## Customize menu items for particular columns
 
-Actions for this customized items can be defined in the [`ColumnMenuClick`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuClick) event.
+Sometimes, you have a scenario that to hide an item from column menu for particular columns. In that case, you need to define the `columnMenuOpenEventArgs.hide` as **true** in the [ColumnMenuOpen](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuOpen) event.
 
-{% if page.publishingplatform == "aspnet-core" %}
+The following sample, **Filter** item was hidden in column menu when opens for the **OrderID** column.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/customcolumnmenu/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Customcolumnmenu.cs" %}
-{% include code-snippet/grid/columns/customcolumnmenu/customcolumnmenu.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/customcolumnmenu/razor %}
+{% include code-snippet/grid/columns/customizecolumnmenu/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Customcolumnmenu.cs" %}
-{% include code-snippet/grid/columns/customcolumnmenu/customcolumnmenu.cs %}
+{% highlight c# tabtitle="Columnmenu.cs" %}
+{% include code-snippet/grid/columns/customizecolumnmenu/columnmenu.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
 
+![Customize menu items for particular columns](../../images/column-menu/Column-menu-particular.png)
 
+## Render nested column menu
 
-## Customize menu items for particular columns
+The nested column menu feature provides an extended menu option in the grid column headers, allows you to access additional actions and options related to the columns.
 
-Sometimes, you have a scenario that to hide an item from column menu for particular columns. In that case, you need to define the **hide** as true in the arguments of [`ColumnMenuOpen`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuOpen) event.
+To enable the nested column menu feature, you need to define the [ColumnMenuItems](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuItems) property in your component. The `ColumnMenuItems` property is an array that contains the items for the column menu. Each item can be a string representing a built-in menu item or an object defining a custom menu item.
 
-The following sample, **Filter** item was hidden in column menu when opens for the **OrderID** column.
-
-{% if page.publishingplatform == "aspnet-core" %}
+Here is an example of how to configure the `ColumnMenuItems` property to include a nested menu:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/customizecolumnmenu/tagHelper %}
+{% include code-snippet/grid/columns/columnmenu-stacked/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Customizecolumnmenu.cs" %}
-{% include code-snippet/grid/columns/customizecolumnmenu/customizecolumnmenu.cs %}
+{% highlight c# tabtitle="Columnmenu.cs" %}
+{% include code-snippet/grid/columns/columnmenu-stacked/columnmenu.cs %}
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/customizecolumnmenu/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Customizecolumnmenu.cs" %}
-{% include code-snippet/grid/columns/customizecolumnmenu/customizecolumnmenu.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
+![Render nested column menu](../../images/column-menu/Column-menu-stacked.png)
 
+## Customize the icon of column menu
 
+To customize the column menu icon, you need to override the default grid class **.e-icons.e-columnmenu** with a custom CSS property called **content**. By specifying a Unicode character or an icon font's CSS class, you can change the icon displayed in the column menu.
 
-## Customize the icon of column menu
+To customize the column menu icon, follow the below step:
 
-You can customize the column menu icon by overriding the default grid class **.e-icons.e-columnmenu** with a custom property **content** as mentioned below,
+1.Add the necessary CSS code to override the default grid class:
 
 ```css
-.e-grid .e-columnheader .e-icons.e-columnmenu::before {
-      content: "\e941";
-}
+  .e-grid .e-columnheader .e-icons.e-columnmenu::before {
+    content: "\e799";
+  }
 ```
 
-In the below sample, grid is rendered with a customized column menu icon.
+Here is an example that demonstrates how to customize the column menu icon in the Syncfusion Grid:
 
-{% if page.publishingplatform == "aspnet-core" %}
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/custom-column-menu-icon/tagHelper %}
+{% include code-snippet/grid/columns/custom-column-menu-icon/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Column-icon.cs" %}
-{% include code-snippet/grid/how-to/custom-column-menu-icon/column-icon.cs %}
+{% highlight c# tabtitle="Columnmenu.cs" %}
+{% include code-snippet/grid/columns/custom-column-menu-icon/columnmenu.cs %}
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+![Customize the icon of column menu](../../images/column-menu/column-menu-icon.png)
+
+## Column menu events
+
+The column menu in Syncfusion ASP.NET MVC Grid provides a set of events that allow customization of behavior and performing actions when the column menu is opened or clicked. The below events are helpful for adding additional functionality or implementing specific actions based on user interactions with the column menu.
+
+1.The [ColumnMenuOpen](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuOpen) event triggers before the column menu opens.
+
+2.The [ColumnMenuClick](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuClick) event triggers when the user clicks the column menu of the grid.
 
 {% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/custom-column-menu-icon/razor %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/columnmenuevents/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Column-icon.cs" %}
-{% include code-snippet/grid/how-to/custom-column-menu-icon/column-icon.cs %}
+{% highlight c# tabtitle="Columnmenu.cs" %}
+{% include code-snippet/grid/columns/columnmenuevents/columnmenu.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
 
+![Column menu events](../../images/column-menu/column-menu-events.gif)
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-reorder.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-reorder.md
index 8f418887fd..9d73d6a878 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-reorder.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-reorder.md
@@ -8,125 +8,132 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Reorder
+# Column reorder in ASP.NET MVC Grid component
+ 
+The Syncfusion ASP.NET MVC Grid component allows to reorder columns by drag and drop of a particular column header from one index to another index within the grid.
 
-Reordering can be done by drag and drop of a particular column header from one index to another index within the grid. To enable reordering, set the [`AllowReordering`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowReordering) to true.
+To reorder the columns, set the [AllowReordering](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowReordering) property to **true** in the grid.
 
-{% if page.publishingplatform == "aspnet-core" %}
+Here's an example for column reordering in your Grid component:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/reorder/tagHelper %}
+{% include code-snippet/grid/columns/reorder/razor %}
 {% endhighlight %}
 {% highlight c# tabtitle="Reorder.cs" %}
 {% include code-snippet/grid/columns/reorder/reorder.cs %}
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+![Column reorder](../../images/column-reorder/column-reorder.gif)
+
+>* You can customize the appearance of the column headers during drag and drop by using the [ColumnDrag](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnDrag) and [ColumnDrop](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnDrop) events.
+>* When columns are reordered, the position of the corresponding column data will also be changed. As a result, you should ensure that any additional code or logic that relies on the order of the column data is updated accordingly.
+
+## Prevent reordering for particular column
+
+By default, all columns in the Syncfusion ASP.NET MVC Grid can be reordered by dragging and dropping their headers to another location within the grid. However, there may be certain columns that you do not want to be reordered. In such cases, you can set the `AllowReordering` property of that particular column to **false**. Here is an example that demonstrates how to prevent reordering for a specific column:
+
+In this example, the **ShipName** column is prevented from being reordered by setting the `AllowReordering` property to **false**.
 
 {% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/reorder/razor %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/reorder-prevent/razor %}
 {% endhighlight %}
 {% highlight c# tabtitle="Reorder.cs" %}
-{% include code-snippet/grid/columns/reorder/reorder.cs %}
+{% include code-snippet/grid/columns/reorder-prevent/reorder.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
 
+![Prevent reordering for particular column](../../images/column-reorder/column-reorder-prevent.gif)
 
+## Reorder columns externally
 
-N> You can disable reordering a particular column by setting the [`AllowReordering`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_AllowReordering) property of [`Columns`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html) to false.
+The Syncfusion Grid ASP.NET MVC allows you to reorder columns externally, which means that using methods you can programmatically move columns around within the grid, based on their index or target index, or by using their field name.
 
-## Reorder single column
+> When reordering columns externally, you must set the [AllowReordering](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowReordering) property of the grid to **true**.
 
-Grid have option to reorder Columns either by Interaction or by using the **reorderColumns** method. In the below sample, **Name** column is reordered to last column position by using the method.
+### Reorder column based on index
 
-{% if page.publishingplatform == "aspnet-core" %}
+You can use the `reorderColumnByIndex` method to reorder columns based on their current index. This method takes two arguments:
 
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/reordercols/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Reordercols.cs" %}
-{% include code-snippet/grid/columns/reordercols/reordercols.cs %}
-{% endhighlight %}
-{% endtabs %}
+* **fromIndex** : Current index of the column to be reordered
+* **toIndex** : New index of the column after the reordering
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+Here is an example of how to use the `reorderColumnByIndex` method:
+
+In this example, we are moving the column at index **1** to index **3**.
 
 {% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
+{% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/grid/columns/reordercols/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Reordercols.cs" %}
-{% include code-snippet/grid/columns/reordercols/reordercols.cs %}
+{% highlight c# tabtitle="Reorder.cs" %}
+{% include code-snippet/grid/columns/reordercols/reorder.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
-
 
+![Reorder column based on index](../../images/column-reorder/column-reorder-index.gif)
 
-## Reorder multiple columns
+### Reorder column based on target index
 
-User can reorder a single column at a time by Interaction. Sometimes we need to have reorder multiple columns at the same time, It can be achieved through programmatically by using **reorderColumns** method.
+You can also use the `reorderColumnByTargetIndex` method to reorder single column or multiple columns based on the target index. This method takes two arguments:
 
-In the below sample, **Ship City** and **Ship Region** column is reordered to last column position.
+* **fieldName**: Field name of the column to be reordered
+* **toIndex**: New index of the column after the reordering
 
-{% if page.publishingplatform == "aspnet-core" %}
+Here is an example of how to use the `reorderColumnByTargetIndex` method to reorder single column and multiple columns based on target index:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/reordercolumns/tagHelper %}
+{% include code-snippet/grid/columns/reordertargetcolumns/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Reordercols.cs" %}
-{% include code-snippet/grid/columns/reordercolumns/reordercols.cs %}
+{% highlight c# tabtitle="Reorder.cs" %}
+{% include code-snippet/grid/columns/reordertargetcolumns/reorder.cs %}
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+![Reorder column based on target index](../../images/column-reorder/column-reorder-target.gif)
+
+### Reorder column based on field names
+
+The `reorderColumns` method of the Grid allows you to reorder single column or list of columns based on their field names. This method takes two arguments: 
+
+* **fromFName**: The field name of the column you want to move.
+* **toFName**: The field name of the column you want to move the column to.
+
+Here is an example of how to use the `reorderColumns` method to reorder single column and multiple columns based on field names:
 
 {% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/reordercolumns/razor %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/reorder-field/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Reordercols.cs" %}
-{% include code-snippet/grid/columns/reordercolumns/reordercols.cs %}
+{% highlight c# tabtitle="Reorder.cs" %}
+{% include code-snippet/grid/columns/reorder-field/reorder.cs %}
 {% endhighlight %}
-{% endtabs %}
-{% endif %}
-
+{% endtabs %} 
 
+![Reorder column based on field names](../../images/column-reorder/column-reorder-field.gif)
 
 ## Reorder events
 
-During the reorder action, the grid component triggers the below three events.
+When reordering columns in the Syncfusion ASP.NET MVC Grid component, you may want to take some specific action in response to the drag and drop events. To handle these events, you can define event handlers for the following events:
 
-1. The [`ColumnDragStart`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnDragStart) event triggers when column header element drag (move) starts.
-2. The [`ColumnDrag`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnDrag) event triggers when column header element is dragged (moved) continuously.
-3. The [`ColumnDrop`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnDrop) event triggers when a column header element is dropped on the target column.
+1.The [ColumnDragStart](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnDragStart) event triggers when column header element drag (move) starts.
 
-{% if page.publishingplatform == "aspnet-core" %}
+2.The [ColumnDrag](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnDrag) event triggers when column header element is dragged (moved) continuously.
 
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/reorderevents/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Reorderevents.cs" %}
-{% include code-snippet/grid/columns/reorderevents/reorderevents.cs %}
-{% endhighlight %}
-{% endtabs %}
+3.The [ColumnDrop](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnDrop) event triggers when a column header element is dropped on the target column.
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+In the following example, we have implemented the `ColumnDragStart`, `ColumnDrag`, and `ColumnDrop` events in the Syncfusion Grid component.
 
 {% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
+{% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/grid/columns/reorderevents/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Reorderevents.cs" %}
-{% include code-snippet/grid/columns/reorderevents/reorderevents.cs %}
+{% highlight c# tabtitle="Reorder.cs" %}
+{% include code-snippet/grid/columns/reorderevents/reorder.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
 
+![Reorder events](../../images/column-reorder/column-reorder-events.gif)
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-resizing.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-resizing.md
index 9150effc9c..8150de5da4 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-resizing.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-resizing.md
@@ -8,153 +8,167 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Column Resizing in ASP.Net MVC Grid component
+# Column resizing in ASP.NET MVC Grid component
 
-Column width can be resized by clicking and dragging the right edge of the column header. While dragging, the width of the respective column will be resized immediately. Each column can be auto resized by double-clicking the right edge of the column header to fit the width of that column based on the widest cell content. To enable column resize, set the [`AllowResizing`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowResizing) property to true.
+Grid component provides an intuitive user interface for resizing columns to fit their content. This feature allows users to easily adjust the width of the columns to improve readability and aesthetics of the data presented. To enable column resizing, set the [AllowResizing](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowResizing) property of the grid to **true**.
 
-{% if page.publishingplatform == "aspnet-core" %}
+Once column resizing is enabled, columns width can be resized by clicking and dragging at the right edge of the column header. While dragging the column, the width of the respective column will be resized immediately.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/resize/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Resize.cs" %}
-{% include code-snippet/grid/columns/resize/resize.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/grid/columns/resize/razor %}
 {% endhighlight %}
 {% highlight c# tabtitle="Resize.cs" %}
 {% include code-snippet/grid/columns/resize/resize.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
-
-
-
-N> You can disable resizing for a particular column by setting the [`AllowResizing`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_AllowResizing) property of [`Columns`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html) to false.
-<br/> In RTL mode, you can click and drag the left edge of the header cell to resize the column.
-
-## Column resizing using method
-
-To resize a column, set width to that particular column and then refresh the grid header by using the **refreshHeader** method. Refer the below code,
 
-```typescript
+![Column resizing](../../images/column-resize/column-resize.gif)
 
-var grid = document.getElementById('Grid').ej2_instances[0]; //Grid Instance
+>* You can disable Resizing for a particular column, by specifying `Columns.AllowResizing` to **false**.
+>* In RTL mode, you can click and drag the left edge of header cell to resize the column.
+>* The `Width` property of the column can be set initially to define the default width of the column. However, when column resizing is enabled, you can override the default width by manually resizing the columns.
 
-var columns = grid.columns;
+## Restrict the resizing based on minimum and maximum width
 
-columns[0].width = 150;
+The Grid component allows you to restrict the column width resizing between a minimum and maximum width. This can be useful when you want to ensure that your grid's columns stay within a certain range of sizes.
 
-grid.refreshHeader();
+To enable this feature, you can define the `Columns.MinWidth` and `Columns.MaxWidth` properties of the columns directive for the respective column.
 
-```
-
-## Min and max width
-
-Column resize can be restricted between minimum and maximum width by defining the [`MinWidth`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_MinWidth) and [`MaxWidth`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_MaxWidth) properties of [`Columns`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html).
-
-In the following sample, minimum and maximum width are defined for **OrderID**, **Ship Name**, and **Ship Country** columns.
-
-{% if page.publishingplatform == "aspnet-core" %}
+In the below code, **OrderID**, **Ship Name** and **Ship Country** columns are defined with minimum and maximum width. The **OrderID** column is set to have a minimum width of 100 pixels and a maximum width of 250 pixels. Similarly, the **CustomerID** column is set to have a minimum width of 150 pixels and a maximum width of 300 pixels. The **ShipCountry** column is set to have a minimum width of 120 pixels and a maximum width of 260 pixels.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/min/tagHelper %}
+{% include code-snippet/grid/columns/resize-max/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Min.cs" %}
-{% include code-snippet/grid/columns/min/min.cs %}
+{% highlight c# tabtitle="Resize.cs" %}
+{% include code-snippet/grid/columns/resize-max/resize.cs %}
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+![Restrict the resizing based on minimum and maximum width](../../images/column-resize/Colum-resize-max.gif)
+
+>* The `Columns.MinWidth` and `Columns.MaxWidth` properties will be considered only when the user resizes the column. When resizing the window, these properties will not be considered. This is because columns cannot be re-rendered when resizing the window.
+>* When setting the `MinWidth` and `MaxWidth` properties, ensure that the values are appropriate for your data and layout requirements.
+>* The specified `MinWidth` and `MaxWidth` values take precedence over any user-initiated resizing attempts that fall outside the defined range.
+
+## Prevent resizing for particular column
+
+The Grid component provides the ability to prevent resizing for a particular column. This can be useful if you want to maintain a consistent column width or prevent users from changing the width of a column.
+
+You can disable resizing for a particular column by setting the `AllowResizing` property of the column to **false**. The following example demonstrates, how to disabled resize for **Customer ID** column.
 
 {% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/min/razor %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/resize-prevent/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Min.cs" %}
-{% include code-snippet/grid/columns/min/min.cs %}
+{% highlight c# tabtitle="Resize.cs" %}
+{% include code-snippet/grid/columns/resize-prevent/resize.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
 
+> You can also prevent resizing by setting `args.cancel` to **true** in the [ResizeStart](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ResizeStart) event.
 
-N> The `maxWidth` and `minWidth` properties will be considered only when the user resizes the column. When resizing the window, these properties will not be considered. This is because columns cannot be re-rendered when resizing the window.
+## Resizing modes
 
-## Resize stacked column
+The Syncfusion Grid component provides a `ResizeSettingsModel` interface for configuring the resizing behavior of grid columns. The interface includes a property named `mode` which is of the type `ResizeMode`. The `ResizeMode` is an enum that determines the available resizing modes for the grid columns. There are two resizing modes available for grid columns in Grid:
 
-Stacked columns can be resized by clicking and dragging the right edge of the stacked column header. While dragging, the width of the respective child columns will be resized at the same time. You can disable resize for any particular stacked column by setting [`AllowResizing`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_AllowResizing) as **false** to its columns.
+1. `Normal Mode`: This mode does not adjust the columns to fit the remaining space. When the sum of column width is less than the grid's width, empty space will be present to the right of the last column. When the sum of column width is greater than the grid's width, columns will overflow, and a horizontal scrollbar will appear.
 
-In this example, we have disabled resize for Ship City column.
+2. `Auto Mode`: This mode automatically resizes the columns to fill the remaining space. When the sum of column width is less than the grid's width, the columns will be automatically expanded to fill the empty space. Conversely, when the sum of column width is greater than the grid's width, the columns will be automatically contracted to fit within the available space.
 
-{% if page.publishingplatform == "aspnet-core" %}
+The following example demonstrates how to set the [ResizeSettings.Mode](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridResizeSettings.html#Syncfusion_EJ2_Grids_GridResizeSettings_Mode) property to **Normal** and **Auto** on changing the dropdown value using the [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the DropDownList component.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/stacked/tagHelper %}
+{% include code-snippet/grid/columns/resize-mode/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Stacked.cs" %}
-{% include code-snippet/grid/columns/stacked/stacked.cs %}
+{% highlight c# tabtitle="Resize.cs" %}
+{% include code-snippet/grid/columns/resize-mode/resize.cs %}
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+![Resizing modes](../../images/column-resize/Colum-resize-mode.gif)
+
+## Resize stacked header column
+
+Grid component allows to resize stacked columns by clicking and dragging the right edge of the stacked column header. During the resizing action, the width of the child columns is resized at the same time. You can disable resize for any particular stacked column by setting [AllowResizing](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowResizing) as **false** to its columns.
+
+In this below code, we have disabled resize for **Ship City** column.
 
 {% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/stacked/razor %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/resize-stacked/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Stacked.cs" %}
-{% include code-snippet/grid/columns/stacked/stacked.cs %}
+{% highlight c# tabtitle="Resize.cs" %}
+{% include code-snippet/grid/columns/resize-stacked/resize.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
 
+![Reorder events](../../images/column-resize/Colum-resize-stacked.gif)
 
+> When the [AutoFit](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AutoFit) property is set to **true**, the Grid will automatically adjust its column width based on the content inside them. In `normal` resize mode, if the `AutoFit` property is set to **true**, the Grid will maintain any empty space that is left over after resizing the columns. However, in `auto` resize mode, the Grid will ignore any empty space.
 
 ## Touch interaction
 
-When the right edge of the header cell is tapped, a floating handler will be visible over the right border of the column. To resize the column, tap and drag the floating handler as needed. You can autoFit a column by using the Column menu of the grid.
+Grid component provides support for touch interactions to enable users to interact with the grid using their mobile devices. Users can resize columns in the grid by tapping and dragging the floating handler, and can also use the Column menu to autofit columns.
 
-The following screenshot represents the column resizing in touch device.
+**Resizing Columns on Touch Devices**
 
-![Touch interaction](../../images/column-resizing.jpg)
+To resize columns on a touch device:
 
-## Resizing events
+1.Tap on the right edge of the header cell of the column that you want to resize.
 
-During the resizing action, the grid component triggers the below three events.
+2.A floating handler will appear over the right border of the column.
+
+3.Tap and drag the floating handler to resize the column to the desired width.
 
-1. The [`ResizeStart`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ResizeStart) event triggers when column resize starts.
-2. The [`Resizing`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Resizing) event triggers when column header element is dragged (moved) continuously.
-3. The [`ResizeStop`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ResizeStop) event triggers when column resize ends.
+The following screenshot represents the column resizing on the touch device.
 
-{% if page.publishingplatform == "aspnet-core" %}
+![Touch Interaction](../../images/column-resizing.jpg)
+
+## Resizing column externally
+
+Grid provides the ability to resize columns using an external button click. This can be achieved by changing the `Width` property of the column and refreshing the grid using the `refreshColumns` method in the external button click function.
+
+The following example demonstrates how to resize the columns in a grid. This is done by using the [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the DropDownList component by change the `Width` property of the selected column. This is accomplished using the  `getColumnByField` on external button click. Then, the `refreshColumns` method is called on the grid component to update the displayed columns based on interaction.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/resizeevents/tagHelper %}
+{% include code-snippet/grid/columns/resize-external/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Resizeevents.cs" %}
-{% include code-snippet/grid/columns/resizeevents/resizeevents.cs %}
+{% highlight c# tabtitle="Resize.cs" %}
+{% include code-snippet/grid/columns/resize-external/resize.cs %}
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+![Reorder events](../../images/column-resize/Colum-resize-external.png)
+
+>  The `refreshColumns` method is used to refresh the grid after the column widths are updated. Column resizing externally is useful when you want to provide a custom interface to the user for resizing columns.
+
+## Resizing events
+
+During the resizing action, the grid component triggers the below three events.
+
+1.The [ResizeStart](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ResizeStart) event triggers when column resize starts. This event can be used to perform actions when the user begins to resize a column. 
+
+2.The [Resizing](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Resizing) event triggers when column header element is dragged (moved) continuously. This event is useful when you want to perform certain actions during the column resize process.
+
+3.The [ResizeStop](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ResizeStop) event triggers when column resize ends. This event can be used to perform actions after the column is resized.
+
+The following is an example of using the resizing events, the `ResizeStart` event is used to cancel the resizing of the **OrderID** column. The `ResizeStop` event is used to apply custom CSS attributes to the resized column.
 
 {% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
+{% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/grid/columns/resizeevents/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Resizeevents.cs" %}
-{% include code-snippet/grid/columns/resizeevents/resizeevents.cs %}
+{% highlight c# tabtitle="Resize.cs" %}
+{% include code-snippet/grid/columns/resizeevents/resize.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
+
+![Reorder events](../../images/column-resize/Colum-resize-event.gif)
+
+
+>The ResizeArgs object passed to the events contains information such as the current column width, new column width, column index, and the original event. The [Resizing](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Resizing) event is triggered multiple times during a single resize operation, so be careful when performing heavy operations in this event.
 
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
new file mode 100644
index 0000000000..3dd5038b98
--- /dev/null
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/frozen-column.md
@@ -0,0 +1,144 @@
+---
+layout: post
+title: Column pinning (Frozen) in Syncfusion ##Platform_Name## Grid Component
+description: Learn here all about Column pinning (Frozen) in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Column pinning (Frozen)
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Column Pinning (Frozen) in ASP.NET MVC Grid component
+
+In the Syncfusion ASP.NET MVC Grid component, you have the capability to **freeze** columns, ensuring they remain visible as you scroll through extensive datasets. This functionality significantly improves user experience by keeping critical information constantly within view, even when navigating through large volumes of data. This means that important columns remain fixed in their positions, making it easier to access and reference key data points while working with the grid.
+
+In the following example, the [FrozenColumns](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_FrozenColumns) property is set to **2**. This configuration freezes the left two columns of the grid, and they will remain fixed in their positions while the rest of the columns grid can be scrolled horizontally.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/frozen-columns/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Frozen.cs" %}
+{% include code-snippet/grid/columns/frozen-columns/frozen.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Column Pinning](../../images/column-chooser/frozon.png)
+
+> * Frozen columns should not be set outside the grid view port.
+> * Frozen Grid support column virtualization feature, which helps to improve the Grid performance while loading a large dataset.
+> * The frozen feature is supported only for the columns that are visible in the current view.
+> * You can use both `FrozenColumns` property and [FrozenRows](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_FrozenRows) property in the same application.
+
+## Freeze particular columns
+
+The Syncfusion ASP.NET MVC Grid provides a valuable feature that enables you to freeze specific columns, significantly enhancing data visibility and improving your overall user experience. This functionality allows you to select particular columns and freeze them by positioning them at the leftmost side of the grid, ensuring they remain fixed in place while the remaining grid columns can still be scrolled horizontally. While the `FrozenColumns` property freezes columns in the order they are initialized in the grid, you can also use the `IsFrozen` property at the column level to freeze a specific column at any desired index on the left side, offering flexibility in managing which columns are frozen.
+
+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.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/frozen-particular/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Frozen.cs" %}
+{% include code-snippet/grid/columns/frozen-particular/frozen.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Freeze particular columns](../../images/column-chooser/frozon-particular.png)
+
+## Freeze direction
+
+In the Syncfusion ASP.NET MVC Grid, the "freeze direction" feature serves to reposition frozen columns either to the left, right, or in a fixed position, while still allowing the remaining columns to be horizontally movable. This feature is designed to optimize user experience by ensuring that critical information remains visible even during horizontal scrolling. By default, when you set the `FrozenColumns` property of the grid or the `IsFrozen` property of individual columns, it results in freezing those columns on the left side of the grid. This helps in keeping important data readily accessible as you navigate through your dataset.
+
+To achieve this, you can utilize the `Column.Freeze` property. This property is used to specify the freeze direction for individual columns. The grid will adjust the column positions based on the `Column.Freeze` value.
+
+The types of the `Column.Freeze` directions:
+
+* **Left**: When you set the `Column.Freeze` property to **Left**, specific columns will be frozen on the left side of the grid. The remaining columns will be movable.
+
+* **Right**: When you set the `Column.Freeze` property to **Right**, certain columns will be frozen on the right side of the grid, while the rest of the columns remain movable.
+
+* **Fixed**: The Fixed direction locks a column at a fixed position within the grid. This ensures that the column is always visible during horizontal scroll.
+
+In the following example, the **ShipCountry** column is frozen on the left side, the **CustomerID** column is frozen on the right side and the **Freight** column is frozen on the fixed of the content table. Additionally, you can modify the `Column.Freeze` property to **Left**, **Right** and **Fixed** based on the selected column by utilizing the [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the `DropDownList` component.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/frozen-direction/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Frozen.cs" %}
+{% include code-snippet/grid/columns/frozen-direction/frozen.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Freeze direction](../../images/column-chooser/frozon-direction.png)
+
+> * Freeze Direction is not compatible with the `IsFrozen` and [FrozenColumns](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_FrozenColumns) properties.
+
+## Change default frozen line color
+
+You can customize the frozen line borders of frozen columns in the Syncfusion Grid component by applying custom CSS styles to the specific frozen column. This allows you to change the border color of the left frozen columns, right frozen columns, and fixed frozen columns to match your application's design and theme.
+
+To change default frozen line color, use the following class name and apply the border color based on your requirement.
+
+For left frozen columns: 
+
+```css
+.e-grid .e-leftfreeze.e-freezeleftborder {
+    border-right-color: rgb(198, 30, 204);
+}
+```
+For right frozen columns:
+
+```css
+.e-grid .e-rightfreeze.e-freezerightborder {
+    border-left-color: rgb(19, 228, 243);
+}
+```
+For fixed frozen columns, you need to specify both left and right border as mentioned below
+
+```css
+.e-grid .e-fixedfreeze.e-freezeleftborder{
+    border-left-color: rgb(9, 209, 9); 
+}
+
+.e-grid .e-fixedfreeze.e-freezerightborder{
+    border-right-color: rgb(10, 224, 10);
+}
+```
+The following example demonstrates how to change the default frozen line color using CSS.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/frozen-color/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Frozen.cs" %}
+{% include code-snippet/grid/columns/frozen-color/frozen.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Change default frozen line color](../../images/column-chooser/frozon-color.png)
+
+## Deprecated methods 
+
+Previous | Current | Explanation 
+ ---  | --- | --- 
+`getMovableRows()` gridInstance.getMovableRows()[0].querySelectorAll('.e-unfreeze') | `getRows()` gridInstance.getRows()[0].querySelectorAll('.e-unfreeze') | The previous architecture used separate tables for left, right, and movable contents, returning only movable rows when calling the method, whereas the current architecture combines them into one table, returning all rows and introduces the `e-unfreeze` class for selecting movable rows
+`getFrozenRightRows()` gridInstance.getFrozenRightRows()[0].querySelectorAll('.e-rightfreeze') | `getRows()` gridInstance.getRows()[0].querySelectorAll('.e-rightfreeze') | In the previous architecture, it returned only the table rows from the right freeze table, but in the current architecture, all rows of the entire table are returned, introducing the `e-rightfreeze` class for selecting right freeze rows. 
+`getMovableRowByIndex()` <br> `getFrozenRowByIndex()` <br> `getFrozenRightRowByIndex()` | `getRowByIndex()` gridInstance.getRowByIndex(1).querySelectorAll('.e-unfreeze') | In the previous architecture, separate methods were used to select rows from different table sections, while in the current architecture, the `getMovableRowByIndex()`, `getFrozenRightRowByIndex()`, and `getFrozenRowByIndex()` methods now return the same table row based on the given index. Additionally, class names for table cells (td's) have been separated into `e-leftfreeze`, `e-unfreeze`, and `e-rightfreeze`, making it easier to customize cells within a row.
+`getMovableCellFromIndex()` <br> `getFrozenRightCellFromIndex()` | `getCellFromIndex()` gridInstance.getCellFromIndex(1,1) | In the previous approach, the `getMovableCellFromIndex()` method was used to choose a specific cell within the movable table, and the `getFrozenRightCellFromIndex()` method was utilized to target a particular cell within the right freeze table. However, in the current architecture, you have the flexibility to select a specific cell in either the movable or right freeze table by using both the `getFrozenRightCellFromIndex()` and `getMovableCellFromIndex()` methods. This new method simplifies the process of selecting and retrieving specific cells within these tables, offering more versatility and convenience.
+`getMovableDataRows()` <br> `getFrozenRightDataRows()` <br> `getFrozenDataRows()` | `getDataRows()` gridInstance.getDataRows()[0].querySelectorAll('.e-unfreeze') | In the previous approach, there were separate methods (`getMovableDataRows()`, `getFrozenRightDataRows()`, and `getFrozenDataRows()`) for obtaining viewport data rows from the freeze, movable, and right tables individually. However, in the new approach, these methods have been enhanced to return the entire viewport data rows for all sections together, simplifying data retrieval. You can now extract specific cells within these rows using selectors such as `e-leftfreeze` for the **left freeze**, `e-unfreeze` for the **movable**, and `e-rightfreeze` for the **right freeze** tables, providing greater flexibility in working with the data.
+`getMovableColumnHeaderByIndex()` <br> `getFrozenRightColumnHeaderByIndex()` <br> `getFrozenLeftColumnHeaderByIndex()` | `getColumnHeaderByIndex()` gridInstance.getColumnHeaderByIndex(1) | In the previous architecture, the methods selected movable, right freeze, and left freeze headers separately. However, in the new approach, when using the `getMovableColumnHeaderByIndex()`, `getFrozenRightColumnHeaderByIndex()`, and `getFrozenLeftColumnHeaderByIndex()` methods, you will still obtain the same results as in the previous architecture.
+
+> When a validation message is displayed in the frozen part (Left, Right, Fixed) of the table, scrolling is prevented until the validation message is cleared.
+
+## Limitations
+
+While freezing columns in the Syncfusion ASP.NET MVC Grid provides enhanced visibility and scrolling capabilities, there are certain limitations to consider. The following features are not supported when using frozen columns:
+
+* Detail Template
+* Hierarchy Grid
+* Autofill
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/headers.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/headers.md
deleted file mode 100644
index 6086316eb6..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/headers.md
+++ /dev/null
@@ -1,176 +0,0 @@
----
-layout: post
-title: Headers in ##Platform_Name## Grid Component
-description: Learn here all about Headers in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Headers
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-# Headers
-
-## Header text
-
-By default, column header title is displayed from column [`Field`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Field) value. To override the default header title, you have to define the [`HeaderText`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_HeaderText) value.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/headertext/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Headertext.cs" %}
-{% include code-snippet/grid/columns/headertext/headertext.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/headertext/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Headertext.cs" %}
-{% include code-snippet/grid/columns/headertext/headertext.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
-
-N> If both the [`Field`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Field) and [`HeaderText`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_HeaderText) are not defined in the column, the column renders with empty header text.
-
-## Header template
-
-You can customize the header element by using the [`HeaderTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_HeaderTemplate) property. In this demo, the custom element is rendered for both EmployeeID and BirthDate column headers.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/headertemplate/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Headertemplate.cs" %}
-{% include code-snippet/grid/columns/headertemplate/headertemplate.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/headertemplate/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Headertemplate.cs" %}
-{% include code-snippet/grid/columns/headertemplate/headertemplate.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
-
-## Change header text dynamically
-
-You can change the column [`HeaderText`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_HeaderText) dynamically through an external button.
-
-Follow the given steps to change the header text dynamically:
-
-**Step 1**: Get the column object corresponding to the field name by using the [`getColumnByField`](https://ej2.syncfusion.com/documentation/api/grid/#getcolumnbyfield) method. Then, change the header text value.
-
-```typescript
-var column = grid.getColumnByField("ShipCity"); // Get column object.
-column.headerText = 'Changed Text';
-
-```
-
-**Step 2**: To reflect the changes in the grid header, invoke the [`refreshHeader`](https://ej2.syncfusion.com/documentation/api/grid/#refreshheader) method.
-
-```typescript
-grid.refreshHeader();
-
-```
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/column-header-text/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Column-header-text.cs" %}
-{% include code-snippet/grid/how-to/column-header-text/column-header-text.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/column-header-text/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Column-header-text.cs" %}
-{% include code-snippet/grid/how-to/column-header-text/column-header-text.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
-
-## Change the orientation of header Text
-
-You can change the orientation of the header text by using the [`CustomAttributes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_CustomAttributes) property.
-
-Ensure the following steps:
-
-**Step 1**: Create a CSS class with orientation style for the grid header cell.
-
-```css
-.orientationcss .e-headercelldiv {
-    transform: rotate(90deg);
-}
-
-```
-
-**Step 2**: Add the custom CSS class to a particular column by using the [`CustomAttributes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_CustomAttributes) property.
-
-```typescript
-    <e-grid-column field="ShipCity" headerText="Ship City" width="150" customAttributes=new { class='orientationcss' }"></e-grid-column>
-
-```
-
-**Step 3**: Resize the header cell height by using the following code.
-
-```typescript
-function setHeaderHeight(args) {
-    var textWidth = document.querySelector(".orientationcss > div").scrollWidth;//Obtain the width of the headerText content.
-    var headerCell = document.querySelectorAll(".e-headercell");
-    for(var i = 0; i < headerCell.length; i++) {
-        headerCell.item(i).style.height = textWidth + 'px'; //Assign the obtained textWidth as the height of the headerCell.
-    }
-}
-
-```
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/orientation/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Orientation.cs" %}
-{% include code-snippet/grid/how-to/orientation/orientation.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/orientation/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Orientation.cs" %}
-{% include code-snippet/grid/how-to/orientation/orientation.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/cell.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/cell.md
index 5c661011a9..c182fe85d8 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/cell.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/cell.md
@@ -8,9 +8,9 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Cell in ##Platform_Name## Syncfusion Grid component
+# Cell in ASP.NET Core Syncfusion Grid component
 
-In the Syncfusion ##Platform_Name## Grid, a **cell** refers to an individual data point or a unit within a grid column that displays data. It represents the intersection of a row and a column, and it contains specific information associated with that row and column. Each cell can display text, numbers, or other content related to the data it represents. 
+In the Syncfusion ASP.NET Core Grid, a **cell** refers to an individual data point or a unit within a grid column that displays data. It represents the intersection of a row and a column, and it contains specific information associated with that row and column. Each cell can display text, numbers, or other content related to the data it represents. 
 
 The Grid component allows you to customize the appearance and behavior of cells using various features and options. You can define templates, format cell values, enable or disable editing, and perform various other operations on the cells to create interactive and informative data grids in your web applications.
 
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 5f4e44d9d7..282135dbc4 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
@@ -8,11 +8,9 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Column Chooser
+# Column chooser in ASP.NET Core Grid component
 
-The column chooser has options to show or hide columns dynamically. It can be enabled by defining the [`showColumnChooser`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ShowColumnChooser) property as true.
-
-{% if page.publishingplatform == "aspnet-core" %}
+The column chooser feature in the Syncfusion ASP.NET Core Grid component allows you to dynamically show or hide columns. This feature can be enabled by defining the [showColumnChooser](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ShowColumnChooser) property as **true**.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -23,46 +21,105 @@ The column chooser has options to show or hide columns dynamically. It can be en
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+![Column chooser](../../images/column-chooser/Colum-chooser.png)
+
+> The column chooser dialog displays the header text of each column by default. If the header text is not defined for a column, the corresponding column field name is displayed instead.
+
+## Hide column in column chooser dialog
+
+You can hide the column names in column chooser by defining the `columns.showInColumnChooser` as **false**. This feature is useful when working with a large number of columns or when you want to limit the number of columns that are available for selection in the column chooser dialog.
+
+In this example, the `columns.showInColumnChooser` property is set to **false** for the **Order ID** column. As a result, the **Order ID** column will not be displayed in the column chooser dialog.
 
 {% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/columnchooser/razor %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/columnchooser-hide/tagHelper %}
 {% endhighlight %}
 {% highlight c# tabtitle="Columnchooser.cs" %}
-{% include code-snippet/grid/columns/columnchooser/columnchooser.cs %}
+{% include code-snippet/grid/columns/columnchooser-hide/columnchooser.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Hide column in column chooser dialog](../../images/column-chooser/Colum-chooser-hide.png)
+
+>The `columns.showInColumnChooser` property is applied to each <e-grid-column> element individually. By setting it to **false**, you can hide specific columns from the column chooser dialog.
+
+## Open column chooser by externally
+
+The Syncfusion ASP.NET Core Grid provides the flexibility to open the column chooser dialog on a web page using an external button. By default, the column chooser button is displayed in the right corner of the grid component, and clicking the button opens the column chooser dialog below it. However, you can programmatically open the column chooser dialog at specific **X** and **Y** axis positions by using the `openColumnChooser` method.
+
+Here's an example of how to open the column chooser in the Grid using an external button:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/columnchooser-external/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Columnchooser.cs" %}
+{% include code-snippet/grid/columns/columnchooser-external/columnchooser.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
 
+![Open column chooser by externally](../../images/column-chooser/Colum-chooser-external.png)
+
+## Customize column chooser dialog size
+	
+The column chooser dialog in Syncfusion ASP.NET Core Grid comes with default size, but you can modify its height and width as per your specific needs using CSS styles.
+To customize the column chooser dialog size, you can use the following CSS styles:
 
+```css
+.e-grid .e-dialog.e-ccdlg {
+    height: 500px;
+    width: 200px;
+}
+.e-grid .e-ccdlg .e-cc-contentdiv {
+    height: 200px;
+    width: 230px;
+}
+```
 
-N> You can hide the column names in column chooser by defining the [`showInColumnChooser`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_ShowInColumnChooser) property as false in **e-grid-column** tag helper of particular column.
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/columnchooser-size/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Columnchooser.cs" %}
+{% include code-snippet/grid/columns/columnchooser-size/columnchooser.cs %}
+{% endhighlight %}
+{% endtabs %}
 
-## Open column chooser by external button
+![Customize column chooser dialog size](../../images/column-chooser/Colum-chooser-size.png)
 
-The Column chooser can be displayed on a page through external button by invoking the **openColumnChooser** method with **X** and **Y** axis positions.
+## Change default search operator of the column chooser 
 
-{% if page.publishingplatform == "aspnet-core" %}
+The column chooser dialog in the Syncfusion ASP.NET Core Grid provides a search box that allows you to search for column names. By default, the search functionality uses the "startsWith" operator to match columns and display the results in the column chooser dialog. However, there might be cases where you need to change the default search operator to achieve more precise data matching.
+
+To change the default search operator of the column chooser in Syncfusion Grid, you need to use the [operator](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumnChooserSettings.html#Syncfusion_EJ2_Grids_GridColumnChooserSettings_Operator) property of the columnChooserSettings.
+
+Here's an example of how to change the default search operator of the column chooser to **contains** in the ASP.NET Core Grid:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/externalbutton/tagHelper %}
+{% include code-snippet/grid/columns/columnchooser-contains/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Externalbutton.cs" %}
-{% include code-snippet/grid/columns/externalbutton/externalbutton.cs %}
+{% highlight c# tabtitle="Columnchooser.cs" %}
+{% include code-snippet/grid/columns/columnchooser-contains/columnchooser.cs %}
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+![Change default search operator of the column chooser ](../../images/column-chooser/Colum-chooser-contains.png)
+
+## Diacritics searching in column chooser
+
+By default, the grid ignores diacritic characters when performing a search in the column chooser. However, in some cases, you may want to include diacritic characters in the search. To enable this behavior, you can set the [columnchoosersettings.ignoreAccent](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumnChooserSettings.html#Syncfusion_EJ2_Grids_GridColumnChooserSettings_IgnoreAccent) property to **true**.
+
+Here is an example that demonstrates the usage of the `ignoreAccent` property to include diacritic characters for searching in the column chooser:
 
 {% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/externalbutton/razor %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/columnchooser-diacritics/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Externalbutton.cs" %}
-{% include code-snippet/grid/columns/externalbutton/externalbutton.cs %}
+{% highlight c# tabtitle="Columnchooser.cs" %}
+{% include code-snippet/grid/columns/columnchooser-diacritics/columnchooser.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
 
+![Diacritics searching in column chooser](../../images/columns/Column-headertext.png)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-headers.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-headers.md
new file mode 100644
index 0000000000..ada4100eae
--- /dev/null
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-headers.md
@@ -0,0 +1,476 @@
+---
+layout: post
+title: Headers in ##Platform_Name## Grid Component
+description: Learn here all about Headers in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Headers
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+
+# Headers in ASP.NET Core Grid component
+
+The Syncfusion ASP.NET Core Grid component provides a comprehensive set of options to customize and manage headers efficiently. Headers play a crucial role in organizing and presenting data effectively in the grid.
+
+## Header text
+
+The `headerText` feature proves particularly beneficial when there is a need for more meaningful and descriptive column headers in the Syncfusion ASP.NET Core Grid component.
+
+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.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Header text](../../images/columns/Column-headertext.png)
+
+> * If both the `field` and `headerText` are not defined in the column, the column renders with **empty** header text.
+> * The `headerText` property is optional, and if it is not defined, then the corresponding column's field value is set as header text for that column.  
+> * You can also use the `headerTemplate` property to apply custom HTML content to the header cell.
+
+## Header template
+
+The header template feature in the Syncfusion ASP.NET Core Grid component allows you to create custom header layouts and content, providing enhanced functionality such as sorting or filtering.
+
+To implement a header template, set the `headerTemplate` property within a specific column definition. This allows you to render custom HTML elements or ASP.NET Core components to the header.
+
+The following example demonstrate, the custom element is rendered for both **CustomerID**,**Freight** and **OrderDate** column headers.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertemplate/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertemplate.cs" %}
+{% include code-snippet/grid/columns/headertemplate/headertemplate.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Header template](../../images/columns/Column-headertext-headerTemplate.png)
+
+>* The `headerTemplate` property is only applicable to Grid columns that have a header element.
+>* You can use any HTML or ASP.NET Core component in the header template to add additional functionality to the header element.
+
+## Stacked header 
+
+In Grid, you can group multiple levels of column headers by stacking the Grid columns. This feature allows you to organize the Grid columns in a more structured and understandable way. This can be achieved by setting the [columns->columns](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Columns) property. Within this property, you can define an array of column objects to group together as sub-headers under a main header. You can define the `headerText` property of each sub-header column to set the text for that sub-header.
+
+You can customize the appearance of the stacked header elements by using the `headerTemplate` property. This allows you to render custom HTML elements or ASP.NET Core components to the header. 
+
+Here's an example of how to use stacked headers with a custom `headerTemplate` in Syncfusion Grid.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-stacked/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Stackedheader.cs" %}
+{% include code-snippet/grid/columns/headertext-stacked/stackedHeader.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Stacked header](../../images/columns/Column-headertext-stacked.png)
+
+## Align the text of header text
+
+You can horizontally align the text in column headers of the Grid component using the `headerTextAlign` property. By default, the text is aligned to the left, but you can change the alignment by setting the value of the `headerTextAlign` property to one of the following options:
+
+* **Left**: Aligns the text to the left (default).
+* **Center**: Aligns the text to the center.
+* **Right**: Aligns the text to the right.
+* **Justify**: Header text is justified.
+
+The following example demonstrates how to dynamically change the alignment of the header text based on DropDown change:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-textalign/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext-textalign/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Align the text of header text](../../images/columns/Column-headertext-change-alignment.gif)
+
+>* The `headerTextAlign` property only changes the alignment of the text in the column header, and not the content of the column. If you want to align both the column header and content, you can use the [textAlign](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.TextAlign.html) property.
+>* You can also use the `headerTextAlign` property with the stacked header feature in Syncfusion Grid. The property will align the header text in the sub-headers as well.
+
+## Autowrap the header text
+
+The autowrap allows the cell content of the grid to wrap to the next line when it exceeds the boundary of the specified cell width. The cell content wrapping works based on the position of white space between words. To support the Autowrap functionality in Syncfusion Grid, you should set the appropriate [width](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Width) for the columns. The column width defines the maximum width of a column and helps to wrap the content automatically.
+
+To enable autowrap, set the `allowTextWrap` property to **true**. You can also configure the auto wrap mode by setting the [textWrapSettings.wrapMode](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridTextWrapSettings.html#Syncfusion_EJ2_Grids_GridTextWrapSettings_WrapMode) property.
+
+Grid provides the below three options for configuring:
+
+* **Both**: This is the default value for wrapMode. With this option, both the grid header text and content is wrapped.
+* **Header**: With this option, only the grid header text is wrapped.
+* **Content**: With this option, only the grid content is wrapped.
+
+>* If a column width is not specified, then the Autowrap of columns will be adjusted with respect to the grid's width.
+>* If a column's header text contains no white space, the text may not be wrapped.
+>* If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In such cases, you can use the `headerTemplate` and `template` properties of the column to customize the appearance of the header and cell content.
+
+The following example demonstrates how to dynamically change the auto-wrap of the header text based on DropDown change.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-autowrap/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext-autowrap/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Autowrap the header text](../../images/columns/Column-headertext-wrap-mode.png)
+
+
+## Change the height of header
+
+Changing the height of the header can be useful in cases where the default height is not sufficient to display the header content cell. For example, if you have a header with a lot of text or if you want to add an image to the header, you may need to increase the height of the header to accommodate the content.This can be easily achieved by changing the height of the header using CSS or by dynamically adjusting the height using a methods.
+
+**Using css**
+
+You can use CSS to override the default height of the **.e-grid .e-headercell** class to change the height of the header. Here is an example code snippet:
+
+```css
+.e-grid .e-headercell {
+  height: 130px;
+}
+```
+
+**Using methods**
+
+To change the height of the header dynamically, you can use the `getHeaderContent` method to get the header content element of the Syncfusion 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.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-change-height/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext-change-height/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Change the height of header](../../images/columns/Column-headertext-change-height.gif)
+
+>* You can also use the `getHeaderTable` method to get the table element of the header, and then adjust the height.
+>* You cannot change the height of row below the default height of 42px using the **e-columnheader** class.
+
+## Change header text dynamically
+
+The Syncfusion Grid component provides a way to modify the header text of a corresponding column in real-time based on events or other events. This feature can be useful in various scenarios, such as displaying a custom header text for a specific column or updating the header text dynamically based on input. By allowing for dynamic changes to the header text, the Grid provides a more flexible and customizable experience.
+
+**Using Event**
+
+To modify the header text of a corresponding column dynamically, you can use the [headerCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_HeaderCellInfo) event provided by the Syncfusion Grid. This event is triggered for each header cell element rendered in the Grid.
+
+When the `HeaderCellInfo` event is triggered, it provides a **HeaderCellInfoEventArgs** object as a parameter. This object contains the following properties:
+
+* **cell**: Defines the header cell that is being modified.
+* **node**: Defines the DOM element of the header cell that is being modified.
+
+You can use these properties to access and modify the header text of the corresponding column. Once the header text is modified, you can refresh the Grid to reflect the changes by calling the `refreshHeader` method of the Grid.
+
+**Using method**
+
+The Grid component provides several methods that allow you to change the column header text dynamically. Here are some of the methods you can use:
+
+1. `getColumnByField`: This method takes a field name as a parameter and returns the entire column object that corresponds to that field name, including properties such as headerText, width, and alignment. You can use this method to modify any aspect of the column.
+
+2.	`getColumnHeaderByField`: Retrieves the header element of a column based on its field name. You can modify the **textContent** property of the header element to change the header text. This method does not return a reference to the column object itself, only to the header element.
+
+3.	`getColumnIndexByField`: Retrieves the index of a column based on its field name. You can then use the `getColumnByIndex` method to retrieve the column object and modify its `headerText` property to change the header text.
+
+4.	`getColumnByUid`: Retrieves the column object based on its unique identifier (UID). You can modify the `headerText` property of the column object to change the header text.
+
+5.	`getColumnHeaderByIndex`: Retrieves the header element of a column based on its zero-based index. You can modify the **textContent** property of the header element to change the header text. This method does not return a reference to the column object itself, only to the header element.
+
+6.	`getColumnIndexByUid`: Retrieves the index of a column based on its unique identifier (UID). You can then use the `getColumnByIndex` method to retrieve the column object and modify its `headerText` property to change the header text.
+
+7.	`getColumnHeaderByUid`: Retrieves the header element of a column based on its unique identifier (UID). You can modify the **textContent** property of the  header element to change the header text. This method does not return a reference to the column object itself, only to the header element.If you only have an `template` for the column header, and the column itself is not defined with a `field` , then you can use the `getColumnHeaderByUid` method to get a reference to the header element and modify its text content to change the header text.
+	
+>* When you change the header text dynamically, you need to **refresh** the Grid to reflect the changes by calling the `refreshHeader` method.
+>* The UID is automatically generated by the Grid component and may change whenever the grid is refreshed or updated.
+
+Here is an example of how to change the header text of a column using the `getColumnByField` method:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-change/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Columntext.cs" %}
+{% include code-snippet/grid/columns/headertext-change/columntext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Change header text dynamically](../../images/columns/Column-headertext-change.png)
+
+**Changing the header text of all columns**
+
+If you want to change the header text of all columns in the grid, you can loop through the Columns collection of the grid and set the `headerText` property for each column. Here is an example:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-change-all/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Columntext.cs" %}
+{% include code-snippet/grid/columns/headertext-change-all/columntext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Changing the header text of all columns](../../images/columns/Column-headertext-change-all.gif)
+
+## Change the orientation of header text
+
+By default, the text in the column headers of the Syncfusion Grid control is oriented horizontally. However, in some cases, you may want to change the orientation of the header text to vertical, diagonal, or at a custom angle. This can be achieved by adding a custom CSS class to the column header cell using the `customAttributes` property of the Grid columns.
+
+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.
+
+```css
+.orientationcss .e-headercelldiv {
+    transform: rotate(90deg);
+}
+```
+
+**Step 2**: **Add the custom CSS class to the grid column**
+
+Once you have created the CSS class, you can add it to the particular column by using the `customAttributes` property. This property allows you to add any custom  attribute to the grid column.
+
+For example, to add the orientationcss class to the Freight column, you can use the following code:
+
+```typescript
+    <e-grid-column field="Freight" headerText="Freight" customAttributes="@(new { @class="orientationcss" })" format='C' textAlign="Center" width="120"></e-grid-column>
+```
+
+**Step 3**: **Resize the header cell height**
+
+After adding the custom CSS class to a column, you need to resize the header cell height so that the rotated header text is fully visible. You can do this by using the following code:
+
+```typescript
+
+    function setHeaderHeight(args) {
+        var textWidth = document.querySelector(".orientationcss > div").scrollWidth; // obtain the width of the headerText content.
+        var headerCell = document.querySelectorAll(".e-headercell");
+        for (var i = 0; i < headerCell.length; i++) {
+            headerCell.item(i).style.height = textWidth + 'px'; // assign the obtained textWidth as the height of the headerCell.
+        }
+    }
+
+```
+
+The following example demonstrates how to change the orientation of the **Freight** column header text to 90 degrees:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-orientation/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext-orientation/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Change the orientation of header text](../../images/columns/Column-headertext-orientation.png)
+
+
+## Custom tooltip for header
+
+Custom tooltips for headers provide additional information when hovering over a column header in the Syncfusion 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.
+
+Here's an example of how to use the `BeforeRender` event to add a custom tooltip to a header cell:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-tooltip/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext-tooltip/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Custom tooltip for header](../../images/columns/Column-headertext-tooltip.png)
+
+> * The [headerCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_HeaderCellInfo) event can also be used to customize the header tooltip. This event is triggered for each header cell after it is rendered.
+
+## Customize header text styles 
+
+Customizing the grid header styles allows you to modify the appearance of the column header in the Grid control to meet your design requirements. You can customize the font, background color, and other styles of the header cells. To customize the header styles in the grid, you can use CSS, properties, methods, or event support provided by the Syncfusion ASP.NET Core Grid component.
+
+### Using CSS
+
+You can apply styles to the header cells using CSS selectors. The Grid provides a class name for each header cell element, which you can use to apply styles to that specific header cell. The **.e-headercell** class can be used to change the background color and text color of the column header.
+
+```CSS
+  .e-grid .e-headercell {
+    background-color: #a2d6f4;
+    color:rgb(3, 2, 2);
+  }
+```
+Here's an example that demonstrates how to customize the appearance of a column header in the Grid using **className**.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-using-css/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext-using-css/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Display HTML content](../../images/columns/Column-headertext-using-css.png)
+
+### Using property 
+
+You can customize the appearance of the column headers in Grid using the `customAttributes` property. The `customAttributes` property takes an object with the name-value pair to customize the CSS properties for grid header cells. You can also set multiple CSS properties to the custom class using the `customAttributes` property.
+
+To customize the header of a column, you can follow the steps below:
+
+Step 1: Define a CSS class that specifies the styles you want to apply to the header cell of the column. For example, to change the background color and text color of the header cell, define a CSS class like this:
+
+  ```CSS
+    .e-grid .e-headercell.customcss {
+       background-color: rgb(43, 205, 226);
+       color: black;
+    }
+
+  ```
+
+Step 2: Set the **customAttributes** property of the desired column to an object that contains the CSS class **customcss**. This CSS class will be applied to the header cell of the specified column in the Grid.
+
+  ```ts
+    <e-grid-column field="Freight" headerText="Freight" customAttributes="@(new { @class="customcss" })" format='C' textAlign="Right" width="120"></e-grid-column>
+  ```
+
+The following example demonstrates how to customize the appearance of the **OrderID** and **OrderDate** columns using custom attributes.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-using-property/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext-using-property/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Using property](../../images/columns/Column-headertext-using-property.png)
+
+### Using method 
+
+The Syncfusion Grid provides methods to customize the appearance of the grid columns header.
+
+1. `getColumnHeaderByIndex`: The method is used to customize the appearance of a specific column header in the grid by specifying the index of the column for which you want to customize the header.
+
+2. `getColumnHeaderByField`: This method is used to retrieve the header element of a specific column by its field name. You can use the retrieved element to customize the appearance of the header element.
+3. `getColumnHeaderByUid`: This method is used to retrieve the header element of a specific column by its unique ID. You can use the retrieved element to customize the appearance of the header element.
+
+ 4. `getColumnIndexByField`:This method is used to retrieve the index of a specific column by its field name. You can use the retrieved index to access the header element and customize its appearance.
+
+ 5. `getColumnIndexByUid`: This method is used to retrieve the index of a specific column by its unique ID. You can use the retrieved index to access the header element and customize its appearance.
+
+Here's an example of how to use these methods to change the style of a specific column header:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-using-method/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext-using-method/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Using method](../../images/columns/Column-headertext-using-method.png)
+
+>* The UID is automatically generated by the Grid component and may change whenever the grid is refreshed or updated.
+
+### Using event
+
+To customize the appearance of the grid header, you can handle the [headerCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_HeaderCellInfo) event of the grid. This event is triggered when each header cell is rendered in the grid, and provides an object that contains information about the header cell. You can use this object to modify the styles of the header column.
+
+The following example demonstrates how to add a `headerCellInfo` event handler to the grid. In the event handler, checked whether the current header column is **Order Date** field and then applied the appropriate CSS class to the cell based on its value.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-using-event/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext-using-event/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Using event](../../images/columns/Column-headertext-using-event.png)
+
+## How to refresh header 
+
+The refresh header feature in the Syncfusion ASP.NET Core Grid allows you to update the header section of the grid whenever changes are made to the grid's columns. This feature is useful when you want to reflect changes in the header immediately, such as modifying the column header text, width, or alignment.
+
+To use the refresh header feature, you can call the `refreshHeader` method of the Grid component. This method updates the grid header with the latest changes made to the columns.
+
+The following example demonstrates how to use the `refreshHeader` method to update the grid header:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/headertext-refresh/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Headertext.cs" %}
+{% include code-snippet/grid/columns/headertext-refresh/headertext.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![How to refresh header](../../images/columns/Column-headertext-refresh-header.png)
+
+>* The `refreshHeader` method updates only the grid header and not the entire grid.
+>* If you want to refresh the entire grid, you can use the `refresh` method instead.
+
+## How to get header element 
+
+To get the header element in a Syncfusion Grid, you can use one of the following methods:
+
+1. `getHeaderContent`: This method returns the header div element of the Grid. You can use this method to access the entire header content of the Grid.
+
+    ```ts
+    var grid = document.getElementById("Grid").ej2_instances[0]
+    const headerTableElement=grid.getHeaderContent();    
+    ```
+2. `getHeaderTable`: This method returns the header table element of the Grid. You can use this method to access only the header table of the Grid.
+
+   ```ts
+    var grid = document.getElementById("Grid").ej2_instances[0]
+    const headerTableElement = grid.getHeaderTable();
+   ```
+
+3. `getColumnHeaderByUid`: This method returns the column header element by its unique identifier.
+
+   ```ts
+    var grid = document.getElementById("Grid").ej2_instances[0]
+    const columnHeaderElement = grid.getColumnHeaderByUid("e-grid2");
+   ```
+
+4. `getColumnHeaderByIndex`: This method returns the column header element by its index.
+
+   ```ts
+    var grid = document.getElementById("Grid").ej2_instances[0]
+    const columnHeaderElement = grid.getColumnHeaderByIndex(0);
+   ```
+5. `getColumnHeaderByField`: This method returns the column header element by its field name.
+
+   ```ts
+    var grid = document.getElementById("Grid").ej2_instances[0]
+    const columnHeaderElement = grid.getColumnHeaderByField("OrderID"); 
+   ```
+
+>* The UID is automatically generated by the Grid component and may change whenever the grid is refreshed or updated.
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-menu.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-menu.md
index 6a4ca1aefc..c8ef879a81 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-menu.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-menu.md
@@ -8,24 +8,24 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Column Menu
+# Column menu in ASP.NET Core Grid component
 
-The column menu has options to integrate features like sorting, grouping, filtering, column chooser, and autofit. It will show a menu with the integrated feature when users click on multiple icon of the column. To enable column menu, you need to define the [`showColumnMenu`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_ShowColumnMenu) property as true.
+The column menu in the Syncfusion ASP.NET Core Grid component provides options to enable features such as sorting, grouping, filtering, column chooser, and autofit. When users click on the column header's menu icon, a menu will be displayed with these integrated features. To enable the column menu, you need to set the [showColumnMenu](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ShowColumnMenu) property to **true** in the Grid configuration.
 
-The default items are displayed in following table.
+To use the column menu, inject the **ColumnMenu** in the **provide** section.
 
-| Item | Description |
-|-----|-----|
-| `SortAscending` | Sort the current column in ascending order. |
-| `SortDescending` | Sort the current column in descending order. |
-| `Group` | Group the current column. |
-| `Ungroup` | Ungroup the current column. |
-| `AutoFit` | Auto fit the current column. |
-| `AutoFitAll` | Auto fit all columns. |
-| `ColumnChooser` | Choose the column visibility. |
-| `Filter` | Show the filter option as given in `FilterSettings.Type` |
+The default column menu items are displayed in following table.
 
-{% if page.publishingplatform == "aspnet-core" %}
+| Item               | Description                                                                                                                              |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| **SortAscending**  | Sort the current column in ascending order.                                                                                              |
+| **SortDescending** | Sort the current column in descending order.                                                                                             |
+| **Group**          | Group the current column.                                                                                                                |
+| **Ungroup**        | Ungroup the current column.                                                                                                              |
+| **AutoFit**        | Autofit the current column.                                                                                                              |
+| **AutoFitAll**     | Autofit all columns.                                                                                                                     |
+| **ColumnChooser**  | Choose the column visibility.                                                                                                            |
+| **Filter**         | Show the filter option as given in [filterSettings.type](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridFilterSettings.html#Syncfusion_EJ2_Grids_GridFilterSettings_Type) |
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -36,151 +36,108 @@ The default items are displayed in following table.
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/columnmenu/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Columnmenu.cs" %}
-{% include code-snippet/grid/columns/columnmenu/columnmenu.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
+![Column menu](../../images/column-menu/Column-menu.png)
 
+> You can disable column menu for a particular column by defining the `columns.showColumnMenu` as **false**.
 
+> You can customize the default items by defining the [columnMenuItems](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuItems) with required items.
 
-N> You can disable column menu for a particular column by defining the [`showColumnMenu`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_ShowColumnMenu) property of **e-grid-column** as false.
-<br/> You can customize the default items by defining the [`columnMenuItems`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuItems) with required items.
+## Add custom column menu item
 
-## Column menu events
-
-During the resizing action, the grid component triggers the below two events.
+The custom column menu item feature allows you to add additional menu items to the column menu in the Syncfusion Grid. These custom menu items can be defined using the [columnMenuItems](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuItems) property, which accepts a collection of `columnMenuItemModel` objects. You can define the actions for these custom items in the [columnMenuClick](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuClick) event.
 
-1. The [`columnMenuOpen`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuOpen) event triggers before the column menu opens.
-2. The [`columnMenuClick`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuClick) event triggers when the user clicks the column menu of the grid.
-
-{% if page.publishingplatform == "aspnet-core" %}
+Consider the following example, which demonstrates how to add a custom column menu item to clear the sorting of the Grid:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/columnmenuevents/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Columnmenuevents.cs" %}
-{% include code-snippet/grid/columns/columnmenuevents/columnmenuevents.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/columnmenuevents/razor %}
+{% include code-snippet/grid/columns/customcolumnmenu/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Columnmenuevents.cs" %}
-{% include code-snippet/grid/columns/columnmenuevents/columnmenuevents.cs %}
+{% highlight c# tabtitle="Columnmenu.cs" %}
+{% include code-snippet/grid/columns/customcolumnmenu/columnmenu.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
-
-
 
-## Custom column menu item
+![custom menu](../../images/column-menu/Column-menu-custom.gif)
 
-Custom column menu items can be added by defining the [`columnMenuItems`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuItems) as collection of the **columnMenuItemModel**.
+## Customize menu items for particular columns
 
-Actions for this customized items can be defined in the [`columnMenuClick`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuClick) event.
+Sometimes, you have a scenario that to hide an item from column menu for particular columns. In that case, you need to define the `columnMenuOpenEventArgs.hide` as **true** in the [columnMenuOpen](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuOpen) event.
 
-{% if page.publishingplatform == "aspnet-core" %}
+The following sample, **Filter** item was hidden in column menu when opens for the **OrderID** column.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/customcolumnmenu/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Customcolumnmenu.cs" %}
-{% include code-snippet/grid/columns/customcolumnmenu/customcolumnmenu.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/customcolumnmenu/razor %}
+{% include code-snippet/grid/columns/customizecolumnmenu/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Customcolumnmenu.cs" %}
-{% include code-snippet/grid/columns/customcolumnmenu/customcolumnmenu.cs %}
+{% highlight c# tabtitle="Columnmenu.cs" %}
+{% include code-snippet/grid/columns/customizecolumnmenu/columnmenu.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
 
+![Customize menu items for particular columns](../../images/column-menu/Column-menu-particular.png)
 
+## Render nested column menu
 
-## Customize menu items for particular columns
-
-Sometimes, you have a scenario that to hide an item from column menu for particular columns. In that case, you need to define the [`ColumnMenuOpenEventArgs.Hide`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuOpen) as true in the [`columnMenuOpen`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuOpen) event.
+The nested column menu feature provides an extended menu option in the grid column headers, allows you to access additional actions and options related to the columns.
 
-The following sample, **Filter** item was hidden in column menu when opens for the **OrderID** column.
+To enable the nested column menu feature, you need to define the [columnMenuItems](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuItems) property in your component. The `columnMenuItems` property is an array that contains the items for the column menu. Each item can be a string representing a built-in menu item or an object defining a custom menu item.
 
-{% if page.publishingplatform == "aspnet-core" %}
+Here is an example of how to configure the `columnMenuItems` property to include a nested menu:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/customizecolumnmenu/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Customizecolumnmenu.cs" %}
-{% include code-snippet/grid/columns/customizecolumnmenu/customizecolumnmenu.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/customizecolumnmenu/razor %}
+{% include code-snippet/grid/columns/columnmenu-stacked/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Customizecolumnmenu.cs" %}
-{% include code-snippet/grid/columns/customizecolumnmenu/customizecolumnmenu.cs %}
+{% highlight c# tabtitle="Columnmenu.cs" %}
+{% include code-snippet/grid/columns/columnmenu-stacked/columnmenu.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
-
 
+![Render nested column menu](../../images/column-menu/Column-menu-stacked.png)
 
 ## Customize the icon of column menu
 
-You can customize the column menu icon by overriding the default grid class **.e-icons.e-columnmenu** with a custom property **content** as mentioned below,
+To customize the column menu icon, you need to override the default grid class **.e-icons.e-columnmenu** with a custom CSS property called **content**. By specifying a Unicode character or an icon font's CSS class, you can change the icon displayed in the column menu.
 
-```css
+To customize the column menu icon, follow the below step:
 
-.e-grid .e-columnheader .e-icons.e-columnmenu::before {
-      content: "\e969";
-}
+1.Add the necessary CSS code to override the default grid class:
 
+```css
+  .e-grid .e-columnheader .e-icons.e-columnmenu::before {
+              content: "\e799";
+      }
 ```
 
-In the below sample, grid is rendered with a customized column menu icon.
+Here is an example that demonstrates how to customize the column menu icon in the Syncfusion Grid:
 
-{% if page.publishingplatform == "aspnet-core" %}
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/custom-column-menu-icon/tagHelper %}
+{% include code-snippet/grid/columns/custom-column-menu-icon/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Column-icon.cs" %}
-{% include code-snippet/grid/how-to/custom-column-menu-icon/column-icon.cs %}
+{% highlight c# tabtitle="Columnmenu.cs" %}
+{% include code-snippet/grid/columns/custom-column-menu-icon/columnmenu.cs %}
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+![Customize the icon of column menu](../../images/column-menu/column-menu-icon.png)
+
+## Column menu events
+
+The column menu in Syncfusion ASP.NET Core Grid provides a set of events that allow customization of behavior and performing actions when the column menu is opened or clicked. The below events are helpful for adding additional functionality or implementing specific actions based on user interactions with the column menu.
+
+1.The [columnMenuOpen](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuOpen) event triggers before the column menu opens.
+
+2.The [columnMenuClick](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnMenuClick) event triggers when the user clicks the column menu of the grid.
 
 {% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/custom-column-menu-icon/razor %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/columnmenuevents/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Column-icon.cs" %}
-{% include code-snippet/grid/how-to/custom-column-menu-icon/column-icon.cs %}
+{% highlight c# tabtitle="Columnmenu.cs" %}
+{% include code-snippet/grid/columns/columnmenuevents/columnmenu.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
 
+![Column menu events](../../images/column-menu/column-menu-events.gif)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-reorder.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-reorder.md
index 85b2621cd5..ed5842c2ae 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-reorder.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-reorder.md
@@ -8,11 +8,13 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Reorder
+# Column reorder in ASP.NET Core Grid component
 
-Reordering can be done by drag and drop of a particular column header from one index to another index within the grid. To enable reordering, set the [`allowReordering`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowReordering) property to true.
+The Syncfusion ASP.NET Core Grid component allows to reorder columns by drag and drop of a particular column header from one index to another index within the grid.
 
-{% if page.publishingplatform == "aspnet-core" %}
+To reorder the columns, set the [allowReordering](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowReordering) property to **true** in the grid.
+
+Here's an example for column reordering in your Grid component:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -23,110 +25,115 @@ Reordering can be done by drag and drop of a particular column header from one i
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+![Column reorder](../../images/column-reorder/column-reorder.gif)
+
+>* You can customize the appearance of the column headers during drag and drop by using the [columnDrag](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnDrag) and [columnDrop](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnDrop) events.
+>* When columns are reordered, the position of the corresponding column data will also be changed. As a result, you should ensure that any additional code or logic that relies on the order of the column data is updated accordingly.
+
+## Prevent reordering for particular column
+
+By default, all columns in the Syncfusion ASP.NET Core Grid can be reordered by dragging and dropping their headers to another location within the grid. However, there may be certain columns that you do not want to be reordered. In such cases, you can set the `allowReordering` property of that particular column to **false**. Here is an example that demonstrates how to prevent reordering for a specific column:
+
+In this example, the **ShipName** column is prevented from being reordered by setting the `allowReordering` property to **false**.
 
 {% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/reorder/razor %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/reorder-prevent/tagHelper %}
 {% endhighlight %}
 {% highlight c# tabtitle="Reorder.cs" %}
-{% include code-snippet/grid/columns/reorder/reorder.cs %}
+{% include code-snippet/grid/columns/reorder-prevent/reorder.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
 
+![Prevent reordering for particular column](../../images/column-reorder/column-reorder-prevent.gif)
+
+## Reorder columns externally
+
+The Syncfusion Grid ASP.NET Core allows you to reorder columns externally, which means that using methods you can programmatically move columns around within the grid, based on their index or target index, or by using their field name.
 
+> When reordering columns externally, you must set the [allowReordering](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowReordering) property of the grid to **true**.
 
-N> You can disable reordering a particular column by setting the [`allowReordering`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_AllowReordering) property of **e-grid-column** as false.
+### Reorder column based on index
 
-## Reorder single column
+You can use the `reorderColumnByIndex` method to reorder columns based on their current index. This method takes two arguments:
 
-Grid have option to reorder Columns either by Interaction or by using the **reorderColumns** method. In the below sample, **Name** column is reordered to last column position by using the method.
+* **fromIndex** : Current index of the column to be reordered
+* **toIndex** : New index of the column after the reordering
 
-{% if page.publishingplatform == "aspnet-core" %}
+Here is an example of how to use the `reorderColumnByIndex` method:
+
+In this example, we are moving the column at index **1** to index **3**.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/grid/columns/reordercols/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Reordercols.cs" %}
-{% include code-snippet/grid/columns/reordercols/reordercols.cs %}
+{% highlight c# tabtitle="Reorder.cs" %}
+{% include code-snippet/grid/columns/reordercols/reorder.cs %}
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+![Reorder column based on index](../../images/column-reorder/column-reorder-index.gif)
+
+### Reorder column based on target index
+
+You can also use the `reorderColumnByTargetIndex` method to reorder single column or multiple columns based on the target index. This method takes two arguments:
+
+* **fieldName**: Field name of the column to be reordered
+* **toIndex**: New index of the column after the reordering
+
+Here is an example of how to use the `reorderColumnByTargetIndex` method to reorder single column and multiple columns based on target index:
 
 {% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/reordercols/razor %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/reordertargetcolumns/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Reordercols.cs" %}
-{% include code-snippet/grid/columns/reordercols/reordercols.cs %}
+{% highlight c# tabtitle="Reorder.cs" %}
+{% include code-snippet/grid/columns/reordertargetcolumns/reorder.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
 
+![Reorder column based on target index](../../images/column-reorder/column-reorder-target.gif)
 
+### Reorder column based on field names
 
-## Reorder multiple columns
+The `reorderColumns` method of the Grid allows you to reorder single column or list of columns based on their field names. This method takes two arguments: 
 
-You can reorder a single column at a time by Interaction. Sometimes we need to reorder multiple columns at the same time, It can be achieved through programmatically by using **reorderColumns** method.
+* **fromFName**: The field name of the column you want to move.
+* **toFName**: The field name of the column you want to move the column to.
 
-In the below sample, **Ship City** and **Ship Region** column is reordered to last column position.
-
-{% if page.publishingplatform == "aspnet-core" %}
+Here is an example of how to use the `reorderColumns` method to reorder single column and multiple columns based on field names:
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/reordercolumns/tagHelper %}
+{% include code-snippet/grid/columns/reorder-field/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Reordercols.cs" %}
-{% include code-snippet/grid/columns/reordercolumns/reordercols.cs %}
+{% highlight c# tabtitle="Reorder.cs" %}
+{% include code-snippet/grid/columns/reorder-field/reorder.cs %}
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/reordercolumns/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Reordercols.cs" %}
-{% include code-snippet/grid/columns/reordercolumns/reordercols.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
+![Reorder column based on field names](../../images/column-reorder/column-reorder-field.gif)
 
+## Reorder events
 
+When reordering columns in the Syncfusion ASP.NET Core Grid component, you may want to take some specific action in response to the drag and drop events. To handle these events, you can define event handlers for the following events:
 
-## Reorder events
+1.The [columnDragStart](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnDragStart) event triggers when column header element drag (move) starts.
 
-During the reorder action, the grid component triggers the below three events.
+2.The [columnDrag](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnDrag) event triggers when column header element is dragged (moved) continuously.
 
-1. The [`columnDragStart`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnDragStart) event triggers when column header element drag (move) starts.
-2. The [`columnDrag`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnDrag) event triggers when column header element is dragged (moved) continuously.
-3. The [`columnDrop`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnDrop) event triggers when a column header element is dropped on the target column.
+3.The [columnDrop](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ColumnDrop) event triggers when a column header element is dropped on the target column.
 
-{% if page.publishingplatform == "aspnet-core" %}
+In the following example, we have implemented the `columnDragStart`, `columnDrag`, and `columnDrop` events in the Syncfusion Grid component.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/grid/columns/reorderevents/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Reorderevents.cs" %}
-{% include code-snippet/grid/columns/reorderevents/reorderevents.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/reorderevents/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Reorderevents.cs" %}
-{% include code-snippet/grid/columns/reorderevents/reorderevents.cs %}
+{% highlight c# tabtitle="Reorder.cs" %}
+{% include code-snippet/grid/columns/reorderevents/reorder.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
 
+![Reorder events](../../images/column-reorder/column-reorder-events.gif)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-resizing.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-resizing.md
index 42d38b645d..d48b9fa1cc 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-resizing.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-resizing.md
@@ -8,11 +8,11 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Column Resizing in ASP.Net Core Grid component
+# Column resizing in ##Platform_Name## Grid component
 
-Column width can be resized by clicking and dragging the right edge of the column header. While dragging, the width of the respective column will be resized immediately. Each column can be auto resized by double-clicking the right edge of the column header to fit the width of that column based on the widest cell content. To enable column resize, set the [`allowResizing`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowResizing) property to true.
+Grid component provides an intuitive user interface for resizing columns to fit their content. This feature allows users to easily adjust the width of the columns to improve readability and aesthetics of the data presented. To enable column resizing, set the [allowResizing](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowResizing) property of the grid to **true**.
 
-{% if page.publishingplatform == "aspnet-core" %}
+Once column resizing is enabled, columns width can be resized by clicking and dragging at the right edge of the column header. While dragging the column, the width of the respective column will be resized immediately.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -23,138 +23,151 @@ Column width can be resized by clicking and dragging the right edge of the colum
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+![Column resizing](../../images/column-resize/column-resize.gif)
+
+>* You can disable Resizing for a particular column, by specifying `columns.allowResizing` to **false**.
+>* In RTL mode, you can click and drag the left edge of header cell to resize the column.
+>* The `width` property of the column can be set initially to define the default width of the column. However, when column resizing is enabled, you can override the default width by manually resizing the columns.
+
+## Restrict the resizing based on minimum and maximum width
+
+The Grid component allows you to restrict the column width resizing between a minimum and maximum width. This can be useful when you want to ensure that your grid's columns stay within a certain range of sizes.
+
+To enable this feature, you can define the `columns.minWidth` and `columns.maxWidth` properties of the columns directive for the respective column.
+
+In the below code, **OrderID**, **Ship Name** and **Ship Country** columns are defined with minimum and maximum width. The **OrderID** column is set to have a minimum width of 100 pixels and a maximum width of 250 pixels. Similarly, the **CustomerID** column is set to have a minimum width of 150 pixels and a maximum width of 300 pixels. The **ShipCountry** column is set to have a minimum width of 120 pixels and a maximum width of 260 pixels.
 
 {% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/resize/razor %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/resize-max/tagHelper %}
 {% endhighlight %}
 {% highlight c# tabtitle="Resize.cs" %}
-{% include code-snippet/grid/columns/resize/resize.cs %}
+{% include code-snippet/grid/columns/resize-max/resize.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
-
-
 
-N> You can disable resizing for a particular column by setting the [`allowResizing`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_AllowResizing) property of **e-grid-column** tag helper to false.
-<br/> In RTL mode, you can click and drag the left edge of the header cell to resize the column.
+![Restrict the resizing based on minimum and maximum width](../../images/column-resize/Colum-resize-max.gif)
 
-## Column resizing using method
+>* The `columns.minWidth` and `columns.maxWidth` properties will be considered only when the user resizes the column. When resizing the window, these properties will not be considered. This is because columns cannot be re-rendered when resizing the window.
+>* When setting the `minWidth` and `maxWidth` properties, ensure that the values are appropriate for your data and layout requirements.
+>* The specified `minWidth` and `maxWidth` values take precedence over any user-initiated resizing attempts that fall outside the defined range.
 
-To resize a column, set width to that particular column and then refresh the grid header by using the **refreshHeader** method. Refer the below code,
+## Prevent resizing for particular column
 
-```javascript
+The Grid component provides the ability to prevent resizing for a particular column. This can be useful if you want to maintain a consistent column width or prevent users from changing the width of a column.
 
-var grid = document.getElementById('Grid').ej2_instances[0]; //Grid Instance
+You can disable resizing for a particular column by setting the `allowResizing` property of the column to **false**. The following example demonstrates, how to disabled resize for **Customer ID** column.
 
-var columns = grid.columns;
-
-columns[0].width = 150;
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/resize-prevent/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Resize.cs" %}
+{% include code-snippet/grid/columns/resize-prevent/resize.cs %}
+{% endhighlight %}
+{% endtabs %}
 
-grid.refreshHeader();
+> You can also prevent resizing by setting `args.cancel` to **true** in the [resizeStart](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ResizeStart) event.
 
-```
+## Resizing modes
 
-## Min and max width
+The Syncfusion Grid component provides a `ResizeSettingsModel` interface for configuring the resizing behavior of grid columns. The interface includes a property named `mode` which is of the type `ResizeMode`. The `ResizeMode` is an enum that determines the available resizing modes for the grid columns. There are two resizing modes available for grid columns in Grid:
 
-Column resize can be restricted between minimum and maximum width by defining the [`minWidth`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_MinWidth) and [`maxWidth`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_MaxWidth) properties in  **e-grid-column** tag helper.
+1. `Normal Mode`: This mode does not adjust the columns to fit the remaining space. When the sum of column width is less than the grid's width, empty space will be present to the right of the last column. When the sum of column width is greater than the grid's width, columns will overflow, and a horizontal scrollbar will appear.
 
-In the following sample, minimum and maximum width are defined for **OrderID**, **Ship Name**, and **Ship Country** columns.
+2. `Auto Mode`: This mode automatically resizes the columns to fill the remaining space. When the sum of column width is less than the grid's width, the columns will be automatically expanded to fill the empty space. Conversely, when the sum of column width is greater than the grid's width, the columns will be automatically contracted to fit within the available space.
 
-{% if page.publishingplatform == "aspnet-core" %}
+The following example demonstrates how to set the [resizeSettings.mode](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridResizeSettings.html#Syncfusion_EJ2_Grids_GridResizeSettings_Mode) property to **Normal** and **Auto** on changing the dropdown value using the [change](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the DropDownList component.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/min/tagHelper %}
+{% include code-snippet/grid/columns/resize-mode/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Min.cs" %}
-{% include code-snippet/grid/columns/min/min.cs %}
+{% highlight c# tabtitle="Resize.cs" %}
+{% include code-snippet/grid/columns/resize-mode/resize.cs %}
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+![Reorder events](../../images/column-resize/Colum-resize-mode.gif)
+
+## Resize stacked header column
+
+Grid component allows to resize stacked columns by clicking and dragging the right edge of the stacked column header. During the resizing action, the width of the child columns is resized at the same time. You can disable resize for any particular stacked column by setting [allowResizing](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowResizing) as **false** to its columns.
+
+In this below code, we have disabled resize for **Ship City** column.
 
 {% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/min/razor %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/resize-stacked/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Min.cs" %}
-{% include code-snippet/grid/columns/min/min.cs %}
+{% highlight c# tabtitle="Resize.cs" %}
+{% include code-snippet/grid/columns/resize-stacked/resize.cs %}
 {% endhighlight %}
 {% endtabs %}
-{% endif %}
 
+![Reorder events](../../images/column-resize/Colum-resize-stacked.gif)
 
-N> The `maxWidth` and `minWidth` properties will be considered only when the user resizes the column. When resizing the window, these properties will not be considered. This is because columns cannot be re-rendered when resizing the window.
+> When the [autoFit](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AutoFit) property is set to **true**, the Grid will automatically adjust its column width based on the content inside them. In `normal` resize mode, if the `autoFit` property is set to **true**, the Grid will maintain any empty space that is left over after resizing the columns. However, in `auto` resize mode, the Grid will ignore any empty space.
 
-## Resize stacked column
+## Touch interaction
 
-Stacked columns can be resized by clicking and dragging the right edge of the stacked column header. While dragging, the width of the respective child columns will be resized at the same time. You can disable resize for any particular stacked column by setting [`allowResizing`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowResizing) property **e-grid-column** as **false** to its columns.
+Grid component provides support for touch interactions to enable users to interact with the grid using their mobile devices. Users can resize columns in the grid by tapping and dragging the floating handler, and can also use the Column menu to autofit columns.
 
-In this example, we have disabled resize for **Ship City** column.
+**Resizing Columns on Touch Devices**
 
-{% if page.publishingplatform == "aspnet-core" %}
+To resize columns on a touch device:
 
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/stacked/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Stacked.cs" %}
-{% include code-snippet/grid/columns/stacked/stacked.cs %}
-{% endhighlight %}
-{% endtabs %}
+1.Tap on the right edge of the header cell of the column that you want to resize.
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+2.A floating handler will appear over the right border of the column.
 
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/stacked/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Stacked.cs" %}
-{% include code-snippet/grid/columns/stacked/stacked.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
+3.Tap and drag the floating handler to resize the column to the desired width.
 
+The following screenshot represents the column resizing on the touch device.
 
+![Touch Interaction](../../images/column-resizing.jpg)
 
-## Touch interaction
+## Resizing column externally
 
-When the right edge of the header cell is tapped, a floating handler will be visible over the right border of the column. To resize the column, tap and drag the floating handler as needed. You can autoFit a column by using the Column menu of the grid.
+Grid provides the ability to resize columns using an external button click. This can be achieved by changing the `width` property of the column and refreshing the grid using the `refreshColumns` method in the external button click function.
+
+The following example demonstrates how to resize the columns in a grid. This is done by using the [change](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the DropDownList component by change the `width` property of the selected column. This is accomplished using the  `getColumnByField` on external button click. Then, the `refreshColumns` method is called on the grid component to update the displayed columns based on interaction.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/resize-external/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Resize.cs" %}
+{% include code-snippet/grid/columns/resize-external/resize.cs %}
+{% endhighlight %}
+{% endtabs %}
 
-The following screenshot represents the column resizing in touch device.
+![Reorder events](../../images/column-resize/Colum-resize-external.png)
 
-![Touch interaction](../../images/column-resizing.jpg)
+>  The `refreshColumns` method is used to refresh the grid after the column widths are updated. Column resizing externally is useful when you want to provide a custom interface to the user for resizing columns.
 
 ## Resizing events
 
 During the resizing action, the grid component triggers the below three events.
 
-1. The [`resizeStart`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ResizeStart) event triggers when column resize starts.
-2. The [`resizing`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Resizing) event triggers when column header element is dragged (moved) continuously.
-3. The [`resizeStop`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ResizeStop) event triggers when column resize ends.
+1.The [resizeStart](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ResizeStart) event triggers when column resize starts. This event can be used to perform actions when the user begins to resize a column. 
+
+2.The [resizing](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Resizing) event triggers when column header element is dragged (moved) continuously. This event is useful when you want to perform certain actions during the column resize process.
 
-{% if page.publishingplatform == "aspnet-core" %}
+3.The [resizeStop](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ResizeStop) event triggers when column resize ends. This event can be used to perform actions after the column is resized.
+
+The following is an example of using the resizing events, the `resizeStart` event is used to cancel the resizing of the **OrderID** column. The `resizeStop` event is used to apply custom CSS attributes to the resized column.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/grid/columns/resizeevents/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Resizeevents.cs" %}
-{% include code-snippet/grid/columns/resizeevents/resizeevents.cs %}
+{% highlight c# tabtitle="Resize.cs" %}
+{% include code-snippet/grid/columns/resizeevents/resize.cs %}
 {% endhighlight %}
 {% endtabs %}
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
+![Reorder events](../../images/column-resize/Colum-resize-event.gif)
 
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/resizeevents/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Resizeevents.cs" %}
-{% include code-snippet/grid/columns/resizeevents/resizeevents.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
 
+>The ResizeArgs object passed to the events contains information such as the current column width, new column width, column index, and the original event. The [resizing](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Resizing) event is triggered multiple times during a single resize operation, so be careful when performing heavy operations in this event.
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
new file mode 100644
index 0000000000..8de586e73f
--- /dev/null
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/frozen-column.md
@@ -0,0 +1,144 @@
+---
+layout: post
+title: Column pinning (Frozen) in Syncfusion ##Platform_Name## Grid Component
+description: Learn here all about Column pinning (Frozen) in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Column pinning (Frozen)
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Column Pinning (Frozen) in ASP.NET Core Grid component
+
+In the Syncfusion ASP.NET Core Grid component, you have the capability to **freeze** columns, ensuring they remain visible as you scroll through extensive datasets. This functionality significantly improves user experience by keeping critical information constantly within view, even when navigating through large volumes of data. This means that important columns remain fixed in their positions, making it easier to access and reference key data points while working with the grid.
+
+In the following example, the [frozenColumns](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_FrozenColumns) property is set to **2**. This configuration freezes the left two columns of the grid, and they will remain fixed in their positions while the rest of the columns grid can be scrolled horizontally.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/frozen-columns/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Frozen.cs" %}
+{% include code-snippet/grid/columns/frozen-columns/frozen.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Column Pinning](../../images/column-chooser/frozon.png)
+
+> * Frozen columns should not be set outside the grid view port.
+> * Frozen Grid support column virtualization feature, which helps to improve the Grid performance while loading a large dataset.
+> * The frozen feature is supported only for the columns that are visible in the current view.
+> * You can use both `frozenColumns` property and [frozenRows](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_FrozenRows) property in the same application.
+
+## Freeze particular columns
+
+The Syncfusion ASP.NET Core Grid provides a valuable feature that enables you to freeze specific columns, significantly enhancing data visibility and improving your overall user experience. This functionality allows you to select particular columns and freeze them by positioning them at the leftmost side of the grid, ensuring they remain fixed in place while the remaining grid columns can still be scrolled horizontally. While the `frozenColumns` property freezes columns in the order they are initialized in the grid, you can also use the `isFrozen` property at the column level to freeze a specific column at any desired index on the left side, offering flexibility in managing which columns are frozen.
+
+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.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/frozen-particular/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Frozen.cs" %}
+{% include code-snippet/grid/columns/frozen-particular/frozen.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Freeze particular columns](../../images/column-chooser/frozon-particular.png)
+
+## Freeze direction
+
+In the Syncfusion ASP.NET Core Grid, the "freeze direction" feature serves to reposition frozen columns either to the left, right, or in a fixed position, while still allowing the remaining columns to be horizontally movable. This feature is designed to optimize user experience by ensuring that critical information remains visible even during horizontal scrolling. By default, when you set the `frozenColumns` property of the grid or the `isFrozen` property of individual columns, it results in freezing those columns on the left side of the grid. This helps in keeping important data readily accessible as you navigate through your dataset.
+
+To achieve this, you can utilize the `column.freeze` property. This property is used to specify the freeze direction for individual columns. The grid will adjust the column positions based on the `column.freeze` value.
+
+The types of the `column.freeze` directions:
+
+* **Left**: When you set the `column.freeze` property to **Left**, specific columns will be frozen on the left side of the grid. The remaining columns will be movable.
+
+* **Right**: When you set the `column.freeze` property to **Right**, certain columns will be frozen on the right side of the grid, while the rest of the columns remain movable.
+
+* **Fixed**: The Fixed direction locks a column at a fixed position within the grid. This ensures that the column is always visible during horizontal scroll.
+
+In the following example, the **ShipCountry** column is frozen on the left side, the **CustomerID** column is frozen on the right side and the **Freight** column is frozen on the fixed of the content table. Additionally, you can modify the `column.freeze` property to **Left**, **Right** and **Fixed** based on the selected column by utilizing the [change](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the `DropDownList` component.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/frozen-direction/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Frozen.cs" %}
+{% include code-snippet/grid/columns/frozen-direction/frozen.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Freeze direction](../../images/column-chooser/frozon-direction.png)
+
+> * Freeze Direction is not compatible with the `isFrozen` and [frozenColumns](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_FrozenColumns) properties.
+
+## Change default frozen line color
+
+You can customize the frozen line borders of frozen columns in the Syncfusion Grid component by applying custom CSS styles to the specific frozen column. This allows you to change the border color of the left frozen columns, right frozen columns, and fixed frozen columns to match your application's design and theme.
+
+To change default frozen line color, use the following class name and apply the border color based on your requirement.
+
+For left frozen columns: 
+
+```css
+.e-grid .e-leftfreeze.e-freezeleftborder {
+    border-right-color: rgb(198, 30, 204);
+}
+```
+For right frozen columns:
+
+```css
+.e-grid .e-rightfreeze.e-freezerightborder {
+    border-left-color: rgb(19, 228, 243);
+}
+```
+For fixed frozen columns, you need to specify both left and right border as mentioned below
+
+```css
+.e-grid .e-fixedfreeze.e-freezeleftborder{
+    border-left-color: rgb(9, 209, 9); 
+}
+
+.e-grid .e-fixedfreeze.e-freezerightborder{
+    border-right-color: rgb(10, 224, 10);
+}
+```
+The following example demonstrates how to change the default frozen line color using CSS.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/frozen-color/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Frozen.cs" %}
+{% include code-snippet/grid/columns/frozen-color/frozen.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Change default frozen line color](../../images/column-chooser/frozon-color.png)
+
+## Deprecated methods 
+
+Previous | Current | Explanation 
+ ---  | --- | --- 
+`getMovableRows()` gridInstance.getMovableRows()[0].querySelectorAll('.e-unfreeze') | `getRows()` gridInstance.getRows()[0].querySelectorAll('.e-unfreeze') | The previous architecture used separate tables for left, right, and movable contents, returning only movable rows when calling the method, whereas the current architecture combines them into one table, returning all rows and introduces the `e-unfreeze` class for selecting movable rows
+`getFrozenRightRows()` gridInstance.getFrozenRightRows()[0].querySelectorAll('.e-rightfreeze') | `getRows()` gridInstance.getRows()[0].querySelectorAll('.e-rightfreeze') | In the previous architecture, it returned only the table rows from the right freeze table, but in the current architecture, all rows of the entire table are returned, introducing the `e-rightfreeze` class for selecting right freeze rows. 
+`getMovableRowByIndex()` <br> `getFrozenRowByIndex()` <br> `getFrozenRightRowByIndex()` | `getRowByIndex()` gridInstance.getRowByIndex(1).querySelectorAll('.e-unfreeze') | In the previous architecture, separate methods were used to select rows from different table sections, while in the current architecture, the `getMovableRowByIndex()`, `getFrozenRightRowByIndex()`, and `getFrozenRowByIndex()` methods now return the same table row based on the given index. Additionally, class names for table cells (td's) have been separated into `e-leftfreeze`, `e-unfreeze`, and `e-rightfreeze`, making it easier to customize cells within a row.
+`getMovableCellFromIndex()` <br> `getFrozenRightCellFromIndex()` | `getCellFromIndex()` gridInstance.getCellFromIndex(1,1) | In the previous approach, the `getMovableCellFromIndex()` method was used to choose a specific cell within the movable table, and the `getFrozenRightCellFromIndex()` method was utilized to target a particular cell within the right freeze table. However, in the current architecture, you have the flexibility to select a specific cell in either the movable or right freeze table by using both the `getFrozenRightCellFromIndex()` and `getMovableCellFromIndex()` methods. This new method simplifies the process of selecting and retrieving specific cells within these tables, offering more versatility and convenience.
+`getMovableDataRows()` <br> `getFrozenRightDataRows()` <br> `getFrozenDataRows()` | `getDataRows()` gridInstance.getDataRows()[0].querySelectorAll('.e-unfreeze') | In the previous approach, there were separate methods (`getMovableDataRows()`, `getFrozenRightDataRows()`, and `getFrozenDataRows()`) for obtaining viewport data rows from the freeze, movable, and right tables individually. However, in the new approach, these methods have been enhanced to return the entire viewport data rows for all sections together, simplifying data retrieval. You can now extract specific cells within these rows using selectors such as `e-leftfreeze` for the **left freeze**, `e-unfreeze` for the **movable**, and `e-rightfreeze` for the **right freeze** tables, providing greater flexibility in working with the data.
+`getMovableColumnHeaderByIndex()` <br> `getFrozenRightColumnHeaderByIndex()` <br> `getFrozenLeftColumnHeaderByIndex()` | `getColumnHeaderByIndex()` gridInstance.getColumnHeaderByIndex(1) | In the previous architecture, the methods selected movable, right freeze, and left freeze headers separately. However, in the new approach, when using the `getMovableColumnHeaderByIndex()`, `getFrozenRightColumnHeaderByIndex()`, and `getFrozenLeftColumnHeaderByIndex()` methods, you will still obtain the same results as in the previous architecture.
+
+> When a validation message is displayed in the frozen part (Left, Right, Fixed) of the table, scrolling is prevented until the validation message is cleared.
+
+## Limitations
+
+While freezing columns in the Syncfusion ASP.NET Core Grid provides enhanced visibility and scrolling capabilities, there are certain limitations to consider. The following features are not supported when using frozen columns:
+
+* Detail Template
+* Hierarchy Grid
+* Autofill
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/headers.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/headers.md
deleted file mode 100644
index db7d58c763..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/headers.md
+++ /dev/null
@@ -1,185 +0,0 @@
----
-layout: post
-title: Headers in ##Platform_Name## Grid Component
-description: Learn here all about Headers in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Headers
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-# Headers
-
-## Header text
-
-By default, column header title is displayed from column [`field`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Field) value. To override the default header title, you have to define the **headerText** value in the [`headerText`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_HeaderText) property of **e-grid-column** tag helper.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/headertext/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Headertext.cs" %}
-{% include code-snippet/grid/columns/headertext/headertext.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/headertext/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Headertext.cs" %}
-{% include code-snippet/grid/columns/headertext/headertext.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
-
-N> * If both the [`field`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Field) and [`headerText`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_HeaderText) are not defined in the column, the column renders with “empty” header text.
-
-## Header template
-
-You can customize the header element by using the [`headerTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_HeaderTemplate) property of **e-grid-column** tag helper. In this demo, the custom element is rendered for both EmployeeID and BirthDate column headers.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/headertemplate/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Headertemplate.cs" %}
-{% include code-snippet/grid/columns/headertemplate/headertemplate.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/headertemplate/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Headertemplate.cs" %}
-{% include code-snippet/grid/columns/headertemplate/headertemplate.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
-## Change header text dynamically
-
-You can change the column [`headerText`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_HeaderText) dynamically through an external button.
-
-Follow the given steps to change the header text dynamically:
-
-**Step 1**:
-
-Get the column object corresponding to the field name by using the **getColumnByField** method.
-Then, change the header text value.
-
-```typescript
-var column = grid.getColumnByField("ShipCity"); // Get column object.
-column.headerText = 'Changed Text';
-
-```
-
-**Step 2**:
-
-To reflect the changes in the grid header, invoke the **refreshHeader** method.
-
-```typescript
-grid.refreshHeader();
-
-```
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/column-header-text/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Column-header-text.cs" %}
-{% include code-snippet/grid/how-to/column-header-text/column-header-text.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/column-header-text/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Column-header-text.cs" %}
-{% include code-snippet/grid/how-to/column-header-text/column-header-text.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
-
-## Change the orientation of header text
-
-You can change the orientation of the header text by using the [`customAttributes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_CustomAttributes) property.
-
-Ensure the following steps:
-
-**Step 1**:
-
-Create a CSS class with orientation style for the grid header cell.
-
-```css
-.orientationcss .e-headercelldiv {
-    transform: rotate(90deg);
-}
-
-```
-
-**Step 2**:
-
-Add the custom CSS class to a particular column by using the [`customAttributes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_CustomAttributes) property.
-
-```typescript
-    <e-grid-column field="ShipCity" headerText="Ship City" width="150" customAttributes="@(new { @class="orientationcss" })"></e-grid-column>
-
-```
-
-**Step 3**:
-
-Resize the header cell height by using the following code.
-
-```typescript
-function setHeaderHeight(args) {
-    var textWidth = document.querySelector(".orientationcss > div").scrollWidth;//Obtain the width of the headerText content.
-    var headerCell = document.querySelectorAll(".e-headercell");
-    for(var i = 0; i < headerCell.length; i++) {
-        headerCell.item(i).style.height = textWidth + 'px'; //Assign the obtained textWidth as the height of the headerCell.
-    }
-}
-
-```
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/orientation/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Orientation.cs" %}
-{% include code-snippet/grid/how-to/orientation/orientation.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/how-to/orientation/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Orientation.cs" %}
-{% include code-snippet/grid/how-to/orientation/orientation.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
diff --git a/ej2-asp-core-mvc/grid/images/column-chooser/Colum-chooser-contains.png b/ej2-asp-core-mvc/grid/images/column-chooser/Colum-chooser-contains.png
new file mode 100644
index 0000000000..ffec8cbd1f
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-chooser/Colum-chooser-contains.png differ
diff --git a/ej2-asp-core-mvc/grid/images/column-chooser/Colum-chooser-external.png b/ej2-asp-core-mvc/grid/images/column-chooser/Colum-chooser-external.png
new file mode 100644
index 0000000000..3684ef4474
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-chooser/Colum-chooser-external.png differ
diff --git a/ej2-asp-core-mvc/grid/images/column-chooser/Colum-chooser-hide.png b/ej2-asp-core-mvc/grid/images/column-chooser/Colum-chooser-hide.png
new file mode 100644
index 0000000000..15f9748537
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-chooser/Colum-chooser-hide.png differ
diff --git a/ej2-asp-core-mvc/grid/images/column-chooser/Colum-chooser-size.png b/ej2-asp-core-mvc/grid/images/column-chooser/Colum-chooser-size.png
new file mode 100644
index 0000000000..c059d5a5eb
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-chooser/Colum-chooser-size.png differ
diff --git a/ej2-asp-core-mvc/grid/images/column-chooser/Colum-chooser.png b/ej2-asp-core-mvc/grid/images/column-chooser/Colum-chooser.png
new file mode 100644
index 0000000000..7d3b6eb3fb
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-chooser/Colum-chooser.png differ
diff --git a/ej2-asp-core-mvc/grid/images/column-chooser/frozon-color.png b/ej2-asp-core-mvc/grid/images/column-chooser/frozon-color.png
new file mode 100644
index 0000000000..e4b1da3ab0
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-chooser/frozon-color.png differ
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
new file mode 100644
index 0000000000..868c6ad337
Binary files /dev/null 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
new file mode 100644
index 0000000000..77297fa5d9
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-chooser/frozon-particular.png differ
diff --git a/ej2-asp-core-mvc/grid/images/column-chooser/frozon.png b/ej2-asp-core-mvc/grid/images/column-chooser/frozon.png
new file mode 100644
index 0000000000..845126a26e
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-chooser/frozon.png differ
diff --git a/ej2-asp-core-mvc/grid/images/column-menu/Column-menu-custom.gif b/ej2-asp-core-mvc/grid/images/column-menu/Column-menu-custom.gif
new file mode 100644
index 0000000000..2f0f632d83
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-menu/Column-menu-custom.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/column-menu/Column-menu-particular.png b/ej2-asp-core-mvc/grid/images/column-menu/Column-menu-particular.png
new file mode 100644
index 0000000000..89df32f467
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-menu/Column-menu-particular.png differ
diff --git a/ej2-asp-core-mvc/grid/images/column-menu/Column-menu-stacked.png b/ej2-asp-core-mvc/grid/images/column-menu/Column-menu-stacked.png
new file mode 100644
index 0000000000..b03413ef8a
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-menu/Column-menu-stacked.png differ
diff --git a/ej2-asp-core-mvc/grid/images/column-menu/Column-menu.png b/ej2-asp-core-mvc/grid/images/column-menu/Column-menu.png
new file mode 100644
index 0000000000..25845f14b4
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-menu/Column-menu.png differ
diff --git a/ej2-asp-core-mvc/grid/images/column-menu/column-menu-events.gif b/ej2-asp-core-mvc/grid/images/column-menu/column-menu-events.gif
new file mode 100644
index 0000000000..bfa9d1b39b
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-menu/column-menu-events.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/column-menu/column-menu-icon.png b/ej2-asp-core-mvc/grid/images/column-menu/column-menu-icon.png
new file mode 100644
index 0000000000..0de16a9459
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-menu/column-menu-icon.png differ
diff --git a/ej2-asp-core-mvc/grid/images/column-reorder/column-reorder-events.gif b/ej2-asp-core-mvc/grid/images/column-reorder/column-reorder-events.gif
new file mode 100644
index 0000000000..2452e2258a
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-reorder/column-reorder-events.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/column-reorder/column-reorder-field.gif b/ej2-asp-core-mvc/grid/images/column-reorder/column-reorder-field.gif
new file mode 100644
index 0000000000..fa83e44603
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-reorder/column-reorder-field.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/column-reorder/column-reorder-index.gif b/ej2-asp-core-mvc/grid/images/column-reorder/column-reorder-index.gif
new file mode 100644
index 0000000000..d30cc93cc7
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-reorder/column-reorder-index.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/column-reorder/column-reorder-prevent.gif b/ej2-asp-core-mvc/grid/images/column-reorder/column-reorder-prevent.gif
new file mode 100644
index 0000000000..8d89215279
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-reorder/column-reorder-prevent.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/column-reorder/column-reorder-target.gif b/ej2-asp-core-mvc/grid/images/column-reorder/column-reorder-target.gif
new file mode 100644
index 0000000000..29fd429b3b
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-reorder/column-reorder-target.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/column-reorder/column-reorder.gif b/ej2-asp-core-mvc/grid/images/column-reorder/column-reorder.gif
new file mode 100644
index 0000000000..23c2b24747
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-reorder/column-reorder.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/column-reorder/column-reorders.gif b/ej2-asp-core-mvc/grid/images/column-reorder/column-reorders.gif
new file mode 100644
index 0000000000..bffafb8a1a
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-reorder/column-reorders.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/column-resize/Colum-resize-event.gif b/ej2-asp-core-mvc/grid/images/column-resize/Colum-resize-event.gif
new file mode 100644
index 0000000000..bdde9e03fd
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-resize/Colum-resize-event.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/column-resize/Colum-resize-external.png b/ej2-asp-core-mvc/grid/images/column-resize/Colum-resize-external.png
new file mode 100644
index 0000000000..426ca64c44
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-resize/Colum-resize-external.png differ
diff --git a/ej2-asp-core-mvc/grid/images/column-resize/Colum-resize-max.gif b/ej2-asp-core-mvc/grid/images/column-resize/Colum-resize-max.gif
new file mode 100644
index 0000000000..5c87e3bd23
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-resize/Colum-resize-max.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/column-resize/Colum-resize-mode.gif b/ej2-asp-core-mvc/grid/images/column-resize/Colum-resize-mode.gif
new file mode 100644
index 0000000000..8df1aaba85
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-resize/Colum-resize-mode.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/column-resize/Colum-resize-stacked.gif b/ej2-asp-core-mvc/grid/images/column-resize/Colum-resize-stacked.gif
new file mode 100644
index 0000000000..cc74f6c56c
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-resize/Colum-resize-stacked.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/column-resize/column-resize-prevent.gif b/ej2-asp-core-mvc/grid/images/column-resize/column-resize-prevent.gif
new file mode 100644
index 0000000000..d5acda7024
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-resize/column-resize-prevent.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/column-resize/column-resize.gif b/ej2-asp-core-mvc/grid/images/column-resize/column-resize.gif
new file mode 100644
index 0000000000..c16ce60008
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-resize/column-resize.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/column-resize/column-resizing.jpg b/ej2-asp-core-mvc/grid/images/column-resize/column-resizing.jpg
new file mode 100644
index 0000000000..dfc194dd9c
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-resize/column-resizing.jpg differ
diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change-alignment.gif b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change-alignment.gif
new file mode 100644
index 0000000000..e7c5666b98
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change-alignment.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change-all.gif b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change-all.gif
new file mode 100644
index 0000000000..607f8e23b1
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change-all.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change-height.gif b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change-height.gif
new file mode 100644
index 0000000000..050fd9cacc
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change-height.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change.png
new file mode 100644
index 0000000000..e064471c5d
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-change.png differ
diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-headerTemplate.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-headerTemplate.png
new file mode 100644
index 0000000000..019b52f744
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-headerTemplate.png differ
diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-orientation.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-orientation.png
new file mode 100644
index 0000000000..5600e31717
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-orientation.png differ
diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-refresh-header.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-refresh-header.png
new file mode 100644
index 0000000000..63a4dff356
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-refresh-header.png differ
diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-stacked.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-stacked.png
new file mode 100644
index 0000000000..2c47e3c009
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-stacked.png differ
diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-tooltip.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-tooltip.png
new file mode 100644
index 0000000000..50518780df
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-tooltip.png differ
diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-css.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-css.png
new file mode 100644
index 0000000000..dbaccc92c1
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-css.png differ
diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-event.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-event.png
new file mode 100644
index 0000000000..b293db57e2
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-event.png differ
diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-method.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-method.png
new file mode 100644
index 0000000000..0ed60f7287
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-method.png differ
diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-property.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-property.png
new file mode 100644
index 0000000000..d4827aceef
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-using-property.png differ
diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext-wrap-mode.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-wrap-mode.png
new file mode 100644
index 0000000000..9cb20faf9d
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext-wrap-mode.png differ
diff --git a/ej2-asp-core-mvc/grid/images/columns/Column-headertext.png b/ej2-asp-core-mvc/grid/images/columns/Column-headertext.png
new file mode 100644
index 0000000000..7486c63f81
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/Column-headertext.png differ
diff --git a/ej2-asp-core-mvc/grid/images/columns/frozon-direction.png b/ej2-asp-core-mvc/grid/images/columns/frozon-direction.png
new file mode 100644
index 0000000000..71c4032038
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/frozon-direction.png differ
diff --git a/ej2-asp-core-mvc/grid/images/columns/frozon-particular.png b/ej2-asp-core-mvc/grid/images/columns/frozon-particular.png
new file mode 100644
index 0000000000..77297fa5d9
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/frozon-particular.png differ
diff --git a/ej2-asp-core-mvc/grid/images/columns/frozon.png b/ej2-asp-core-mvc/grid/images/columns/frozon.png
new file mode 100644
index 0000000000..845126a26e
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/columns/frozon.png differ
diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html
index ab9bfa790a..1e16e6a372 100644
--- a/ej2-asp-core-toc.html
+++ b/ej2-asp-core-toc.html
@@ -1261,13 +1261,14 @@
 				<li><a href="/ej2-asp-core/grid/columns/columns">Columns</a>
 					<ul>
 						<li><a href="/ej2-asp-core/grid/columns/auto-generated-columns">Auto Generated Columns</a></li>
-						<li><a href="/ej2-asp-core/grid/columns/headers">Headers</a></li>
+						<li><a href="/ej2-asp-core/grid/columns/column-headers">column Headers</a></li>
 						<li><a href="/ej2-asp-core/grid/columns/column-template">Column Template</a></li>
 						<li><a href="/ej2-asp-core/grid/columns/complex-data-binding">Complex Data Binding</a></li>
 						<li><a href="/ej2-asp-core/grid/columns/foreign-key-column">ForeignKey Column</a></li>
 						<li><a href="/ej2-asp-core/grid/columns/auto-fit-columns">Autofit Columns</a></li>
 						<li><a href="/ej2-asp-core/grid/columns/column-reorder">Column Reorder</a></li>
 						<li><a href="/ej2-asp-core/grid/columns/column-resizing">Column Resizing</a></li>
+						<li><a href="/ej2-asp-core/grid/columns/frozen-column">Column Pinning (Frozen)</a></li>
 						<li><a href="/ej2-asp-core/grid/columns/column-chooser">Column Chooser</a></li>
 						<li><a href="/ej2-asp-core/grid/columns/column-menu">Column Menu</a></li>
 						<li><a href="/ej2-asp-core/grid/columns/column-spanning">Column Spanning</a></li>
diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html
index 7273656b1a..f793a3f5fd 100644
--- a/ej2-asp-mvc-toc.html
+++ b/ej2-asp-mvc-toc.html
@@ -1211,13 +1211,14 @@
 				<li><a href="/ej2-asp-mvc/grid/columns/columns">Columns</a>
 					<ul>
 						<li><a href="/ej2-asp-mvc/grid/columns/auto-generated-columns">Auto Generated Columns</a></li>
-						<li><a href="/ej2-asp-mvc/grid/columns/headers">Headers</a></li>
+						<li><a href="/ej2-asp-mvc/grid/columns/column-headers">column Headers</a></li>
 						<li><a href="/ej2-asp-mvc/grid/columns/column-template">Column Template</a></li>
 						<li><a href="/ej2-asp-mvc/grid/columns/complex-data-binding">Complex Data Binding</a></li>
 						<li><a href="/ej2-asp-mvc/grid/columns/foreign-key-column">ForeignKey Column</a></li>
 						<li><a href="/ej2-asp-mvc/grid/columns/auto-fit-columns">Autofit Columns</a></li>
 						<li><a href="/ej2-asp-mvc/grid/columns/column-reorder">Column Reorder</a></li>
 						<li><a href="/ej2-asp-mvc/grid/columns/column-resizing">Column Resizing</a></li>
+						<li><a href="/ej2-asp-mvc/grid/columns/frozen-column">Column Pinning (Frozen)</a></li>
 						<li><a href="/ej2-asp-mvc/grid/columns/column-chooser">Column Chooser</a></li>
 						<li><a href="/ej2-asp-mvc/grid/columns/column-menu">Column Menu</a></li>
 						<li><a href="/ej2-asp-mvc/grid/columns/column-spanning">Column Spanning</a></li>