RadiantQ jQuery Gantt Package
Enable Row Drag and Drop
Previous Topic  Next Topic 

Enabling Row Drag and Drop

Row drag and drop in the table view is disabled by default in the Gantt. You can however enable/disable this feature by setting the gantt's CanUserReorderRows option to true/false. When enabled, by moving the mouse over the row header will provide you a drag cue using which you can drag one or more selected rows:

Drag cue to help drag selected rows

You can then move the selected row(s) to a new position, in between other tasks. However, you can also drop them as children of another task with the below setting.

Drop as Child

By default, the gantt lets you drop the selected tasks above or below another existing task like this:

Dragging a task next to another task

However, you can optionally also allow dropping a set of tasks as a child of another task when the mouse is over the middle of this destination task. You can turn this feature on with the EnableDropAsChild property:

          var $gantt_container = $('#gantt_container');

            $gantt_container.GanttControl({

                CanUserReorderRows: true,

                EnableDropAsChild: true,

                ...............

                ...............

                GanttChartTemplateApplied: function (sender , args) {

                ...............

                }

            });


Dropping a task into another task to make it a child of that task.

Drag Events

Before dragging starts, the GanttControl.BeforeRowsDragStart  event is raised to allow you to prevent dragging for specific rows. The arguments for this event allow you to cancel some row-drags selectively:

            var ganttcontrol = $gantt_container.data('GanttControl');

            ganttcontrol.BeforeRowsDragStart.subscribe(function (args) {

                var rowIndex = args.DragRowIndex;

                if (rowIndex == 0) {

                // Can it should be drag? If not, set args.Cancel = true;

                }


                var dragTask = ganttControl.ActivityViews[rowIndex].Activity;

                if (dragTask._name == 'Task 3') {

                // Can it should be drag? If not, set args.Cancel = true;

                }

            });


While dragging, the GanttControl.SelectedRowsDrag event is raised to allow you to selectively disallow dragging tasks into some locations. The arguments for this event allow you to cancel some drop positions selectively:

            var ganttcontrol = $gantt_container.data('GanttControl');

            ganttcontrol.SelectedRowsDrag.subscribe(function (args) {

                var dragOverRowIndex = args.DragOverRowIndex;

                // Note that "SelectedItem" will give you the parent of Activity.

                if (dragOverRowIndex == 0) {

                // Can it dropped way on top? If not, set args.Cancel = true;

                }

                else if (dragOverRowIndex == ganttcontrol.ActivitiesViews.length) {

                    // can the selected task be dropped way at the bottom? If not, set args.Cancel = true;

                }

                else {

                    var dropTask = ganttControl.ActivityViews[dragOverRowIndex];

                    // Can the selected task be dropped above this?

                }


                // To prevent dragging tasks at the top level.

                if (selectedTask.IndentLevel == 0)

                    args.Cancel = true;

            });


A sample that illustrates this feature can be located here in the install:

In HTML                : ..\Samples\GanttControlCustomDataBinding.htm. 

In ASP.NET MVC     : ..\Views\Home\ProjectGantt\GanttControlCustomDataBinding.cshtml.

In ASP.NET            : ..\Samples\ProjectGantt\GanttControlCustomDataBinding.aspx.



© RadiantQ 2022. All Rights Reserved.