Column Spanning in gantt control

2 Sep 20224 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.

@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"))
    .GridLines(Syncfusion.EJ2.Gantt.GridLine.Both)
    .QueryCellInfo("QueryCellEvent")
        .Columns(col =>
        {
            col.Field("TaskId").Add();
            col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
            col.Field("work1").HeaderText("Work 1").Width(180).Add();
            col.Field("work2").HeaderText("Work 2").Width(180).Add();
            col.Field("StartDate").HeaderText("StartDate").Width(160).Add();
            col.Field("Duration").Width(100).Add();
            col.Field("Progress").Width(100).Add();
        })
        .Render()
<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>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text