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 tofalse
.
Reorder Events
During the reorder action, the gantt component triggers the below three events.
- The
columnDragStart
event triggers when column header element drag (move) starts. - The
columnDrag
event triggers when column header element is dragged (moved) continuously. - 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();
}