Row Drag and Drop in ASP.NET CORE Gantt Component

3 Jan 202418 minutes to read

You can dynamically rearrange the rows in the Gantt control by using the AllowRowDragAndDrop property. Using this property, row drag and drop can be enabled or disabled in Gantt. Using this feature, rows can be dropped at above and below as a sibling or child to the existing rows.

<ejs-gantt id='DragAndDrop' dataSource="ViewBag.dataSource" height="450px" allowRowDragAndDrop="true" highlightWeekends="true" treeColumnIndex="1"
            projectStartDate="03/24/2019" projectEndDate="07/06/2019">
        <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" dependency="Predecessor"
            child="SubTasks">
        </e-gantt-taskfields>
   </ejs-gantt>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

Multiple row drag and drop

Gantt also supports dragging multiple rows at a time and drop them on any rows above, below, or at child positions. In Gantt, you can enable the multiple drag and drop by setting the SelectionSettings.Type to Multiple and you should enable the AllowRowDragAndDrop property.

<ejs-gantt id='DragAndDrop' dataSource="ViewBag.dataSource" height="450px" allowRowDragAndDrop="true" highlightWeekends="true" treeColumnIndex="1"
            projectStartDate="03/24/2019" projectEndDate="07/06/2019">
        <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" dependency="Predecessor"
                child="SubTasks">
        </e-gantt-taskfields>
        <e-gantt-selectionsettings type="Multiple"></e-gantt-selectionsettings>
  </ejs-gantt>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

Taskbar drag and drop between rows

The Gantt feature empowers users to efficiently reorganize records by seamlessly moving taskbar and rearranging their positions through a simple drag-and-drop action. Using this feature, rows can be dropped at above and below as a sibling or child to the existing rows.

This mode can be enable by setting the AllowTaskbarDragAndDrop property to true.

<ejs-gantt id='DragAndDrop' dataSource="ViewBag.dataSource" height="450px" allowRowDragAndDrop="true" allowTaskbarDragAndDrop="true" highlightWeekends="true" treeColumnIndex="1"
                projectStartDate="03/24/2019" projectEndDate="07/06/2019">
            <e-gantt-editsettings allowEditing="true" mode="Auto"></e-gantt-editsettings>
            <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" dependency="Predecessor"
                child="SubTasks">
            </e-gantt-taskfields>
        </ejs-gantt>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Drag and drop events

We provide various events to customize the row drag and drop action, the following table explains about the available events and its details.

Event Name Description
RowDragStartHelper Triggers when clicking the drag icon or Gantt row.
RowDragStart Triggers when drag action starts in Gantt.
RowDrag Triggers while dragging the Gantt row.
RowDrop Triggers when a drag row was dropped on the target row.

Customize row drag and drop action

In Gantt, the RowDragStartHelper and RowDrop events are triggered on row drag and drop action. Using this event, you can prevent dragging of particular record, validate the drop position, and cancel the drop action based on the target record and dragged record. The following topics explains about this.

Prevent dragging of particular record

You can prevent drag action of the particular record by setting the cancel property to true, which is available in the RowDragStartHelper event argument based on our requirement. In the following sample, drag action was restricted for first parent record and its child records.

<ejs-gantt id='DragAndDrop' dataSource="ViewBag.dataSource" height="450px" rowDragStartHelper="rowDragStartHelper" allowRowDragAndDrop="true" highlightWeekends="true" treeColumnIndex="1"
        projectStartDate="03/24/2019" projectEndDate="07/06/2019">
        <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" dependency="Predecessor"
            child="SubTasks">
        </e-gantt-taskfields>
    </ejs-gantt>
	
	<script>
       function rowDragStartHelper(args) {
           var record = args.data[0] ? args.data[0] : args.data;
           var taskId = record.ganttProperties.taskId;
           if (taskId <= 4) {
               args.cancel = true;
           }
       }
	</script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Validating drop position

You can prevent drop action based on the drop position and target record, by this, you can prevent dropping particular task on a specific task or specific position. This can be achieved by setting the cancel property to true, which is available in the RowDrop event argument.

In the following sample, we have prevented the drop action based on the position. In this sample, you cannot drop row as child in any of the available rows.

<ejs-gantt id='DragAndDrop' dataSource="ViewBag.dataSource" height="450px" rowDrop="rowDrop" allowRowDragAndDrop="true" highlightWeekends="true" treeColumnIndex="1"
        projectStartDate="03/24/2019" projectEndDate="07/06/2019">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" dependency="Predecessor"
            child="SubTasks">
    </e-gantt-taskfields>
</ejs-gantt>

<script>
        function rowDrop(args) {
            if (args.dropPosition == "middleSegment") {
                args.cancel = true;
            }
        }
</script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Prevent reordering a row as child to another row

You can prevent the default behavior of dropping rows as children to the target by setting the cancel property to true in rowDrop event argument. You can also change the drop position after cancelling using reorderRows method.

In the below example drop action is cancelled and dropped above to target row.

@{
    var data = GanttDataSource.ganttData();
}
<ejs-gantt id='DragAndDrop' dataSource="@data" height="450px" rowDrop="rowDrop" allowRowDragAndDrop="true" highlightWeekends="true" treeColumnIndex="1"
        projectStartDate="03/24/2019" projectEndDate="07/06/2019">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" dependency="Predecessor"
            child="SubTasks">
    </e-gantt-taskfields>
</ejs-gantt>

<script>
        function rowDrop(args) {
            if (args.dropPosition == 'middleSegment') {
              var ganttObj = document.getElementById('DragAndDrop').ej2_instances[0];    
              args.cancel = true;
              ganttObj.reorderRows([args.fromIndex], args.dropIndex, 'above');
            }
        }
</script>
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(ganttData());
    }
    public static List<GanttDataSource> ganttData()
    {
        List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();

        GanttDataSource Record1 = new GanttDataSource()
        {
            TaskId = 1,
            TaskName = "Project initiation",
            StartDate = new DateTime(2019, 04, 02),
            EndDate = new DateTime(2019, 04, 21),
            SubTasks = new List<GanttDataSource>(),
        };
        GanttDataSource Child1 = new GanttDataSource()
        {
            TaskId = 2,
            TaskName = "Identify site location",
            StartDate = new DateTime(2019, 04, 02),
            Duration = 4,
            Progress = 70,

        };
        GanttDataSource Child2 = new GanttDataSource()
        {
            TaskId = 3,
            TaskName = "Perform soil test",
            StartDate = new DateTime(2019, 04, 02),
            Duration = 4,
            Progress = 50

        };
        GanttDataSource Child3 = new GanttDataSource()
        {
            TaskId = 4,
            TaskName = "Soil test approval",
            StartDate = new DateTime(2019, 04, 02),
            Duration = 4,
            Progress = 50
        };
        Record1.SubTasks.Add(Child1);
        Record1.SubTasks.Add(Child2);
        Record1.SubTasks.Add(Child3);

        GanttDataSource Record2 = new GanttDataSource()
        {
            TaskId = 5,
            TaskName = "Project estimation",
            StartDate = new DateTime(2019, 04, 02),
            EndDate = new DateTime(2019, 04, 21),
            SubTasks = new List<GanttDataSource>()
        };
        GanttDataSource Child4 = new GanttDataSource()
        {
            TaskId = 6,
            TaskName = "Develop floor plan for estimation",
            StartDate = new DateTime(2019, 04, 04),
            Duration = 3,
            Progress = 70
        };
        GanttDataSource Child5 = new GanttDataSource()
        {
            TaskId = 7,
            TaskName = "List materials",
            StartDate = new DateTime(2019, 04, 04),
            Duration = 3,
            Progress = 50
        };
        Record2.SubTasks.Add(Child4);
        Record2.SubTasks.Add(Child5);

        GanttDataSourceCollection.Add(Record1);
        GanttDataSourceCollection.Add(Record2);

        return GanttDataSourceCollection;
    }
}
public class GanttDataSource
{
    public int TaskId { get; set; }
    public string TaskName { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public int? Duration { get; set; }
    public int Progress { get; set; }
    public List<GanttDataSource> SubTasks { get; set; }
}

Perform row drag and drop action programmatically

Gantt provides option to perform row drag and drop action programmatically by using the reorderRows method, this method can be used for any external actions like button click. The following arguments are used to specify the positions to drag and drop a row:

  • fromIndexes: Index value of source(dragging) row.
  • toIndex: Value of target index.
  • position: Drop positions such as above, below, or child.

The following code example shows how to drag and drop a row on button click action.

<ejs-button id="DynamicDrag" content="Drop records as child" cssClass="e-primary"></ejs-button>
        <ejs-gantt id='DragAndDrop' dataSource="ViewBag.dataSource" height="450px" allowRowDragAndDrop="true" highlightWeekends="true" treeColumnIndex="1"
                projectStartDate="03/24/2019" projectEndDate="07/06/2019">
            <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" dependency="Predecessor"
                child="SubTasks">
            </e-gantt-taskfields>
        </ejs-gantt>
		
		<script>
		    document.getElementById('DynamicDrag').addEventListener('click', function () {
			    var ganttObj = document.getElementById('DragAndDrop').ej2_instances[0];
                ganttObj.reorderRows([1, 2, 3], 4, 'child');
            });
		</script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}