Resource view in EJ2 JavaScript Gantt Chart Control

27 May 202624 minutes to read

The resource view in the EJ2 JavaScript Gantt Chart control organizes tasks hierarchically by resource, displaying resources as parent nodes and their assigned tasks as child taskbars in a timeline. Enabled by setting viewType to ResourceView, this view visualizes workloads, such as multiple tasks per resource, with taskbars showing duration, progress, and dependencies. Unassigned tasks group under an Unassigned Task node. The queryTaskbarInfo event customizes taskbar styles, and overallocation indicators highlight scheduling conflicts. Taskbars include ARIA labels for accessibility, ensuring screen reader compatibility, and adapt to responsive designs, though narrow screens may truncate resource names. Parent tasks are not supported, and tasks require scheduling (start date and duration).

Configure resource view

Enable resource view by setting viewType to ResourceView and mapping resources via resources and resourceFields. Tasks are assigned using taskFields.resourceInfo.

The following example configures resource view:

var ganttChart = new ej.gantt.Gantt({
    dataSource: data,
    resources: resources,
    height: '430px',
    viewType: 'ResourceView',
    highlightWeekends: true,
    treeColumnIndex: 1,
    projectStartDate: new Date('03/25/2019'),
    projectEndDate: new Date('07/28/2019'),
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        resourceInfo: 'resources',
        work: 'work',
        parentID: 'ParentID'
    },
    resourceFields: {
        id: 'resourceId',
        name: 'resourceName',
        unit: 'Unit',
        group: 'resourceGroup'
    },
    editSettings: {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    },
    columns: [
        { field: 'TaskID', visible: false },
        { field: 'TaskName', headerText: 'Name', width: 250 },
        { field: 'work', headerText: 'Work' },
        { field: 'Progress' },
        { field: 'resourceGroup', headerText: 'Group' },
        { field: 'StartDate' },
        { field: 'Duration' }
    ],
    toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'],
    labelSettings: {
        rightLabel: 'resources'
    },
    splitterSettings: {
        columnIndex: 3
    }
});

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>

This configuration groups tasks by resources, displaying them as child nodes.

Visualize resource overallocation

Overallocation occurs when tasks exceed a resource’s daily capacity, calculated from dayWorkingTime and resource unit in resourceFields.unit. Enable indicators with showOverAllocation set to true (default: false), highlighting affected date ranges with square brackets.

The following example toggles overallocation visibility:

var ganttChart = new ej.gantt.Gantt({
    id: 'ganttDefault',
    dataSource: data,
    resources: resources,
    height: '430px',
    viewType: 'ResourceView',
    highlightWeekends: true,
    treeColumnIndex: 1,
    allowSelection: true,
    allowResizing: true,
    showOverAllocation: true,
    projectStartDate: new Date('03/25/2019'),
    projectEndDate: new Date('07/28/2019'),
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        resourceInfo: 'resources',
        work: 'work',
        parentID: 'ParentID'
    },
    resourceFields: {
        id: 'resourceId',
        name: 'resourceName',
        unit: 'Unit',
        group: 'resourceGroup'
    },
    editSettings: {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    },
    columns: [
        { field: 'TaskID', visible: false },
        { field: 'TaskName', headerText: 'Name', width: 250 },
        { field: 'work', headerText: 'Work' },
        { field: 'Progress' },
        { field: 'resourceGroup', headerText: 'Group' },
        { field: 'StartDate' },
        { field: 'Duration' }
    ],
    toolbar: [
        'Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll',
        { text: 'Show/Hide Overallocation', tooltipText: 'Show/Hide Overallocation', id: 'showhidebar' }
    ],
    labelSettings: {
        rightLabel: 'resources',
        taskLabel: 'Progress'
    },
    splitterSettings: {
        columnIndex: 3
    },
    toolbarClick: function (args) {
        if (args.item.id === 'showhidebar') {
            ganttChart.showOverAllocation = ganttChart.showOverAllocation ? false : true;
        }
    }
});

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>

This configuration highlights scheduling conflicts for workload management.

Manage unassigned tasks

Tasks not assigned to any resource are termed unassigned tasks. These tasks are automatically grouped under a node labeled Unassigned Task and displayed at the bottom of the Gantt data collection. The system validates task assignments during load time based on the taskFields.resourceInfo mapping property in the data source.

When a resource is subsequently assigned to an unassigned task, the task automatically moves to become a child of the respective resource node.

Enable taskbar drag and drop

Enable taskbar drag-and-drop between resources with allowTaskbarDragAndDrop set to true, requiring the RowDD module. This allows vertical taskbar movement for reassignment, triggered by the rowDragStart and rowDrop events.

The following example enables drag-and-drop:

var ganttChart = new ej.gantt.Gantt({
    dataSource: data,
    resources: resources,
    height: '450px',
    viewType: 'ResourceView',
    highlightWeekends: true,
    treeColumnIndex: 1,
    allowSelection: true,
    allowResizing: true,
    allowTaskbarDragAndDrop: true,
    showOverAllocation: true,
    enableMultiTaskbar: true,
    projectStartDate: new Date('03/25/2019'),
    projectEndDate: new Date('07/28/2019'),
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        resourceInfo: 'resources',
        work: 'work',
        expandState: 'isExpand',
        parentID: 'ParentID'
    },
    resourceFields: {
        id: 'resourceId',
        name: 'resourceName',
        unit: 'resourceUnit',
        group: 'resourceGroup'
    },
    editSettings: {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    },
    columns: [
        { field: 'TaskID' },
        { field: 'TaskName', headerText: 'Name', width: 250 },
        { field: 'work', headerText: 'Work' },
        { field: 'Progress' },
        { field: 'resourceGroup', headerText: 'Group' },
        { field: 'StartDate' },
        { field: 'Duration' }
    ],
    toolbar: ['ExpandAll', 'CollapseAll'],
    labelSettings: {
        rightLabel: 'resources',
        taskLabel: 'TaskName'
    }
});

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>

Customize the taskbar based on resource view

You can customize the taskbar appearance based on resource view using the queryTaskbarInfo event.

var ganttChart = new ej.gantt.Gantt({
    dataSource: data,
    resources: resources,
    height: '450px',
    viewType: 'ResourceView',
    highlightWeekends: true,
    treeColumnIndex: 1,
    allowSelection: true,
    allowResizing: true,
    enableMultiTaskbar: true,
    projectStartDate: new Date('03/25/2019'),
    projectEndDate: new Date('07/28/2019'),
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        resourceInfo: 'resources',
        work: 'work',
        parentID: 'ParentID'
    },
    resourceFields: {
        id: 'resourceId',
        name: 'resourceName',
        unit: 'resourceUnit',
        group: 'resourceGroup'
    },
    editSettings: {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    },
    columns: [
        { field: 'TaskID' },
        { field: 'TaskName', headerText: 'Name', width: 250 },
        { field: 'work', headerText: 'Work' },
        { field: 'Progress' },
        { field: 'resourceGroup', headerText: 'Group' },
        { field: 'StartDate' },
        { field: 'Duration' }
    ],
    toolbar: ['ExpandAll', 'CollapseAll'],
    labelSettings: {
        rightLabel: 'resources',
        taskLabel: 'TaskName'
    },
    queryTaskbarInfo: function (args) {
        var group = args.data.taskData.resourceGroup;
        if (typeof group === 'string') {
            if (group === 'Planning Team') {
                args.progressBarBgColor = 'red';
            } else if (group === 'Testing Team') {
                args.progressBarBgColor = 'green';
            }
        }
    }
});

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>

Hide columns in resource tab

To hide a column in the Gantt Chart’s resource view, handle the actionBegin event and set the visible property of the target column to false when the requestType is beforeOpenAddDialog or beforeOpenEditDialog.

ej.gantt.Gantt.Inject(ej.gantt.Edit,ej.gantt.Toolbar);

var ganttChart = new ej.gantt.Gantt({
    dataSource: data,
    height: '430px',
    resources: resources,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        resourceInfo: 'resources',
        work: 'work',
        parentID: 'ParentID'
    },
    resourceFields: {
        id: 'resourceId',
        name: 'resourceName',
        unit: 'resourceUnit',
        group: 'resourceGroup'
    },
    editSettings: {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    },
    toolbar: ['Add'],
    labelSettings: {
        leftLabel: 'TaskName'
    },
    actionBegin: function (args) {
        if (args.requestType === 'beforeOpenAddDialog' ||
            args.requestType === 'beforeOpenEditDialog') {
            args.Resources.columns[1].visible = false;
        }
    }
});

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>

Limitations

  • Resource view does not support parent tasks; all tasks must be child tasks under resources or the Unassigned Task node.
  • Unscheduled tasks (lacking start date or duration) are not supported in resource view.

See also