Reorder

24 Feb 20225 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 property to true.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowReordering="true"  height="315">   
    <e-grid-columns>
        <e-grid-column field="EmployeeID" headerText="Employee ID"  width="100"></e-grid-column>
        <e-grid-column field="FirstName" headerText="First Name"  width="120"></e-grid-column>
        <e-grid-column field="Title" headerText="Title" width="100"></e-grid-column>
        <e-grid-column field="BirthDate" headerText="Birth Date" width="100" format="yMd"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
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 e-grid-column as 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.

<ejs-button id="ReorderSingleCols" content="Reorder Name Column to Last"></ejs-button>
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowReordering="true" height="315">   
    <e-grid-columns>
        <e-grid-column field="EmployeeID" headerText="Employee ID"  width="100"></e-grid-column>
        <e-grid-column field="FirstName" headerText="Name"  width="120"></e-grid-column>
        <e-grid-column field="Title" headerText="Title" width="100"></e-grid-column>
        <e-grid-column field="BirthDate" headerText="Birth Date" width="100" format="yMd"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>

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

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

Reorder multiple columns

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

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

<ejs-button id="reorderMultipleCols" content="Reorder Name and Title to Last"></ejs-button>
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowReordering="true"  height="315">   
    <e-grid-columns>
        <e-grid-column field="EmployeeID" headerText="Employee ID"  width="100"></e-grid-column>
        <e-grid-column field="FirstName" headerText="Name"  width="120"></e-grid-column>
        <e-grid-column field="Title" headerText="Title" width="100"></e-grid-column>
        <e-grid-column field="BirthDate" headerText="Birth Date" width="100" format="yMd"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>

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

</script>
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.
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowReordering="true" height="315" columnDragStart="columnDragStart"
columnDrag="columnDrag" columnDrop="columnDrop">   
    <e-grid-columns>
        <e-grid-column field="EmployeeID" headerText="Employee ID"  width="100"></e-grid-column>
        <e-grid-column field="FirstName" headerText="First Name"  width="120"></e-grid-column>
        <e-grid-column field="Title" headerText="Title" width="100"></e-grid-column>
        <e-grid-column field="BirthDate" headerText="Birth Date" width="100" format="yMd"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

  <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();
}