Documentation(960320) - Need to add the new topic Reorder column base…

ej2-asp-core-mvc/code-snippet/grid/columns/reorderColumnByModel/razor

@@ -0,0 +1,31 @@
+<div style="padding:0px 0px 20px 0px">
+    @Html.EJS().Button("reorderColumn").CssClass("e-info").Content("Reorder Column").Render()
+    @Html.EJS().Button("reorderChildColumn").CssClass("e-info").Content("Reorder Stacked ChildColumn").Render()
+</div>
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowReordering().Columns(col =>
+{
+col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+col.Field("CustomerID").HeaderText("Customer ID").Width("100").Add();
+col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+col.HeaderText("Order Details").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Columns(new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { Field = "OrderDate", Width = "150", HeaderText = "Order Date", Format="yMd"},
+        new Syncfusion.EJ2.Grids.GridColumn { Field = "EmployeeID", Width = "130", HeaderText = "EmployeeID"} }).Add();
+col.HeaderText("Shipped Details").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Columns(new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { Field = "ShipName", Width = "140"},
+        new Syncfusion.EJ2.Grids.GridColumn { Field = "ShipCountry", Width = "145",  HeaderText = "Ship Country", MinWidth="10", EditType="dropdownedit" } }).Add();
+}).Render()
+<style>
+    .e-btn.e-info, .e-css.e-btn.e-info {
+        margin-right: 4px;
+        margin-bottom: 3px;
+    }
+</style>
+<script type="text/javascript">
+    document.getElementById('reorderColumn').addEventListener('click', function () {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.reorderColumnByModel(grid.columns[3], grid.columns[1]);
+    });
+    document.getElementById('reorderChildColumn').addEventListener('click', function () {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+         var shipInfo = grid.columns[4];
+         grid.reorderColumnByModel(shipInfo.columns[1], shipInfo.columns[0]);
+    });
+</script>

ej2-asp-core-mvc/code-snippet/grid/columns/reorderColumnByModel/reorder.cs

@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 

ej2-asp-core-mvc/code-snippet/grid/columns/reorderColumnByModel/tagHelper

@@ -0,0 +1,34 @@
+<div style="padding:0px 0px 20px 0px">
+    <ejs-button id='reorderColumn' cssClass='e-info' content="Reorder Column"></ejs-button>
+    <ejs-button id='reorderChildColumn' cssClass='e-info' content="Reorder Stacked ChildColumn"></ejs-button>
+</div>
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowReordering='true'>
+    <e-grid-columns>
+        <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width="120"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="100"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format='C2' textAlign="Right" width="130"></e-grid-column>
+        <e-grid-column headerText="Order Details" textAlign="Center"
+            columns="@( new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { Field = "OrderDate", Width = "130", HeaderText = "Order Date", Format="yMd"},
+                new Syncfusion.EJ2.Grids.GridColumn { Field = "EmployeeID", Width = "150", HeaderText = "EmployeeID"} } )"
+                width="130"></e-grid-column>
+        <e-grid-column headerText="Shipped Details" textAlign="Center" columns="@( new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { Field = "ShipName", Width = "140", HeaderText = "ShipName" },
+            new Syncfusion.EJ2.Grids.GridColumn { Field = "ShipCountry", Width = "145", HeaderText = "Ship Country"} } )">
+    </e-grid-columns>
+</ejs-grid>
+<style>
+    .e-btn.e-info, .e-css.e-btn.e-info {
+        margin-right: 4px;
+        margin-bottom: 3px;
+    }
+</style>
+<script type="text/javascript">
+    document.getElementById('reorderColumn').addEventListener('click', function () {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.reorderColumnByModel(grid.columns[3], grid.columns[1]);
+    });
+    document.getElementById('reorderChildColumn').addEventListener('click', function () {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        var shipInfo = grid.columns[4];
+        grid.reorderColumnByModel(shipInfo.columns[1], shipInfo.columns[0]);
+    });
+</script>

ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-reorder.md

@@ -115,6 +115,30 @@ Here is an example of how to use the `reorderColumns` method to reorder single c
 
 ![Reorder column based on field names](../images/column-reorder/column-reorder-field.gif)
 
+### Reorder columns using the column model (ideal for stacked headers)
+
+Previously, column reordering in the Grid was handled using methods like `reorderColumnByIndex`, `reorderColumns`, and `reorderColumnByTargetIndex`. These methods allowed reordering based on field names or index positions and were suitable for simple, flat column structures.
+
+To reorder stacked header columns, use the `reorderByColumnModel` method. It enables reordering by passing complete column model objects. This method is specifically designed to support `stacked header columns`, but it also works with normal column configurations.
+
+The `reorderColumnByModel` method accepts two arguments:
+
+* **fromColumn**: The column object that you want to move.
+* **toColumn**: The target column object before which the **fromColumn** should be placed.
+
+In this example, **Order Details** is moved before **Customer Name**, and **Ship Country** is moved before **Ship Name** within **Ship Details**, showing how `reorderColumnByModel` method reorders both normal and stacked header columns using a button click.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/reorderColumnByModel/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Reorder.cs" %}
+{% include code-snippet/grid/columns/reorderColumnByModel/reorder.cs %}
+{% endhighlight %}
+{% endtabs %} 
+
+![Column reorder by columnmodel](../images/column-reorder/columreorderByColumnModel.gif)
+
 ## Reorder events
 
 When reordering columns in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid component, you may want to take some specific action in response to the drag and drop events. To handle these events, you can define event handlers for the following events:
@@ -136,4 +160,4 @@ In the following example, we have implemented the `ColumnDragStart`, `ColumnDrag
 {% endhighlight %}
 {% endtabs %}
 
-![Reorder events](../images/column-reorder/column-reorder-events.gif)
+![Reorder events](../images/column-reorder/column-reorder-events.gif)

ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-reorder.md

@@ -115,6 +115,30 @@ Here is an example of how to use the `reorderColumns` method to reorder single c
 
 ![Reorder column based on field names](../images/column-reorder/column-reorder-field.gif)
 
+### Reorder columns using the column model (ideal for stacked headers)
+
+Previously, column reordering in the Grid was handled using methods like `reorderColumnByIndex`, `reorderColumns`, and `reorderColumnByTargetIndex`. These methods allowed reordering based on field names or index positions and were suitable for simple, flat column structures.
+
+To reorder stacked header columns, use the `reorderByColumnModel` method. It enables reordering by passing complete column model objects. This method is specifically designed to support `stacked header columns`, but it also works with normal column configurations.
+
+The `reorderColumnByModel` method accepts two arguments:
+
+* **fromColumn**: The column object that you want to move.
+* **toColumn**: The target column object before which the **fromColumn** should be placed.
+
+In this example, **Order Details** is moved before **Customer Name**, and **Ship Country** is moved before **Ship Name** within **Ship Details**, showing how `reorderColumnByModel` method reorders both normal and stacked header columns using a button click.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/columns/reorderColumnByModel/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Reorder.cs" %}
+{% include code-snippet/grid/columns/reorderColumnByModel/reorder.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Column reorder by columnmodel](../images/column-reorder/columreorderByColumnModel.gif)
+
 ## Reorder events
 
 When reordering columns in the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Grid component, you may want to take some specific action in response to the drag and drop events. To handle these events, you can define event handlers for the following events: