Reorder Rows through Click-Move-Click

As of Telerik UI for ASP.NET MVC UI R2 SP1 2023, users can reorder the Gantt's TreeList rows by using the click-move-click functionality provided by the Editable.ClickMoveClick option. To use this functionality, you must also add a .Draggable() column that allows the draggable icon to appear. Once enabled, users can move the row by clicking the icon to start moving the row, and then clicking again to place the row in its new position.

    @(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
        .Name("gantt")
        .Columns(columns =>
        {
            columns.Draggable().Width(70);
            columns.Bound(c => c.TaskID).Title("ID").Width(50);
            columns.Bound(c => c.Title).Editable(true).Sortable(true);
            columns.Bound(c => c.Start).Width(100).Editable(true).Sortable(true);
            columns.Bound(c => c.End).Width(100).Editable(true).Sortable(true);
        })
        .Editable(editable => editable.ClickMoveClick(true))
        .DataSource(d => d
            .Model(m =>
            {
                m.Id(f => f.TaskID);
                m.ParentId(f => f.ParentID);
                m.Field(f => f.Expanded).DefaultValue(true);
            })
            .Read("Columns_ReadTasks", "Gantt")
            .Destroy("Columns_DestroyTask", "Gantt")
            .Update(update => update.Action("Columns_UpdateTask", "Gantt"))
            .Create(create => create.Action("Columns_CreateTask", "Gantt"))
        )
        .DependenciesDataSource(d => d
            .Model(m =>
            {
                m.Id(f => f.DependencyID);
                m.PredecessorId(f => f.PredecessorID);
                m.SuccessorId(f => f.SuccessorID);
            })
            .Read("Columns_ReadDependencies", "Gantt")
            .Create("Columns_CreateDependency", "Gantt")
            .Destroy("Columns_DestroyDependency", "Gantt")
        )
    )

Reorder Rows by Dragging and Dropping

You can enable users to reorder the Gantt's TreeList rows by using the drag and drop functionality provided by the .Editable.Reorder configuration option.

The following example demonstrates how you can reorder the TreeList rows of the Gantt component using drag and drop:

    @(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
        .Name("gantt")
        .Columns(columns =>
        {
            columns.Bound(c => c.TaskID).Title("ID").Width(50);
            columns.Bound(c => c.Title).Editable(true).Sortable(true);
            columns.Bound(c => c.Start).Width(100).Editable(true).Sortable(true);
            columns.Bound(c => c.End).Width(100).Editable(true).Sortable(true);
        })
        .Editable(editable => editable.Reorder(true))
        .DataSource(d => d
            .Model(m =>
            {
                m.Id(f => f.TaskID);
                m.ParentId(f => f.ParentID);
                m.Field(f => f.Expanded).DefaultValue(true);
            })
            .Read("Columns_ReadTasks", "Gantt")
            .Destroy("Columns_DestroyTask", "Gantt")
            .Update(update => update.Action("Columns_UpdateTask", "Gantt"))
            .Create(create => create.Action("Columns_CreateTask", "Gantt"))
        )
        .DependenciesDataSource(d => d
            .Model(m =>
            {
                m.Id(f => f.DependencyID);
                m.PredecessorId(f => f.PredecessorID);
                m.SuccessorId(f => f.SuccessorID);
            })
            .Read("Columns_ReadDependencies", "Gantt")
            .Create("Columns_CreateDependency", "Gantt")
            .Destroy("Columns_DestroyDependency", "Gantt")
        )
    )