Reorder

25 Feb 20224 minutes to read

Reordering can be done by drag and drop of a particular column header from one index to another index within the grid. To enable reordering, set the AllowReordering to true.

@Html.EJS().Grid("Reorder").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowReordering().Columns(col =>
{
   col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("FirstName").HeaderText("Name").Width("125").Add();
   col.Field("Title").HeaderText("Title").Width("190").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("HireDate").HeaderText("Hire Date").Width("135").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();

}).Render()
public IActionResult Index()
{
    var Emp = EmployeeDetails.GetAllRecords();
    ViewBag.DataSource = Emp;
    return View();
}

You can disable reordering a particular column by setting the AllowReordering property of Columns to false.

Reorder single column

Grid have option to reorder Columns either by Interaction or by using the reorderColumns method. In the below sample, Name column is reordered to last column position by using the method.

@Html.EJS().Button("ReorderSingleCols").Content("Reorder Name Column to Last").Render()

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowReordering().Columns(col =>
 {
     col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
     col.Field("FirstName").HeaderText("Name").Width("125").Add();
     col.Field("City").HeaderText("City").Width("190").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
     col.Field("Country").HeaderText("Country").Width("135").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

 }).Render()

<script>

    document.getElementById("ReorderSingleCols").onclick = function () {
        var grid = document.getElementById("Grid").ej2_instances[0];
        grid.reorderColumns('FirstName', 'Country');
    }

</script>
public IActionResult Index()
{
    var Emp = EmployeeDetails.GetAllRecords();
    ViewBag.DataSource = Emp;
    return View();
}

Reorder multiple columns

User can reorder a single column at a time by Interaction. Sometimes we need to have reorder multiple columns at the same time, It can be achieved through programmatically by using reorderColumns method.

In the below sample, Ship City and Ship Region column is reordered to last column position.

@Html.EJS().Button("ReorderMultipleCols").Content("Reorder Name and City to Last").Render()

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowReordering().Columns(col =>
{
    col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("FirstName").HeaderText("Name").Width("125").Add();
    col.Field("City").HeaderText("City").Width("190").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("Country").HeaderText("Country").Width("135").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

}).Render()

<script>

    document.getElementById("ReorderMultipleCols").onclick = function () {
        var grid = document.getElementById("Grid").ej2_instances[0];
        grid.reorderColumns(['FirstName', 'City'], 'Country');
    }

</script>
public IActionResult Index()
{
    var Emp = EmployeeDetails.GetAllRecords();
    ViewBag.DataSource = Emp;
    return View();
}

Reorder events

During the reorder action, the grid component triggers the below three events.

  1. The ColumnDragStart event triggers when column header element drag (move) starts.
  2. The ColumnDrag event triggers when column header element is dragged (moved) continuously.
  3. The ColumnDrop event triggers when a column header element is dropped on the target column.
@Html.EJS().Grid("Reorder").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowReordering().Columns(col =>
{
    col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("FirstName").HeaderText("Name").Width("125").Add();
    col.Field("City").HeaderText("City").Width("190").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("Country").HeaderText("Country").Width("135").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

}).ColumnDragStart("columnDragStart").ColumnDrag("columnDrag").ColumnDrop("columnDrop").Render()

<script>

    function columnDragStart() {
        alert('columnDragStart event is triggered')
    }
    function columnDrag() {
        alert('columnDrag event is triggered')
    }
    function columnDrop() {
        alert('columnDrop event is triggered')
    }

</script>
public IActionResult Index()
{
    var Emp = EmployeeDetails.GetAllRecords();
    ViewBag.DataSource = Emp;
    return View();
}