Column Spanning in gantt control

2 Sep 20225 minutes to read

The gantt has option to span the adjacent cells. You need to define the colSpan attribute to span cells in the QueryCellInfo event.

In the following demo, Work 1 cells have been spanned.

CSHTML

<ejs-gantt id='Gantt' dataSource="ViewBag.DataSource" height="550px" gridLines="Both" treeColumnIndex="1"
           queryCellInfo="QueryCellEvent" >
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                        endDate="EndDate" duration="Duration" progress="Progress" dependency="Predecessor" child="SubTasks">
    </e-gantt-taskfields>
    <e-gantt-columns>
        <e-gantt-column field="TaskId"></e-gantt-column>
        <e-gantt-column field="TaskName" headerText="Name" width="250"></e-gantt-column>
        <e-gantt-column field="work1" headerText="Work-1"></e-gantt-column>
        <e-gantt-column field="work2" headerText="Work-2"></e-gantt-column>
        <e-gantt-column field="Progress"></e-gantt-column>
        <e-gantt-column field="StartDate"></e-gantt-column>
        <e-gantt-column field="Duration"></e-gantt-column>
    </e-gantt-columns>
</ejs-gantt>
<script>
    function QueryCellEvent(args) {
        switch (args.data.TaskID) {
            case 1:
                if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
                    args.colSpan = 2;
                }
                break;
            case 2:
                if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
                    args.colSpan = 2;
                }
                break;
            case 3:
                if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
                    args.colSpan = 2;
                }
                break;
            case 4:
                if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
                    args.colSpan = 2;
                }
                break;
            case 5:
                if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
                    args.colSpan = 2;
                }
                break;
            case 7:
                if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
                    args.colSpan = 2;
                }
                break;
        }
    }
</script>

ColSpan.cs

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