+
+ Select Mode:
+
+
+
+
+
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/masterdetailgrid.cs b/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/masterdetailgrid.cs
index f650c2d757..35e0c7fa1c 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/masterdetailgrid.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/masterdetailgrid.cs
@@ -1,5 +1,6 @@
public IActionResult Index()
{
- ViewBag.dataSource = OrderDetails.GetAllRecords();
+ ViewBag.DataSource = OrdersDetails.GetAllRecords();
+ ViewBag.EmployeeData =Employees.GetAllRecords();
return View();
}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/razor b/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/razor
index 50964a633d..3846fca91b 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/razor
@@ -1,36 +1,42 @@
Master Grid
- @Html.EJS().Grid("masterGrid").DataSource((IEnumerable)ViewBag.dataSource).Width("auto").SelectedRowIndex(0).Columns(col =>
- {
- col.Field("EmployeeID").HeaderText("EmployeeID").IsPrimaryKey(true).Add();
- col.Field("OrderID").HeaderText("OrderID").Add();
- col.Field("CustomerID").HeaderText("FirstName").Add();
- }).RowSelected("selected").BeforePrint("beforePrint").Toolbar(new List() { "Print" }).Render()
+ @Html.EJS().Grid("masterGrid").DataSource((IEnumerable)ViewBag.EmployeeData).SelectedRowIndex(1).Columns(col =>
+{
+ col.Field("ContactName").HeaderText("Customer Name").Width(150).Add();
+ col.Field("CompanyName").HeaderText("CompanyName").Width(150).Add();
+ col.Field("Address").HeaderText("Address").Width(150).Add();
+ col.Field("Country").HeaderText("Country").Width(130).Add();
+
+}).RowSelected("rowSelected").BeforePrint("beforePrint").Toolbar(new List() { "Print" }).Render()
-
Showing orders of Customer:
+
Showing orders of Customer:
- @Html.EJS().Grid("detailGrid").DataSource((IEnumerable)ViewBag.dataSource1).Columns(col =>
- {
- col.Field("EmployeeID").HeaderText("EmployeeID").IsPrimaryKey(true).Add();
- col.Field("ShipCountry").HeaderText("ShipCountry").Add();
- col.Field("ShipName").HeaderText("ShipName").Add();
- }).Render()
+@Html.EJS().Grid("childGrid").Columns(col =>
+{
+ col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+ col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+ col.Field("ShipName").HeaderText("Ship Name").Width("120").Add();
+ col.Field("ShipAddress").HeaderText("Ship Address").Width("150").Add();
+ col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+
+
+}).Render()
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/tagHelper
index 6b00303b69..4a36a45612 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/tagHelper
@@ -1,40 +1,43 @@
@using System.Text.Json;
-
+
-
-
Showing orders of Customer:
-
-
-
-
-
-
+
Showing orders of Customer:
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/print.cs b/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/print.cs
new file mode 100644
index 0000000000..47e5e3b61d
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/print.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/print/print-custom/razor b/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/razor
new file mode 100644
index 0000000000..958b1ad0b7
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/razor
@@ -0,0 +1,42 @@
+
+ @Html.EJS().Button("print").CssClass("e-danger").Content("Print").Render()
+
+@Html.EJS().Grid("HierarchyPrint").DataSource((IEnumerable)ViewBag.DataSource).Columns(col =>
+{
+ col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
+ col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+
+}).AllowPaging().PageSettings(page => { page.PageSize(10); }).PrintMode(Syncfusion.EJ2.Grids.PrintMode.CurrentPage).ActionComplete("actionComplete").DataBound("dataBound").BeforePrint("beforePrint").Render()
+
+@Html.EJS().Chart("chart").Series(series =>
+{
+ series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(1).XName("OrderDate")
+ .YName("Freight").ColumnWidth(0.4).Marker(mr => mr.Visible(true)).Add();
+
+}).PrimaryXAxis(px =>px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
+.LabelFormat("MMMd")).PrimaryYAxis(py =>py.LabelFormat("{value}")).Title("Order Data").Render()
+
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/tagHelper
new file mode 100644
index 0000000000..b91d952122
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-custom/tagHelper
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
+
+
+Chart
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-select/print.cs b/ej2-asp-core-mvc/code-snippet/grid/print/print-select/print.cs
new file mode 100644
index 0000000000..47e5e3b61d
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-select/print.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/print/print-select/razor b/ej2-asp-core-mvc/code-snippet/grid/print/print-select/razor
new file mode 100644
index 0000000000..f7a7496d08
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-select/razor
@@ -0,0 +1,22 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).BeforePrint("beforePrint").Columns(col =>
+{
+ col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+ col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+ col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+ col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
+
+}).AllowPaging().SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).PageSettings(page => page.PageSize(6)).Toolbar(new List() { "Print" }).Render()
+
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-select/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/print-select/tagHelper
new file mode 100644
index 0000000000..12f97906c9
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-select/tagHelper
@@ -0,0 +1,25 @@
+
+
+
+
+
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-style/print.cs b/ej2-asp-core-mvc/code-snippet/grid/print/print-style/print.cs
new file mode 100644
index 0000000000..47e5e3b61d
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-style/print.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/print/print-style/razor b/ej2-asp-core-mvc/code-snippet/grid/print/print-style/razor
new file mode 100644
index 0000000000..196351c334
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-style/razor
@@ -0,0 +1,37 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).BeforePrint("beforePrint").Columns(col =>
+{
+ col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+ col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+ col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+ col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
+
+}).Toolbar(new List() { "Print" }).Render()
+
+
+
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-style/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/print-style/tagHelper
new file mode 100644
index 0000000000..06179efa8a
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-style/tagHelper
@@ -0,0 +1,36 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print/print.cs b/ej2-asp-core-mvc/code-snippet/grid/print/print/print.cs
index 4019df2042..47e5e3b61d 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/print/print.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print/print.cs
@@ -1,5 +1,5 @@
public IActionResult Index()
{
- ViewBag.DataSource = OrderDetails.GetAllRecords();
+ ViewBag.DataSource = OrdersDetails.GetAllRecords();
return View();
}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print/razor b/ej2-asp-core-mvc/code-snippet/grid/print/print/razor
index 4cb27541ab..1e350d417c 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/print/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print/razor
@@ -3,7 +3,7 @@
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
- col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+ col.Field("Freight").HeaderText("Freight").Width("130").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
}).AllowPaging().Toolbar(new List() { "Print" }).Render()
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/print/tagHelper
index 7432d706db..185529820c 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/print/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/print/tagHelper
@@ -1,8 +1,9 @@
-
+
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/razor b/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/razor
index b381685cd3..2e5368d1f9 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/razor
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/razor
@@ -1,33 +1,31 @@
-@Html.EJS().Grid("Print").DataSource((IEnumerable)ViewBag.DataSource).ToolbarClick("toolbarClick").PrintComplete("printComplete").Columns(col =>
+@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).ToolbarClick("toolbarClick").PrintComplete("printComplete").Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
- col.Field("CustomerID").HeaderText("Customer Name").Visible(false).Width("150").Add();
- col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
- col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+ col.Field("CustomerID").HeaderText("Customer ID").Visible(false).Width("150").Add();
col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+ col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
-}).AllowPaging().Toolbar(new List() { "Print" }).Render()
+}).Toolbar(new List() { "Print" }).Render()
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/show-hide.cs b/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/show-hide.cs
index 4019df2042..47e5e3b61d 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/show-hide.cs
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/show-hide.cs
@@ -1,5 +1,5 @@
public IActionResult Index()
{
- ViewBag.DataSource = OrderDetails.GetAllRecords();
+ ViewBag.DataSource = OrdersDetails.GetAllRecords();
return View();
}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/tagHelper
index f1392949a0..088972d0fe 100644
--- a/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/grid/print/show-hide-columns/tagHelper
@@ -1,4 +1,4 @@
-
+
-
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/document-editor/collaborative-editing/overview.md b/ej2-asp-core-mvc/document-editor/collaborative-editing/overview.md
new file mode 100644
index 0000000000..71714f8f8e
--- /dev/null
+++ b/ej2-asp-core-mvc/document-editor/collaborative-editing/overview.md
@@ -0,0 +1,44 @@
+---
+layout: post
+title: Collaborative Editing in ##Platform_Name## Document Editor Control | Syncfusion
+component: DocumentEditor
+description: Learn about collaborative editing in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Collaborative Editing
+
+Allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes.
+
+## Prerequisites
+
+- *Real-time Transport Protocol*: This protocol facilitates instant communication between clients and the server, ensuring immediate updates during collaborative editing.
+- *Distributed Cache or Database*: Used to temporarily store the queue of editing operations.
+
+### Real time transport protocol
+
+- *Managing Connections*: Keeps active connections open for real-time collaboration, allowing seamless communication between users and the server.
+- *Broadcasting Changes*: Ensures that any edits made by one user are instantly sent to all collaborators, keeping everyone on the same page with the latest document version.
+
+### Distributed cache or database
+
+To support collaborative editing, it's crucial to have a backing system that temporarily stores the editing operations of all active users. There are two primary options:
+
+- *Distributed Cache*: Handles a higher number of `HTTP` requests per second compared to a database approach. For instance, a server with 2 vCPUs and 8GB RAM can handle up to 125 requests per second using a distributed cache.
+- *Database*: With the same server configuration, it can handle up to 50 requests per second.
+
+Using the distributed cache or database all the editing operations are queued in order and conflict resolution is performed using `Operational Transformation` Algorithm.
+
+> *Recommendation* - If you expect average `http` requests per second of your live application as 50 or below, then the database can provide reliable a backing system for operation queue. If you expect average requests per second of your live application as above 50, then the distributed cache is highly recommended backing system.
+
+> Tips to calculate the average requests per second of your application:
+Assume the editor in your live application is actively used by 1000 users and each user's edit can trigger 2 to 5 requests per second. The total requests per second of your applications will be around 2000 to 5000. In this case, you can finalize a configuration to support around 5000 average requests per second.
+
+> Note: The above metrics are based solely on the collaborative editing module. Actual throughput may decrease depending on other server-side interactions, such as document importing, pasting formatted content, editing restrictions, and spell checking. Therefore, it is advisable to monitor your app's traffic and choose a configuration that best suits your needs.
+#### See Also
+
+- [Collaborative editing using Redis cache in ASP.NET Core](../../document-editor/collaborative-editing/using-distributed-cache-asp-net-core)
+- [Collaborative editing using Microsoft SQL server in ASP.NET Core](../../document-editor/collaborative-editing/using-database-in-asp-net-core)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/document-editor/collaborative-editing.md b/ej2-asp-core-mvc/document-editor/collaborative-editing/using-dot-net.md
similarity index 97%
rename from ej2-asp-core-mvc/document-editor/collaborative-editing.md
rename to ej2-asp-core-mvc/document-editor/collaborative-editing/using-dot-net.md
index 3b37c5d1f3..b3561fb441 100644
--- a/ej2-asp-core-mvc/document-editor/collaborative-editing.md
+++ b/ej2-asp-core-mvc/document-editor/collaborative-editing/using-dot-net.md
@@ -1,384 +1,385 @@
----
-title: Collaborative Editing in ##Platform_Name## Document Editor Control | Syncfusion
-component: DocumentEditor
-description: Learn how to enable and perform collaborative editing in Syncfusion ##Platform_Name## Document editor.
-publishingplatform: ##Platform_Name##
----
-
-# Collaborative Editing
-
-Allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes.
-
-## Prerequisites
-
-Following things are needed to enable collaborative editing in Document Editor
-
-- SignalR
-- Microsoft SQL Server
-
-## How to enable collaborative editing in client side
-
-### Step 1: Enable collaborative editing in Document Editor
-
-To enable collaborative editing, inject `CollaborativeEditingHandler` and set the property `enableCollaborativeEditing` to true in the Document Editor, like in the code snippet below.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/document-editor/collaborative-editing/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Document-editor.cs" %}
-{% include code-snippet/document-editor/collaborative-editing/document-editor.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/document-editor/collaborative-editing/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Document-editor.cs" %}
-{% include code-snippet/document-editor/collaborative-editing/document-editor.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-## Step 2: Configure SignalR to send and receive changes
-
-To broadcast the changes made and receive changes from remote users, configure SignalR like below.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/document-editor/collaborative-editing/script-1 %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/document-editor/collaborative-editing/script-1 %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-### Step 3: Join SignalR room while opening the document
-
-When opening a document, we need to generate a unique ID for each document. These unique IDs are then used to create rooms using SignalR, which facilitates sending and receiving data from the server.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/document-editor/collaborative-editing/script-2 %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/document-editor/collaborative-editing/script-2 %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-### Step 5: Broadcast current editing changes to remote users
-
-Changes made on the client-side need to be sent to the server-side to broadcast them to other connected users. To send the changes made to the server, use the method shown below from the document editor using the `contentChange` event.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/document-editor/collaborative-editing/script-3 %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/document-editor/collaborative-editing/script-3 %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-## How to enable collaborative editing in ASP.NET Core
-
-### Step 1: Configure SignalR in ASP.NET Core
-
-We are using Microsoft SignalR to broadcast the changes. Please add the following configuration to your application's Program.cs file.
-
-```csharp
- using Microsoft.Azure.SignalR;
- .....
- builder.Services.AddSignalR();
- .....
- .....
- .....
- app.MapHub("/documenteditorhub");
- .....
- .....
-```
-
-### Step 2: Configure SignalR hub to create room for collaborative editing session
-
-To manage groups for each document, create a folder named "Hub" and add a file named "DocumentEditorHub.cs" inside it. Add the following code to the file to manage SignalR groups using room names.
-
-Join the group by using unique id of the document by using `JoinGroup` method.
-
-```csharp
-static Dictionary userManager = new Dictionary();
- internal static Dictionary> groupManager = new Dictionary>();
-
- // Join to the specified room name
- public async Task JoinGroup(ActionInfo info)
- {
- if (!userManager.ContainsKey(Context.ConnectionId))
- {
- userManager.Add(Context.ConnectionId, info);
- }
- info.ConnectionId = Context.ConnectionId;
- //Add the current connected use to the specified group
- await Groups.AddToGroupAsync(Context.ConnectionId, info.RoomName);
- if (groupManager.ContainsKey(info.RoomName))
- {
- await Clients.Caller.SendAsync("dataReceived", "addUser", groupManager[info.RoomName]);
- }
- lock (groupManager)
- {
- if (groupManager.ContainsKey(info.RoomName))
- {
- groupManager[info.RoomName].Add(info);
- }
- else
- {
- List actions = new List
- {
- info
- };
- groupManager.Add(info.RoomName, actions);
- }
- }
- // Notify other users in the group about new user joined the collaborative editing session.
- Clients.GroupExcept(info.RoomName, Context.ConnectionId).SendAsync("dataReceived", "addUser", info);
- }
-
-```
-
-Handle user disconnection using SignalR.
-
-```csharp
-//Handle disconnection from group.
- public override Task OnDisconnectedAsync(Exception? e)
- {
- string roomName = userManager[Context.ConnectionId].RoomName;
- if (groupManager.ContainsKey(roomName))
- {
- groupManager[roomName].Remove(userManager[Context.ConnectionId]);
-
- if (groupManager[roomName].Count == 0)
- {
- groupManager.Remove(roomName);
-//If all user disconnected from current room. Auto save the change to source document.
-CollaborativeEditingController.UpdateOperationsToSourceDocument(roomName, “<>”, false);
- }
- }
-
- if (userManager.ContainsKey(Context.ConnectionId))
- {
- //Notify other user in the group about user exit the collaborative editing session
- Clients.OthersInGroup(roomName).SendAsync("dataReceived", "removeUser", Context.ConnectionId);
- Groups.RemoveFromGroupAsync(Context.ConnectionId, roomName);
- userManager.Remove(Context.ConnectionId);
- }
- return base.OnDisconnectedAsync(e);
- }
-
-```
-
-### Step 3: Configure Microsoft SQL database connection string in application level
-
-Configure the SQL database that stores temporary data for the collaborative editing session. Provide the SQL database connection string in `appsettings.json` file.
-
-```json
-.....
-"ConnectionStrings": {
- "DocumentEditorDatabase": ""
-}
-.....
-
-```
-
-### Step 4: Configure Web API actions for collaborative editing
-
-#### Import File
-
-1. When opening a document, create a database table to store temporary data for the collaborative editing session.
-2. If the table already exists, retrieve the records from the table and apply them to the WordDocument instance using the `UpdateActions` method before converting it to the SFDT format.
-
-```csharp
-public string ImportFile([FromBody] FileInfo param)
- {
- .....
- .....
- DocumentContent content = new DocumentContent();
-
- .....
- //Get source document from database/file system/blob storage
- WordDocument document = GetDocumentFromDatabase(param.fileName, param.documentOwner);
- .....
- //Get temporary records from database
- List actions = CreatedTable(param.fileName);
- if(actions!=null)
- {
- //Apply temporary data to the document.
- document.UpdateActions(actions);
- }
- string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
- content.version = 0;
- content.sfdt = json;
- return Newtonsoft.Json.JsonConvert.SerializeObject(content);
- }
-
-```
-
-#### Update editing records to database.
-
-Each edit operation made by the user is sent to the server and is pushed to the database. Each operation receives a version number after being inserted into the database.
-After inserting the records to the server, the position of the current editing operation must be transformed against any previous editing operations not yet synced with the client using the TransformOperation method.
-After performing the transformation, the current operation is broadcast to all connected users within the group.
-
-```csharp
-public async Task UpdateAction([FromBody] ActionInfo param)
-{
- try
- {
- ActionInfo modifiedAction = AddOperationsToTable(param);
- //After transformation broadcast changes to all users in the gropu
- await _hubContext.Clients.Group(param.RoomName).SendAsync("dataReceived", "action", modifiedAction);
- return modifiedAction;
- }
- catch
- {
- return null;
- }
-}
-
-private ActionInfo AddOperationsToTable(ActionInfo action)
- {
- int clientVersion = action.Version;
- string tableName = action.RoomName;
- …………
- …………
- …………
- …………
- List actions = GetOperationsQueue(table);
- foreach (ActionInfo info in actions)
- {
- if (!info.IsTransformed)
- {
- CollaborativeEditingHandler.TransformOperation(info, actions);
- }
- }
- action = actions[actions.Count - 1];
- action.Version = updateVersion;
- //Return the transformed operation to broadcast it to other clients.
- return action;
- }
-
-```
-
-#### Add Web API to get previous operation as a backup to get lost operations
-
-On the client side, messages broadcast using SignalR may be received in a different order, or some operations may be missed due to network issues. In these cases, we need a backup method to retrieve missing records from the database.
-Using the following method, we can retrieve all operations after the last successful client-synced version and return all missing operations to the requesting client.
-
-```csharp
-public async Task UpdateAction([FromBody] ActionInfo param)
-{
- try
- {
- ActionInfo modifiedAction = AddOperationsToTable(param);
- //After transformation broadcast changes to all users in the group
- await _hubContext.Clients.Group(param.RoomName).SendAsync("dataReceived", "action", modifiedAction);
- return modifiedAction;
- }
- catch
- {
- return null;
- }
-}
-
-private ActionInfo AddOperationsToTable(ActionInfo action)
- {
- int clientVersion = action.Version;
- string tableName = action.RoomName;
- …………
- …………
- …………
- …………
- List actions = GetOperationsQueue(table);
- foreach (ActionInfo info in actions)
- {
- if (!info.IsTransformed)
- {
- CollaborativeEditingHandler.TransformOperation(info, actions);
- }
- }
- action = actions[actions.Count - 1];
- action.Version = updateVersion;
- //Return the transformed operation to broadcast it to other clients.
- return action;
- }
-
-```
-## How to perform Scaling in Collaborative Editing.
-
-As the number of user increases, maintaining responsiveness and performance becomes challenging. Scaling tackles this by distributing the workload across resources. You can scale the collaborative editing application using either ```Azure SignalR service or Redis backplane service```
-
-### 1. Scaling with Azure SignalR
-
-Azure SignalR Service is a scalable, managed service for real-time communication in web applications. It enables real-time messaging between web clients (browsers) and your server-side application(across multiple servers).
-
-Below is a code snippet to configure Azure SignalR in an ASP.NET Core application using the ```AddAzureSignalR``` method
-
-```csharp
-builder.Services.AddSignalR() .AddAzureSignalR("", options => {
-// Specify the channel name
-options.Channels.Add("document-editor");
- });
-```
-
-### 2. Scaling with Redis backplane
-
-Using a Redis backplane, you achieve horizontal scaling of your SignalR application. The SignalR leverages Redis to efficiently broadcast messages across multiple servers. This allows your application to handle large user bases with minimal latency.
-
-In the SignalR app, install the following NuGet package:
-* ` Microsoft.AspNetCore.SignalR.StackExchangeRedis`
-
-Below is a code snippet to configure Redis backplane in an ASP.NET Core application using the ```AddStackExchangeRedis ``` method
-
-```csharp
-builder.Services.AddSignalR().AddStackExchangeRedis("");
-```
-Configure options as needed:
-
-The following example shows how to add a channel prefix in the ConfigurationOptions object.
-
-```csharp
-builder.Services.AddDistributedMemoryCache().AddSignalR().AddStackExchangeRedis(connectionString, options =>
- {
- options.Configuration.ChannelPrefix = "document-editor";
- });
-```
-
-
-Full version of the code discussed about can be found in below GitHub location.
-
-GitHub Example: [`Collaborative editing examples`](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Collabrative-Editing)
+---
+title: Collaborative Editing in ##Platform_Name## Document Editor Control | Syncfusion
+component: DocumentEditor
+description: Learn how to enable and perform collaborative editing in Syncfusion ##Platform_Name## Document editor.
+platform: ej2-asp-core-mvc
+publishingplatform: ##Platform_Name##
+---
+
+# Collaborative Editing
+
+Allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes.
+
+## Prerequisites
+
+Following things are needed to enable collaborative editing in Document Editor
+
+- SignalR
+- Microsoft SQL Server
+
+## How to enable collaborative editing in client side
+
+### Step 1: Enable collaborative editing in Document Editor
+
+To enable collaborative editing, inject `CollaborativeEditingHandler` and set the property `enableCollaborativeEditing` to true in the Document Editor, like in the code snippet below.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/collaborative-editing/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Document-editor.cs" %}
+{% include code-snippet/document-editor/collaborative-editing/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/collaborative-editing/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Document-editor.cs" %}
+{% include code-snippet/document-editor/collaborative-editing/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Step 2: Configure SignalR to send and receive changes
+
+To broadcast the changes made and receive changes from remote users, configure SignalR like below.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/collaborative-editing/script-1 %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/collaborative-editing/script-1 %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+### Step 3: Join SignalR room while opening the document
+
+When opening a document, we need to generate a unique ID for each document. These unique IDs are then used to create rooms using SignalR, which facilitates sending and receiving data from the server.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/collaborative-editing/script-2 %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/collaborative-editing/script-2 %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+### Step 5: Broadcast current editing changes to remote users
+
+Changes made on the client-side need to be sent to the server-side to broadcast them to other connected users. To send the changes made to the server, use the method shown below from the document editor using the `contentChange` event.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/collaborative-editing/script-3 %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/collaborative-editing/script-3 %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## How to enable collaborative editing in ASP.NET Core
+
+### Step 1: Configure SignalR in ASP.NET Core
+
+We are using Microsoft SignalR to broadcast the changes. Please add the following configuration to your application's Program.cs file.
+
+```csharp
+ using Microsoft.Azure.SignalR;
+ .....
+ builder.Services.AddSignalR();
+ .....
+ .....
+ .....
+ app.MapHub("/documenteditorhub");
+ .....
+ .....
+```
+
+### Step 2: Configure SignalR hub to create room for collaborative editing session
+
+To manage groups for each document, create a folder named "Hub" and add a file named "DocumentEditorHub.cs" inside it. Add the following code to the file to manage SignalR groups using room names.
+
+Join the group by using unique id of the document by using `JoinGroup` method.
+
+```csharp
+static Dictionary userManager = new Dictionary();
+ internal static Dictionary> groupManager = new Dictionary>();
+
+ // Join to the specified room name
+ public async Task JoinGroup(ActionInfo info)
+ {
+ if (!userManager.ContainsKey(Context.ConnectionId))
+ {
+ userManager.Add(Context.ConnectionId, info);
+ }
+ info.ConnectionId = Context.ConnectionId;
+ //Add the current connected use to the specified group
+ await Groups.AddToGroupAsync(Context.ConnectionId, info.RoomName);
+ if (groupManager.ContainsKey(info.RoomName))
+ {
+ await Clients.Caller.SendAsync("dataReceived", "addUser", groupManager[info.RoomName]);
+ }
+ lock (groupManager)
+ {
+ if (groupManager.ContainsKey(info.RoomName))
+ {
+ groupManager[info.RoomName].Add(info);
+ }
+ else
+ {
+ List actions = new List
+ {
+ info
+ };
+ groupManager.Add(info.RoomName, actions);
+ }
+ }
+ // Notify other users in the group about new user joined the collaborative editing session.
+ Clients.GroupExcept(info.RoomName, Context.ConnectionId).SendAsync("dataReceived", "addUser", info);
+ }
+
+```
+
+Handle user disconnection using SignalR.
+
+```csharp
+//Handle disconnection from group.
+ public override Task OnDisconnectedAsync(Exception? e)
+ {
+ string roomName = userManager[Context.ConnectionId].RoomName;
+ if (groupManager.ContainsKey(roomName))
+ {
+ groupManager[roomName].Remove(userManager[Context.ConnectionId]);
+
+ if (groupManager[roomName].Count == 0)
+ {
+ groupManager.Remove(roomName);
+//If all user disconnected from current room. Auto save the change to source document.
+CollaborativeEditingController.UpdateOperationsToSourceDocument(roomName, “<>”, false);
+ }
+ }
+
+ if (userManager.ContainsKey(Context.ConnectionId))
+ {
+ //Notify other user in the group about user exit the collaborative editing session
+ Clients.OthersInGroup(roomName).SendAsync("dataReceived", "removeUser", Context.ConnectionId);
+ Groups.RemoveFromGroupAsync(Context.ConnectionId, roomName);
+ userManager.Remove(Context.ConnectionId);
+ }
+ return base.OnDisconnectedAsync(e);
+ }
+
+```
+
+### Step 3: Configure Microsoft SQL database connection string in application level
+
+Configure the SQL database that stores temporary data for the collaborative editing session. Provide the SQL database connection string in `appsettings.json` file.
+
+```json
+.....
+"ConnectionStrings": {
+ "DocumentEditorDatabase": ""
+}
+.....
+
+```
+
+### Step 4: Configure Web API actions for collaborative editing
+
+#### Import File
+
+1. When opening a document, create a database table to store temporary data for the collaborative editing session.
+2. If the table already exists, retrieve the records from the table and apply them to the WordDocument instance using the `UpdateActions` method before converting it to the SFDT format.
+
+```csharp
+public string ImportFile([FromBody] FileInfo param)
+ {
+ .....
+ .....
+ DocumentContent content = new DocumentContent();
+
+ .....
+ //Get source document from database/file system/blob storage
+ WordDocument document = GetDocumentFromDatabase(param.fileName, param.documentOwner);
+ .....
+ //Get temporary records from database
+ List actions = CreatedTable(param.fileName);
+ if(actions!=null)
+ {
+ //Apply temporary data to the document.
+ document.UpdateActions(actions);
+ }
+ string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
+ content.version = 0;
+ content.sfdt = json;
+ return Newtonsoft.Json.JsonConvert.SerializeObject(content);
+ }
+
+```
+
+#### Update editing records to database.
+
+Each edit operation made by the user is sent to the server and is pushed to the database. Each operation receives a version number after being inserted into the database.
+After inserting the records to the server, the position of the current editing operation must be transformed against any previous editing operations not yet synced with the client using the TransformOperation method.
+After performing the transformation, the current operation is broadcast to all connected users within the group.
+
+```csharp
+public async Task UpdateAction([FromBody] ActionInfo param)
+{
+ try
+ {
+ ActionInfo modifiedAction = AddOperationsToTable(param);
+ //After transformation broadcast changes to all users in the gropu
+ await _hubContext.Clients.Group(param.RoomName).SendAsync("dataReceived", "action", modifiedAction);
+ return modifiedAction;
+ }
+ catch
+ {
+ return null;
+ }
+}
+
+private ActionInfo AddOperationsToTable(ActionInfo action)
+ {
+ int clientVersion = action.Version;
+ string tableName = action.RoomName;
+ …………
+ …………
+ …………
+ …………
+ List actions = GetOperationsQueue(table);
+ foreach (ActionInfo info in actions)
+ {
+ if (!info.IsTransformed)
+ {
+ CollaborativeEditingHandler.TransformOperation(info, actions);
+ }
+ }
+ action = actions[actions.Count - 1];
+ action.Version = updateVersion;
+ //Return the transformed operation to broadcast it to other clients.
+ return action;
+ }
+
+```
+
+#### Add Web API to get previous operation as a backup to get lost operations
+
+On the client side, messages broadcast using SignalR may be received in a different order, or some operations may be missed due to network issues. In these cases, we need a backup method to retrieve missing records from the database.
+Using the following method, we can retrieve all operations after the last successful client-synced version and return all missing operations to the requesting client.
+
+```csharp
+public async Task UpdateAction([FromBody] ActionInfo param)
+{
+ try
+ {
+ ActionInfo modifiedAction = AddOperationsToTable(param);
+ //After transformation broadcast changes to all users in the group
+ await _hubContext.Clients.Group(param.RoomName).SendAsync("dataReceived", "action", modifiedAction);
+ return modifiedAction;
+ }
+ catch
+ {
+ return null;
+ }
+}
+
+private ActionInfo AddOperationsToTable(ActionInfo action)
+ {
+ int clientVersion = action.Version;
+ string tableName = action.RoomName;
+ …………
+ …………
+ …………
+ …………
+ List actions = GetOperationsQueue(table);
+ foreach (ActionInfo info in actions)
+ {
+ if (!info.IsTransformed)
+ {
+ CollaborativeEditingHandler.TransformOperation(info, actions);
+ }
+ }
+ action = actions[actions.Count - 1];
+ action.Version = updateVersion;
+ //Return the transformed operation to broadcast it to other clients.
+ return action;
+ }
+
+```
+## How to perform Scaling in Collaborative Editing.
+
+As the number of user increases, maintaining responsiveness and performance becomes challenging. Scaling tackles this by distributing the workload across resources. You can scale the collaborative editing application using either ```Azure SignalR service or Redis backplane service```
+
+### 1. Scaling with Azure SignalR
+
+Azure SignalR Service is a scalable, managed service for real-time communication in web applications. It enables real-time messaging between web clients (browsers) and your server-side application(across multiple servers).
+
+Below is a code snippet to configure Azure SignalR in an ASP.NET Core application using the ```AddAzureSignalR``` method
+
+```csharp
+builder.Services.AddSignalR() .AddAzureSignalR("", options => {
+// Specify the channel name
+options.Channels.Add("document-editor");
+ });
+```
+
+### 2. Scaling with Redis backplane
+
+Using a Redis backplane, you achieve horizontal scaling of your SignalR application. The SignalR leverages Redis to efficiently broadcast messages across multiple servers. This allows your application to handle large user bases with minimal latency.
+
+In the SignalR app, install the following NuGet package:
+* ` Microsoft.AspNetCore.SignalR.StackExchangeRedis`
+
+Below is a code snippet to configure Redis backplane in an ASP.NET Core application using the ```AddStackExchangeRedis ``` method
+
+```csharp
+builder.Services.AddSignalR().AddStackExchangeRedis("");
+```
+Configure options as needed:
+
+The following example shows how to add a channel prefix in the ConfigurationOptions object.
+
+```csharp
+builder.Services.AddDistributedMemoryCache().AddSignalR().AddStackExchangeRedis(connectionString, options =>
+ {
+ options.Configuration.ChannelPrefix = "document-editor";
+ });
+```
+
+
+Full version of the code discussed about can be found in below GitHub location.
+
+GitHub Example: [`Collaborative editing examples`](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Collabrative-Editing)
diff --git a/ej2-asp-core-mvc/document-editor/collaborative-editing/using-redis-cache-asp-net.md b/ej2-asp-core-mvc/document-editor/collaborative-editing/using-redis-cache-asp-net.md
new file mode 100644
index 0000000000..090d71bca7
--- /dev/null
+++ b/ej2-asp-core-mvc/document-editor/collaborative-editing/using-redis-cache-asp-net.md
@@ -0,0 +1,415 @@
+---
+layout: post
+title: Collaborative Editing in ##Platform_Name## Document Editor Control | Syncfusion
+component: DocumentEditor
+description: Learn how to enable and perform collaborative editing in Syncfusion ##Platform_Name## Document editor.
+platform: ej2-asp-core-mvc
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Collaborative Editing
+
+Allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes.
+
+## Prerequisites
+
+Following things are needed to enable collaborative editing in Document Editor
+
+- SignalR
+- Redis
+
+## SignalR
+
+In collaborative editing, real-time communication is essential for users to see each other's changes instantly. We use a real-time transport protocol to efficiently send and receive data as edits occur. For this, we utilize SignalR, which supports real-time data exchange between the client and server. SignalR ensures that updates are transmitted immediately, allowing seamless collaboration by handling the complexities of connection management and offering reliable communication channels.
+
+To make SignalR work in a distributed environment (with more than one server instance), it needs to be configured with either Azure SignalR Service or a Redis backplane.
+
+### Scale-out SignalR using Azure SignalR service
+
+Azure SignalR Service is a scalable, managed service for real-time communication in web applications. It enables real-time messaging between web clients (browsers) and your server-side application(across multiple servers).
+
+Below is a code snippet to configure Azure SignalR in an ASP.NET Core application using the ```AddAzureSignalR``` method
+
+```csharp
+builder.Services.AddSignalR() .AddAzureSignalR("", options => {
+ // Specify the channel name
+ options.Channels.Add("document-editor");
+ });
+```
+
+### Scale-out SignalR using Redis
+
+Using a Redis backplane, you can achieve horizontal scaling of your SignalR application. The SignalR leverages Redis to efficiently broadcast messages across multiple servers. This allows your application to handle large user bases with minimal latency.
+
+In the SignalR app, install the following NuGet package:
+* ` Microsoft.AspNetCore.SignalR.StackExchangeRedis`
+
+Below is a code snippet to configure Redis backplane in an ASP.NET Core application using the ```AddStackExchangeRedis ``` method
+
+```csharp
+builder.Services.AddSignalR().AddStackExchangeRedis("");
+```
+Configure options as needed:
+
+The following example shows how to add a channel prefix in the ConfigurationOptions object.
+
+```csharp
+builder.Services.AddDistributedMemoryCache().AddSignalR().AddStackExchangeRedis(connectionString, options =>
+ {
+ options.Configuration.ChannelPrefix = "document-editor";
+ });
+```
+
+## Redis
+
+In collaborative editing, Redis is used to store temporary data that helps queue editing operations and resolve conflicts using the `Operational Transformation` algorithm.
+
+All editing operations in collaborative editing are stored in the Redis cache. To prevent memory buildup, we can configure a `SaveThreshold` limit at the application level. If the `SaveThreshold` is 100, editing operations up to twice the save threshold limit are kept in Redis per document. Once exceeded, the first 100 operations (as defined by the save threshold) are removed from the cache and automatically saved to the source input document.
+
+The configuration and store size of the Redis cache can be adjusted based on the following considerations.
+
+- *Storage Requirements*: A minimum of 400KB of cache memory is needed for editing a single document, with the capacity to store up to 100 editing operations. Storage needs may increase based on following factor.
+ - *Images*: Increases with the number of images added to the document.
+ - *Pasted content*: Depends on the size of the SFDT content.
+- *Connection Limits*: Redis has a limit on concurrent connections. Choose the Redis configuration based on your user base to ensure optimal performance.
+
+> For better performance, we recommend to have minimum `SaveThreshold` limit of 100.
+
+## How to enable collaborative editing in client side
+
+### Step 1: Enable collaborative editing in Document Editor
+
+To enable collaborative editing, inject `CollaborativeEditingHandler` and set the property `enableCollaborativeEditing` to true in the Document Editor, like in the code snippet below.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/collaborative-editing/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Document-editor.cs" %}
+{% include code-snippet/document-editor/collaborative-editing/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/collaborative-editing/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Document-editor.cs" %}
+{% include code-snippet/document-editor/collaborative-editing/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Step 2: Configure SignalR to send and receive changes
+
+To broadcast the changes made and receive changes from remote users, configure SignalR like below.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/collaborative-editing/script-1 %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/collaborative-editing/script-1 %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+### Step 3: Join SignalR room while opening the document
+
+When opening a document, we need to generate a unique ID for each document. These unique IDs are then used to create rooms using SignalR, which facilitates sending and receiving data from the server.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/collaborative-editing/script-2 %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/collaborative-editing/script-2 %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+### Step 5: Broadcast current editing changes to remote users
+
+Changes made on the client-side need to be sent to the server-side to broadcast them to other connected users. To send the changes made to the server, use the method shown below from the document editor using the `contentChange` event.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/collaborative-editing/script-3 %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/collaborative-editing/script-3 %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## How to enable collaborative editing in ASP.NET Core
+
+### Step 1: Configure SignalR in ASP.NET Core
+
+We are using Microsoft SignalR to broadcast the changes. Please add the following configuration to your application's Program.cs file.
+
+```csharp
+ using Microsoft.Azure.SignalR;
+ .....
+ builder.Services.AddSignalR();
+ .....
+ .....
+ .....
+ app.MapHub("/documenteditorhub");
+ .....
+ .....
+```
+
+### Step 2: Configure SignalR hub to create room for collaborative editing session
+
+To manage groups for each document, create a folder named "Hub" and add a file named "DocumentEditorHub.cs" inside it. Add the following code to the file to manage SignalR groups using room names.
+
+Join the group by using unique id of the document by using `JoinGroup` method.
+
+```csharp
+static Dictionary userManager = new Dictionary();
+ internal static Dictionary> groupManager = new Dictionary>();
+
+ // Join to the specified room name
+ public async Task JoinGroup(ActionInfo info)
+ {
+ if (!userManager.ContainsKey(Context.ConnectionId))
+ {
+ userManager.Add(Context.ConnectionId, info);
+ }
+ info.ConnectionId = Context.ConnectionId;
+ //Add the current connected use to the specified group
+ await Groups.AddToGroupAsync(Context.ConnectionId, info.RoomName);
+ if (groupManager.ContainsKey(info.RoomName))
+ {
+ await Clients.Caller.SendAsync("dataReceived", "addUser", groupManager[info.RoomName]);
+ }
+ lock (groupManager)
+ {
+ if (groupManager.ContainsKey(info.RoomName))
+ {
+ groupManager[info.RoomName].Add(info);
+ }
+ else
+ {
+ List actions = new List
+ {
+ info
+ };
+ groupManager.Add(info.RoomName, actions);
+ }
+ }
+ // Notify other users in the group about new user joined the collaborative editing session.
+ Clients.GroupExcept(info.RoomName, Context.ConnectionId).SendAsync("dataReceived", "addUser", info);
+ }
+
+```
+
+Handle user disconnection using SignalR.
+
+```csharp
+//Handle disconnection from group.
+ public override Task OnDisconnectedAsync(Exception? e)
+ {
+ string roomName = userManager[Context.ConnectionId].RoomName;
+ if (groupManager.ContainsKey(roomName))
+ {
+ groupManager[roomName].Remove(userManager[Context.ConnectionId]);
+
+ if (groupManager[roomName].Count == 0)
+ {
+ groupManager.Remove(roomName);
+//If all user disconnected from current room. Auto save the change to source document.
+CollaborativeEditingController.UpdateOperationsToSourceDocument(roomName, “<>”, false);
+ }
+ }
+
+ if (userManager.ContainsKey(Context.ConnectionId))
+ {
+ //Notify other user in the group about user exit the collaborative editing session
+ Clients.OthersInGroup(roomName).SendAsync("dataReceived", "removeUser", Context.ConnectionId);
+ Groups.RemoveFromGroupAsync(Context.ConnectionId, roomName);
+ userManager.Remove(Context.ConnectionId);
+ }
+ return base.OnDisconnectedAsync(e);
+ }
+
+```
+
+### Step 3: Configure Redis cache connection string in application level
+
+Configure the Redis that stores temporary data for the collaborative editing session. Provide the Redis connection string in `appsettings.json` file.
+
+```json
+.....
+"ConnectionStrings": {
+ "RedisConnectionString": "<>"
+}
+.....
+
+```
+
+### Step 4: Configure Web API actions for collaborative editing
+
+#### Import File
+
+1. When opening a document, check the Redis cache for pending operations and retrieve them for the collaborative editing session.
+2. If pending operations exist, apply them to the WordDocument instance using the `UpdateActions` method before converting it to the SFDT format.
+
+```csharp
+public string ImportFile([FromBody] FileInfo param)
+ {
+ .....
+ .....
+ DocumentContent content = new DocumentContent();
+
+ .....
+ //Get source document from database/file system/blob storage
+ WordDocument document = GetSourceDocument(param.fileName);
+ .....
+ //Get the temporary operations
+ List actions = await GetPendingOperations(param.fileName, 0, -1);
+ if(actions!=null && actions.Count > 0)
+ {
+ //Apply temporary data to the document.
+ document.UpdateActions(actions);
+ }
+ string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
+ content.version = 0;
+ content.sfdt = json;
+ return Newtonsoft.Json.JsonConvert.SerializeObject(content);
+ }
+
+```
+
+#### Update editing records to Redis cache.
+
+Each edit operation made by the user is sent to the server and pushed into a Redis list data structure. Each operation is assigned a version number upon insertion into Redis.
+
+After inserting the records to the server, the position of the current editing operation must be transformed relative to any previous editing operations not yet synced with the client using the `TransformOperation` method to resolve any potential conflicts with the help of the `Operational Transformation` algorithm.
+
+Once the conflict is resolved, the current operation is broadcast to all connected users within the group.
+
+```csharp
+public async Task UpdateAction([FromBody] ActionInfo param)
+{
+ try
+ {
+ ActionInfo modifiedAction = AddOperationsToCache(param);
+ //After transformation broadcast changes to all users in the gropu
+ await _hubContext.Clients.Group(param.RoomName).SendAsync("dataReceived", "action", modifiedAction);
+ return modifiedAction;
+ }
+ catch
+ {
+ return null;
+ }
+}
+
+private ActionInfo AddOperationsToCache(ActionInfo action)
+ {
+ int clientVersion = action.Version;
+ string insertScript = "-------"
+ …………
+ …………
+ …………
+ …………
+
+ IDatabase database = _redisConnection.GetDatabase();
+ // Define the keys for Redis operations based on the action's room name
+ RedisKey[] keys = new RedisKey[] { action.RoomName + CollaborativeEditingHelper.VersionSuffix, action.RoomName, action.RoomName + CollaborativeEditingHelper.RevisionSuffix };
+ // Serialize the action and prepare values for the Redis script
+ RedisValue[] values = new RedisValue[] { JsonConvert.SerializeObject(action), clientVersion.ToString(), CollaborativeEditingHelper.SaveThreshold.ToString() };
+ // Execute the Lua script in Redis and store the results
+ RedisResult[] results = (RedisResult[])await database.ScriptEvaluateAsync(insertScript, keys, values);
+
+ List previousOperations = ((RedisResult[])results[1]).Select(value => JsonConvert.DeserializeObject(value.ToString())).ToList();
+ previousOperations.ForEach(op => op.Version = ++clientVersion);
+ if (previousOperations.Count > 1)
+ {
+ // Set the current action to the last operation in the list
+ action = previousOperations.Last();
+ // Transform operations that have not been transformed yet
+ previousOperations.Where(op => !op.IsTransformed).ToList().ForEach(op => CollaborativeEditingHandler.TransformOperation(op, previousOperations));
+ }
+ action = actions[actions.Count - 1];
+ action.Version = updateVersion;
+ //Return the transformed operation to broadcast it to other clients.
+ return action;
+ }
+
+```
+
+#### Add Web API to get previous operation as a backup to get lost operations
+
+On the client side, messages broadcast using SignalR might be received out of order or lost due to network issues. In such cases, we need a backup method to retrieve missing operations from Redis. By using the following method, we can retrieve all operations performed after the last successful client-synchronized version and return any missing operations to the requesting client.
+
+```csharp
+public async Task GetActionsFromServer(ActionInfo param)
+ {
+ try
+ {
+ // Initialize necessary variables from the parameters and helper class
+ int saveThreshold = CollaborativeEditingHelper.SaveThreshold;
+ string tableName = param.RoomName;
+ int lastSyncedVersion = param.Version;
+ int clientVersion = param.Version;
+
+ // Retrieve the database connection
+ IDatabase database = _redisConnection.GetDatabase();
+
+ // Fetch actions that are effective and pending based on the last synced version
+ List actions = await GetEffectivePendingVersion(tableName, lastSyncedVersion);
+
+ // Increment the version for each action sequentially
+ actions.ForEach(action => action.Version = ++clientVersion);
+
+ // Filter actions to only include those that are newer than the client's last known version
+ actions = actions.Where(action => action.Version > lastSyncedVersion).ToList();
+
+ // Transform actions that have not been transformed yet
+ actions.Where(action => !action.IsTransformed).ToList()
+ .ForEach(action => CollaborativeEditingHandler.TransformOperation(action, actions));
+
+ // Serialize the filtered and transformed actions to JSON and return
+ return Newtonsoft.Json.JsonConvert.SerializeObject(actions);
+ }
+ catch (Exception ex)
+ {
+ // In case of an exception, return an empty JSON object
+ return "{}";
+ }
+ }
+
+```
+
+Full version of the code discussed about can be found in below GitHub location.
+
+GitHub Example: [`Collaborative editing examples`](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Collabrative-Editing)
diff --git a/ej2-asp-core-mvc/document-editor/comments.md b/ej2-asp-core-mvc/document-editor/comments.md
index db7e59d58c..aeae6d2a4d 100644
--- a/ej2-asp-core-mvc/document-editor/comments.md
+++ b/ej2-asp-core-mvc/document-editor/comments.md
@@ -18,7 +18,28 @@ Document editor allows to add comments to documents. You can add, navigate and r
Comments can be inserted to the selected text.
```typescript
-documentEditor.editor.insertComment("Test comment");
+documentEditor.editor.insertComment('Test comment');
+```
+
+## Add a New Comment with Date, Author, and Status
+
+Comments can be inserted into the selected text with a specified date, author, and status.
+
+```typescript
+// In this example, a comment with the text "Nancy Davolio" is added by the author Rachel Green on July 23, 2024, at 2:30 PM. The isResolved status is set to false.
+
+// Create a specific date: July 23, 2024, at 2:30:00 PM.
+let specificDate = new Date(2024, 6, 23, 14, 30, 0); // Note: July is represented by 6 (0-based index).
+
+// Define the properties of the comment including author, date, and resolution status.
+let commentProperties = {
+ author: 'Nancy Davolio', // The author of the comment.
+ dateTime: specificDate, // The date and time when the comment is created.
+ isResolved: false // The status of the comment; false indicates it is unresolved.
+};
+
+// Insert the comment with the specified properties into the document editor.
+documentEditor.editor.insertComment('Hello world', commentProperties);
```
## Add a New Comment with Date, Author, and Status
diff --git a/ej2-asp-core-mvc/document-editor/overview.md b/ej2-asp-core-mvc/document-editor/overview.md
index 41364f1ed6..04e4d3443c 100644
--- a/ej2-asp-core-mvc/document-editor/overview.md
+++ b/ej2-asp-core-mvc/document-editor/overview.md
@@ -36,11 +36,11 @@ The Document Editor component is used to create, edit, view, and print Word docu
## Supported Web platforms
-* [Javascript(ES5)](https://ej2.syncfusion.com/javascript/documentation/document-editor/getting-started/)
-* [Javascript](https://ej2.syncfusion.com/documentation/document-editor/getting-started/)
-* [Angular](https://ej2.syncfusion.com/angular/documentation/document-editor/getting-started/)
-* [React](https://ej2.syncfusion.com/react/documentation/document-editor/getting-started/)
-* [Vue](https://ej2.syncfusion.com/vue/documentation/document-editor/getting-started/)
-* [ASP.NET Core](https://ej2.syncfusion.com/aspnetcore/documentation/document-editor/getting-started-core/)
-* [ASP.NET MVC](https://ej2.syncfusion.com/aspnetmvc/documentation/document-editor/getting-started/)
-* [Blazor](https://blazor.syncfusion.com/documentation/document-editor/getting-started/server-side-application/)
\ No newline at end of file
+* [Javascript(ES5)](https://ej2.syncfusion.com/javascript/documentation/document-editor/getting-started)
+* [Javascript](https://ej2.syncfusion.com/documentation/document-editor/getting-started)
+* [Angular](https://ej2.syncfusion.com/angular/documentation/document-editor/getting-started)
+* [React](https://ej2.syncfusion.com/react/documentation/document-editor/getting-started)
+* [Vue](https://ej2.syncfusion.com/vue/documentation/document-editor/getting-started)
+* [ASP.NET Core](https://ej2.syncfusion.com/aspnetcore/documentation/document-editor/getting-started-core)
+* [ASP.NET MVC](https://ej2.syncfusion.com/aspnetmvc/documentation/document-editor/getting-started)
+* [Blazor](https://blazor.syncfusion.com/documentation/document-editor/getting-started/server-side-application)
\ 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/auto-generated-columns.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/auto-generated-columns.md
deleted file mode 100644
index 03d3797628..0000000000
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/auto-generated-columns.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-layout: post
-title: Auto Generated Columns in ##Platform_Name## Grid Component
-description: Learn here all about Auto Generated Columns in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
-platform: ej2-asp-core-mvc
-control: Auto Generated Columns
-publishingplatform: ##Platform_Name##
-documentation: ug
----
-
-# Auto Generated Columns
-
-The [`Columns`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html) are automatically generated when [`Columns`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html) declaration is empty or undefined while initializing the grid. All the columns in the [`DataSource`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DataSource) are bound as grid columns.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/auto/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Auto.cs" %}
-{% include code-snippet/grid/columns/auto/auto.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/auto/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Auto.cs" %}
-{% include code-snippet/grid/columns/auto/auto.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
-
-N> When columns are auto-generated, the column [`Type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Type) will be determined from the first record of the [`DataSource`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DataSource).
-
-## Set Primary key column for auto generated columns when editing is enabled
-
-Primary key can be defined in the declaration of column object of the grid. When you did not declare the columns, the grid will generate the columns automatically. For these auto generated columns, you can set [`IsPrimaryKey`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_IsPrimaryKey) column property as true by using the following ways,
-
-If Primary key "column index" is known then refer the following example
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/primary/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Primary.cs" %}
-{% include code-snippet/grid/columns/primary/primary.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/primary/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Primary.cs" %}
-{% include code-snippet/grid/columns/primary/primary.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
-
-N> If Primary key "column fieldname" is known then you can get the column by using **var column = grid.getColumnByField('OrderID')** and then set primary key by defining **Column.IsPrimaryKey = 'true'**
-
-## Set column options to auto generated columns
-
-You can set column options such as [`Format`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Format), [`Width`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Width) to the auto generated columns by using [`DataBound`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DataBound) event of the grid.
-
-In the below example, [`Width`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Width) is set for **OrderID** column, date type is set for **OrderDate** column and numeric type is set for **Freight** column.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/autocolumnformat/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Autocolumnformat.cs" %}
-{% include code-snippet/grid/columns/autocolumnformat/autocolumnformat.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/autocolumnformat/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Autocolumnformat.cs" %}
-{% include code-snippet/grid/columns/autocolumnformat/autocolumnformat.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
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" %}
+
+
+> 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 %}
+
+>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
+
-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" %}
+
+
+## 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 %}
+
+
+## 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 %}
+
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 %}
+
+
+
+> * 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 %}
+
+
+
+>* 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 %}
+
+
+
+## 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 %}
+
+
+
+>* 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 %}
+
+
+
+## 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 %}
+
+
+
+>* 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 %}
+
+
+
+
+**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 %}
+
+
+
+## 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 %}
+
+
+
+## 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 %}
+
+
+
+> * 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 %}
+
+
+
+### 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 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 %}
+
+
+
+>* 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 %}
+
+
+
+## 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 %}
+
+
+
+>* 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 %}
-
+
-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.
- 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 %}
+
+
+## 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
+
-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" %}
+
+
+## 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 %}
+
\ 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 %}
+
+
+
+> * 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 %}
+
+
+
+>* 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 %}
+
+
+
+## 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 %}
+
+
+
+>* 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 %}
+
+
+
+
+## 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 %}
+
+
+
+>* 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 %}
+
+
+
+**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 %}
+
+
+
+## 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
+ Size Modes Theme Studio Icons Figma UI Kits Feature modules Import Export Collaborative Editing Collaborative Editing
+
+ Images Shapes Text Wrapping Style Immutable Mode Columns
Common
@@ -847,7 +848,12 @@
Feature modules Import Export Collaborative Editing Collaborative Editing
+
+
Images Shapes Text Wrapping Style Immutable Mode Columns