Column reordering in gantt control

21 Dec 20223 minutes to read

The column reordering can be done by dragging a column header from one index to another index within the TreeGrid. To enable reordering, set the AllowReordering property to true.

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").AllowReordering(
                true).TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration(
                    "Duration").Progress("Progress").Child("SubTasks")).Render()
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

NOTE

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

Reorder Events

During the reorder action, the gantt 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().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id("TaskId").Name(
    "TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")).EditSettings(es =>
        es.AllowEditing(true)).AllowReordering(true)
        .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()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Reorder multiple columns

Multiple columns can be reordered at a time by using the reorderColumns method.

@Html.EJS().Button("reorderMultipleCols").Content("Reorder Task ID and Task Name to Last").Render()
        @Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").AllowReordering(
            true).TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress(
                "Progress").Child("SubTasks")).Render()
        
	<script>
        document.getElementById("reorderMultipleCols").addEventListener('click', () => {
            var ganttObj = document.getElementById("Gantt").ej2_instances[0];
            ganttObj.reorderColumns(['TaskId', 'TaskName'], 'Progress');

        });
    </script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}