Resource Multi Taskbar in EJ2 JavaScript Gantt Chart Control

27 May 202612 minutes to read

The resource multi taskbar feature in the EJ2 JavaScript Gantt Chart control visualizes multiple tasks assigned to a single resource in one row when collapsed in resource view, enabled by setting enableMultiTaskbar to true and viewType to ResourceView. This displays workloads, such as concurrent tasks assigned to a resource, like coding activities, in a compact timeline, highlighting overallocation or scheduling conflicts. Taskbars maintain individual properties (e.g., duration, progress) and support editing in collapsed rows, with expand/collapse controlled via grid-side arrows for visual consistency. The feature requires valid resourceInfo mappings in taskFields to associate tasks with resources. Taskbars include ARIA labels for accessibility and adapt to responsive designs, though narrow screens may clip labels for short tasks. By default, enableMultiTaskbar is false, requiring explicit activation.

Configure multi taskbar

Enable the multi taskbar feature by setting enableMultiTaskbar to true and viewType to ResourceView, with taskFields.resourceInfo mapping to a resource ID field. Resources are collapsed or expanded using grid-side arrows, and tasks are displayed in a single row when collapsed.

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '450px',
    enableMultiTaskbar: true,
    viewType: 'ResourceView',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        resourceInfo: 'Resources'
    }
});

ganttChart.appendTo('#Gantt');

The following example demonstrates multi taskbar configuration:

var gantt = new ej.gantt.Gantt({
    dataSource: data,
    height: '450px',
    treeColumnIndex: 1,
    viewType: 'ResourceView',
    allowSelection: true,
    allowResizing: true,
    highlightWeekends: true,
    showOverAllocation: true,
    enableMultiTaskbar: true,
    projectStartDate: new Date('03/28/2019'),
    projectEndDate: new Date('05/18/2019'),
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        resourceInfo: 'Resources',
        expandState: 'IsExpand',
        parentID: 'ParentID'
    },
    resourceFields: {
        id: 'ResourceId',
        name: 'ResourceName',
        unit: 'Unit',
        group: 'ResourceGroup'
    },
    editSettings: {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    },
    toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'],
    labelSettings: {
        rightLabel: 'Resources',
        taskLabel: 'TaskName'
    },
    resources: resourceCollection,
    columns: [
        { field: 'TaskID' },
        { field: 'TaskName', headerText: 'Task Name', width: 180 },
        { field: 'work', headerText: 'Work' },
        { field: 'Progress' },
        { field: 'ResourceGroup', headerText: 'Group' },
        { field: 'StartDate' },
        { field: 'Duration' }
    ]
});

gantt.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">

<head>
  <title>EJ2 Gantt</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Typescript Gantt Controls">
  <meta name="author" content="Syncfusion">
  <link href="index.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
  <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
  <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
  <div id="container">
    <div id="Gantt"></div>
  </div>
  <script>
    var ele = document.getElementById('container');
    if (ele) {
      ele.style.visibility = "visible";
    }   
  </script>
  <script src="index.js" type="text/javascript"></script>
</body>

</html>

Configure taskbar overlap

The allowTaskbarOverlap property controls how multiple taskbars are displayed in a resource row:

  • Overlapping mode (true, default): Taskbars overlap within standard row height, supporting full dependency connections, including between tasks of the same resource. Suitable for compact views with many tasks.
  • Non-overlapping mode (false): Taskbars are vertically arranged in an extended row height, preventing overlap for clearer visibility of overallocation. Dependencies between tasks of the same resource are not supported due to vertical stacking, though inter-resource dependencies work.

The following example disables taskbar overlap:

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '450px',
    viewType: 'ResourceView',
    enableMultiTaskbar: true,
    allowTaskbarOverlap: false,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        resourceInfo: 'Resources'
    }
});

ganttChart.appendTo('#Gantt');

The following example demonstrates non-overlapping multi taskbar:

var ganttChart = new ej.gantt.Gantt({
    dataSource: data,
    height: '450px',
    treeColumnIndex: 1,
    viewType: 'ResourceView',
    allowSelection: true,
    allowResizing: true,
    highlightWeekends: true,
    showOverAllocation: true,
    enableMultiTaskbar: true,
    allowTaskbarOverlap: false,
    projectStartDate: new Date('03/28/2019'),
    projectEndDate: new Date('05/18/2019'),
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        resourceInfo: 'Resources',
        expandState: 'IsExpand',
        parentID: 'ParentID'
    },
    resourceFields: {
        id: 'ResourceId',
        name: 'ResourceName',
        unit: 'Unit',
        group: 'ResourceGroup'
    },
    editSettings: {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    },
    toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'],
    labelSettings: {
        rightLabel: 'Resources',
        taskLabel: 'TaskName'
    },
    resources: resourceCollection,
    columns: [
        { field: 'TaskID' },
        { field: 'TaskName', headerText: 'Task Name', width: 180 },
        { field: 'work', headerText: 'Work' },
        { field: 'Progress' },
        { field: 'ResourceGroup', headerText: 'Group' },
        { field: 'StartDate' },
        { field: 'Duration' }
    ]
});

ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">

<head>
  <title>EJ2 Gantt</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Typescript Gantt Controls">
  <meta name="author" content="Syncfusion">
  <link href="index.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
  <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
  <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
  <div id="container">
    <div id="Gantt"></div>
  </div>
  <script>
    var ele = document.getElementById('container');
    if (ele) {
      ele.style.visibility = "visible";
    }   
  </script>
  <script src="index.js" type="text/javascript"></script>
</body>

</html>