Resource Multi Taskbar in React Gantt Chart Component

12 Mar 202624 minutes to read

The resource multi taskbar feature in the React Gantt Chart component 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.

function App() {
    const enableMultiTaskbar: boolean = true;
    const viewType: string = 'ResourceView';
    const taskSettings: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        resourceInfo: 'Resources'
    };
    return (
        <GanttComponent
            enableMultiTaskbar={enableMultiTaskbar}
            viewType={viewType}
            taskFields={taskSettings}
        />
    );
}

The following example demonstrates multi taskbar configuration:

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Edit, Selection, Toolbar, RowDD } from '@syncfusion/ej2-react-gantt';
import { data, resourceCollection } from './datasource';
function App() {
    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        resourceInfo: 'Resources',
        expandState: 'IsExpand',
        parentID: 'ParentID'
    };
    const resourceFields = {
        id: 'ResourceId',
        name: 'ResourceName',
        unit: 'Unit',
        group: 'ResourceGroup'
    };
    const editSettings = {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    };
    const toolbarOptions = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'];
    const labelSettings = {
        rightLabel: 'Resources',
        taskLabel: 'TaskName'
    };
    const projectStartDate = new Date('03/28/2019');
    const projectEndDate = new Date('05/18/2019');
    return <GanttComponent id='root' dataSource={data} treeColumnIndex={1} viewType='ResourceView' allowSelection={true} allowResizing={true} highlightWeekends={true} toolbar={toolbarOptions} editSettings={editSettings} projectStartDate={projectStartDate} projectEndDate={projectEndDate}
        resourceFields={resourceFields} taskFields={taskFields} labelSettings={labelSettings}
        resources={resourceCollection} showOverAllocation={true} enableMultiTaskbar={true}>
        <ColumnsDirective>
            <ColumnDirective field='TaskID' > </ColumnDirective>
            <ColumnDirective field='TaskName' headerText='Task Name' width='180' > </ColumnDirective>
            <ColumnDirective field='work' headerText='Work' > </ColumnDirective>
            <ColumnDirective field='Progress' > </ColumnDirective>
            <ColumnDirective field='ResourceGroup' headerText='Group' > </ColumnDirective>
            <ColumnDirective field='StartDate' > </ColumnDirective>
            <ColumnDirective field='Duration' > </ColumnDirective>
        </ColumnsDirective>
        <Inject services={[Toolbar, Edit, Selection, RowDD]} />
    </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Edit, Selection, Toolbar, RowDD, TaskFieldsModel, ResourceFieldsModel, EditSettingsModel, ToolbarItem, LabelSettingsModel } from '@syncfusion/ej2-react-gantt';
import { data, resourceCollection } from './datasource';
function App() {
    const taskFields: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        resourceInfo: 'Resources',
        expandState: 'IsExpand',
        parentID: 'ParentID'
    };
    const resourceFields: ResourceFieldsModel = {
        id: 'ResourceId',
        name: 'ResourceName',
        unit: 'Unit',
        group: 'ResourceGroup'
    };
    const editSettings: EditSettingsModel = {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    };
    const toolbarOptions: ToolbarItem[] = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'];
    const labelSettings = {
        rightLabel: 'Resources',
        taskLabel: 'TaskName'
    };
    const projectStartDate: Date = new Date('03/28/2019');
    const projectEndDate: Date = new Date('05/18/2019');
    return <GanttComponent id='root' dataSource={data} treeColumnIndex={1} viewType='ResourceView' allowSelection={true} allowResizing={true} highlightWeekends={true} toolbar={toolbarOptions} editSettings={editSettings} projectStartDate={projectStartDate} projectEndDate={projectEndDate}
        resourceFields={resourceFields} taskFields={taskFields} labelSettings={labelSettings}
        resources={resourceCollection} showOverAllocation={true} enableMultiTaskbar={true}>
        <ColumnsDirective>
            <ColumnDirective field='TaskID' > </ColumnDirective>
            <ColumnDirective field='TaskName' headerText='Task Name' width='180' > </ColumnDirective>
            <ColumnDirective field='work' headerText='Work' > </ColumnDirective>
            <ColumnDirective field='Progress' > </ColumnDirective>
            <ColumnDirective field='ResourceGroup' headerText='Group' > </ColumnDirective>
            <ColumnDirective field='StartDate' > </ColumnDirective>
            <ColumnDirective field='Duration' > </ColumnDirective>
        </ColumnsDirective>
        <Inject services={[Toolbar, Edit, Selection, RowDD]} />
    </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</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:

function App() {
    const enableMultiTaskbar: boolean = true;
    const viewType: string = 'ResourceView';
    const allowTaskbarOverlap: boolean = false;

    const taskSettings: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        resourceInfo: 'Resources'
    };
    return (
        <GanttComponent
            enableMultiTaskbar={enableMultiTaskbar}
            allowTaskbarOverlap={allowTaskbarOverlap}
            viewType={viewType}
            taskFields={taskSettings}
        />
    );
}

The following example demonstrates non-overlapping multi taskbar:

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Edit, Selection, Toolbar, RowDD } from '@syncfusion/ej2-react-gantt';
import { data, resourceCollection } from './datasource';
function App() {
    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        resourceInfo: 'Resources',
        expandState: 'IsExpand',
        parentID: 'ParentID'
    };
    const resourceFields = {
        id: 'ResourceId',
        name: 'ResourceName',
        unit: 'Unit',
        group: 'ResourceGroup'
    };
    const editSettings = {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    };
    const toolbarOptions = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'];
    const labelSettings = {
        rightLabel: 'Resources',
        taskLabel: 'TaskName'
    };
    const projectStartDate = new Date('03/28/2019');
    const projectEndDate = new Date('05/18/2019');
    return <GanttComponent id='root' dataSource={data} treeColumnIndex={1} viewType='ResourceView' allowSelection={true} allowResizing={true} highlightWeekends={true} toolbar={toolbarOptions} editSettings={editSettings} projectStartDate={projectStartDate} projectEndDate={projectEndDate}
        resourceFields={resourceFields} taskFields={taskFields} labelSettings={labelSettings}
        resources={resourceCollection} showOverAllocation={true} enableMultiTaskbar={true} allowTaskbarOverlap={false}>
        <ColumnsDirective>
            <ColumnDirective field='TaskID' > </ColumnDirective>
            <ColumnDirective field='TaskName' headerText='Task Name' width='180' > </ColumnDirective>
            <ColumnDirective field='work' headerText='Work' > </ColumnDirective>
            <ColumnDirective field='Progress' > </ColumnDirective>
            <ColumnDirective field='ResourceGroup' headerText='Group' > </ColumnDirective>
            <ColumnDirective field='StartDate' > </ColumnDirective>
            <ColumnDirective field='Duration' > </ColumnDirective>
        </ColumnsDirective>
        <Inject services={[Toolbar, Edit, Selection, RowDD]} />
    </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Edit, Selection, Toolbar, RowDD, TaskFieldsModel, ResourceFieldsModel, EditSettingsModel, ToolbarItem, LabelSettingsModel } from '@syncfusion/ej2-react-gantt';
import { data, resourceCollection } from './datasource';
function App() {
    const taskFields: TaskFieldsModel = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        resourceInfo: 'Resources',
        expandState: 'IsExpand',
        parentID: 'ParentID'
    };
    const resourceFields: ResourceFieldsModel = {
        id: 'ResourceId',
        name: 'ResourceName',
        unit: 'Unit',
        group: 'ResourceGroup'
    };
    const editSettings: EditSettingsModel = {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    };
    const toolbarOptions: ToolbarItem[] = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'];
    const labelSettings = {
        rightLabel: 'Resources',
        taskLabel: 'TaskName'
    };
    const projectStartDate: Date = new Date('03/28/2019');
    const projectEndDate: Date = new Date('05/18/2019');
    return <GanttComponent id='root' dataSource={data} treeColumnIndex={1} viewType='ResourceView' allowSelection={true} allowResizing={true} highlightWeekends={true} toolbar={toolbarOptions} editSettings={editSettings} projectStartDate={projectStartDate} projectEndDate={projectEndDate}
        resourceFields={resourceFields} taskFields={taskFields} labelSettings={labelSettings}
        resources={resourceCollection} showOverAllocation={true} enableMultiTaskbar={true} allowTaskbarOverlap={false}>
        <ColumnsDirective>
            <ColumnDirective field='TaskID' > </ColumnDirective>
            <ColumnDirective field='TaskName' headerText='Task Name' width='180' > </ColumnDirective>
            <ColumnDirective field='work' headerText='Work' > </ColumnDirective>
            <ColumnDirective field='Progress' > </ColumnDirective>
            <ColumnDirective field='ResourceGroup' headerText='Group' > </ColumnDirective>
            <ColumnDirective field='StartDate' > </ColumnDirective>
            <ColumnDirective field='Duration' > </ColumnDirective>
        </ColumnsDirective>
        <Inject services={[Toolbar, Edit, Selection, RowDD]} />
    </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

This configuration extends row height for clear task separation, ideal for identifying conflicts in small teams, but limits same-resource dependencies. Use overlapping mode for projects requiring extensive dependency mapping.

See also

• How to configure resource view?
• How to manage task dependencies?
• How to allocate resources?