Search results

Context Menu in Vue Gantt component

08 Oct 2021 / 4 minutes to read

The Gantt control allows you to perform quick actions by using context menu. When right-clicking the context menu, the context menu options are shown. To enable this feature, set the enableContextMenu to true. The default context menu options are enabled using the editSettings property. The context menu options can be customized using the contextMenuItems property.

To use the context menu, inject the ContextMenu module in the provide section.

The default items are listed in the following table.

Items Description
AutoFit Auto-fits the current column.
AutoFitAll Auto-fits all columns.
SortAscending Sorts the current column in ascending order.
SortDescending Sorts the current column in descending order.
TaskInformation Edits the current task.
Add Adds a new row to the Gantt.
Indent Indent the selected record to one level.
Outdent Outdent the selected record to one level.
DeleteTask Deletes the current task.
Save Saves the edited task.
Cancel Cancels the edited task.
DeleteDependency Deletes the current dependency task link.
Convert Converts current task to milestone or vice-versa.
Source
Preview
app.vue
data-source.js
Copied to clipboard
<template>
     <div>
        <ejs-gantt ref='gantt' id="contextMenu" :dataSource="data" :taskFields = "taskFields" :height = "height" :editSettings="editSettings" :enableContextMenu="true" :allowSorting="true" :allowResizing= "true"></ejs-gantt>
    </div>
</template>
<script>
import Vue from "vue";
import { GanttPlugin, ContextMenu, Edit, Sort, Resize, Selection } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
Vue.use(GanttPlugin);
export default {
  data: function() {
      return{
        data: editingData,
        height: '450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            dependency: 'Predecessor',
            child: 'subtasks'
        },
        editSettings: {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true
        }
    };
  },
  provide: {
      gantt: [ ContextMenu, Edit, Sort, Resize, Selection]
  }
};
</script>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });

 exports.editingResources = [
        { resourceId: 1, resourceName: 'Martin Tamer' },
        { resourceId: 2, resourceName: 'Rose Fuller' },
        { resourceId: 3, resourceName: 'Margaret Buchanan' },
        { resourceId: 4, resourceName: 'Fuller King' },
        { resourceId: 5, resourceName: 'Davolio Fuller' },
        { resourceId: 6, resourceName: 'Van Jack' },
        { resourceId: 7, resourceName: 'Fuller Buchanan' },
        { resourceId: 8, resourceName: 'Jack Davolio' },
        { resourceId: 9, resourceName: 'Tamer Vinet' },
        { resourceId: 10, resourceName: 'Vinet Fuller' },
        { resourceId: 11, resourceName: 'Bergs Anton' },
        { resourceId: 12, resourceName: 'Construction Supervisor' }
    ];
    exports.editingData = [
        {
            TaskID: 1,
            TaskName: 'Project Initiation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                {
                    TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 0,
                    Progress: 30, resources: [1], info: 'Measure the total property area alloted for construction'
                },
                {
                    TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '2',
                    resources: [2, 3, 5], info: 'Obtain an engineered soil test of lot where construction is planned.' +
                        'From an engineer or company specializing in soil testing'
                },
                { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3', Progress: 30 },
            ]
        },
        {
            TaskID: 5,
            TaskName: 'Project Estimation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                {
                    TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'),
                    Duration: 3, Predecessor: '4', Progress: 30, resources: 4,
                    info: 'Develop floor plans and obtain a materials list for estimations'
                },
                {
                    TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'),
                    Duration: 3, Predecessor: '6', resources: [4, 8], info: ''
                },
                {
                    TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'),
                    Duration: 0, Predecessor: '7', resources: [12, 5], info: ''
                }
            ]
        },
        {
            TaskID: 9, TaskName: 'Sign Contract', StartDate: new Date('04/04/2019'), Duration: 1,
            Predecessor: '8', Progress: 30, resources: [12],
            info: 'If required obtain approval from HOA (homeowners association) or ARC (architectural review committee)'
        },
        {
            TaskID: 10,
            TaskName: 'Project Approval and kick off',
            StartDate: new Date('04/04/2019'),
            EndDate: new Date('04/21/2019'),
            Duration: 0,
            Predecessor: '9'
        },
        {
            TaskID: 11,
            TaskName: 'Site Work',
            StartDate: new Date('04/04/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                {
                    TaskID: 12, TaskName: 'Clear the building site', StartDate: new Date('04/04/2019'),
                    Duration: 2, Progress: 30, Predecessor: '9', resources: [6, 7],
                    info: 'Clear the building site (demolition of existing home if necessary)'
                },
                {
                    TaskID: 13, TaskName: 'Install temporary power service', StartDate: new Date('04/04/2019'),
                    Duration: 2, Predecessor: '12', resources: [6, 7], info: ''
                },
            ]
        },
        {
            TaskID: 14,
            TaskName: 'Foundation',
            StartDate: new Date('04/04/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                {
                    TaskID: 15, TaskName: 'Excavate for foundations', StartDate: new Date('04/04/2019'),
                    Duration: 3, Progress: 30, Predecessor: '13', resources: [2, 8],
                    info: 'Excavate the foundation and dig footers (Scope of work is dependent of foundation designed by engineer)'
                },
                {
                    TaskID: 16, TaskName: 'Dig footer', StartDate: new Date('04/04/2019'),
                    Duration: 2, Predecessor: '15FF', resources: [8], info: ''
                },
                {
                    TaskID: 17, TaskName: 'Install plumbing grounds', StartDate: new Date('04/04/2019'), Duration: 4,
                    Progress: 30, Predecessor: '15', resources: [9], info: ''
                },
                {
                    TaskID: 18, TaskName: 'Pour a foundation and footer with concrete', StartDate: new Date('04/04/2019'),
                    Duration: 1, Predecessor: '17', resources: [8, 9, 10], info: ''
                },
                {
                    TaskID: 19, TaskName: 'Cure basement walls', StartDate: new Date('04/04/2019'), Duration: 4,
                    Progress: 30, Predecessor: '18', resources: [10], info: ''
                },
            ]
        },
        {
            TaskID: 20,
            TaskName: 'Framing',
            StartDate: new Date('04/04/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                {
                    TaskID: 21, TaskName: 'Add load-bearing structure', StartDate: new Date('04/04/2019'),
                    Duration: 3, Progress: 30, Predecessor: '19', resources: [4, 5],
                    info: 'Build the main load-bearing structure out of thick pieces of wood and' +
                        'possibly metal I-beams for large spans with few supports'
                },
                {
                    TaskID: 22, TaskName: 'Install floor joists', StartDate: new Date('04/04/2019'),
                    Duration: 3, Predecessor: '21', resources: [2, 3], info: 'Add floor and ceiling joists and install subfloor panels'
                },
                {
                    TaskID: 23, TaskName: 'Add ceiling joists', StartDate: new Date('04/04/2019'),
                    Duration: 3, Progress: 30, Predecessor: '22SS', resources: [5], info: ''
                },
                {
                    TaskID: 24, TaskName: 'Install subfloor panels', StartDate: new Date('04/04/2019'),
                    Duration: 3, Predecessor: '23', resources: [8, 9]
                },
                {
                    TaskID: 25, TaskName: 'Frame floor walls', StartDate: new Date('04/04/2019'), Duration: 3,
                    Progress: 30, Predecessor: '24', resources: [10], info: ''
                },
                {
                    TaskID: 26, TaskName: 'Frame floor decking', StartDate: new Date('04/04/2019'), Duration: 3,
                    Progress: 30, Predecessor: '25SS', resources: [4, 8], info: ''
                },
            ]
        },
        {
            TaskID: 27,
            TaskName: 'Exterior finishing',
            StartDate: new Date('04/04/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                {
                    TaskID: 28, TaskName: 'Cover outer walls and roof in OSB', StartDate: new Date('04/04/2019'),
                    Duration: 3, Progress: 30, Predecessor: '26', resources: [2, 8],
                    info: 'Cover outer walls and roof in OSB or plywood and a water-resistive barrier'
                },
                {
                    TaskID: 29, TaskName: 'Add water resistive barrier', StartDate: new Date('04/04/2019'),
                    Duration: 3, Predecessor: '28', resources: [1, 10],
                    info: 'Cover the walls with siding, typically vinyl, wood, or brick veneer but possibly stone or other materials'
                },
                {
                    TaskID: 30, TaskName: 'Install roof shingles', StartDate: new Date('04/04/2019'), Duration: 3,
                    Progress: 30, Predecessor: '29', resources: [8, 9], info: 'Install roof shingles or other covering for flat roof'
                },
                { TaskID: 31, TaskName: 'Install windows', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '29', resources: 7 },
            ]
        },
        {
            TaskID: 32,
            TaskName: 'Utilities',
            StartDate: new Date('04/04/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                {
                    TaskID: 33, TaskName: 'Install internal plumbing', StartDate: new Date('04/04/2019'), Duration: 3,
                    Progress: 30, Predecessor: '26', resources: [1, 10]
                },
                {
                    TaskID: 34, TaskName: 'Install HVAC', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '33',
                    resources: [4, 9], info: 'Add internal plumbing, HVAC, electrical, and natural gas utilities'
                },
                {
                    TaskID: 35, TaskName: 'Electrical utilities', StartDate: new Date('04/04/2019'), Duration: 3,
                    Progress: 30, Predecessor: '34'
                },
                {
                    TaskID: 36, TaskName: 'Natural gas utilities', StartDate: new Date('04/04/2019'), Duration: 3,
                    Predecessor: '35', resources: 11
                },
                {
                    TaskID: 37, TaskName: 'Install bathroom fixtures', StartDate: new Date('04/04/2019'), Duration: 3,
                    Progress: 30, Predecessor: '35', resources: [3, 7]
                },
            ],
            info: 'Building inspector visits if necessary to approve utilities and framing'
        },
        {
            TaskID: 38,
            TaskName: 'Interior finsihing',
            StartDate: new Date('04/04/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                {
                    TaskID: 39, TaskName: 'Install insulation', StartDate: new Date('04/04/2019'),
                    Duration: 3, Progress: 30, Predecessor: '37', resources: [1, 8], info: 'Frame interior walls with wooden 2×4s'
                },
                {
                    TaskID: 40, TaskName: 'Install  drywall panels', StartDate: new Date('04/04/2019'), Duration: 3,
                    Predecessor: '39', resources: 5,
                    info: 'Install insulation and interior drywall panels (cementboard for wet areas) and to complete walls and ceilings'
                },
                {
                    TaskID: 41, TaskName: 'Spackle', StartDate: new Date('04/04/2019'), Duration: 3,
                    Progress: 30, Predecessor: '40', resources: 10
                },
                {
                    TaskID: 42, TaskName: 'Apply primer', StartDate: new Date('04/04/2019'), Duration: 3,
                    Predecessor: '41', resources: [10, 11]
                },
                {
                    TaskID: 43, TaskName: 'Paint wall and ceilings', StartDate: new Date('04/04/2019'),
                    Duration: 3, Progress: 30, Predecessor: '42', resources: [2, 9]
                },
                {
                    TaskID: 44, TaskName: 'Install modular kitchen', StartDate: new Date('04/04/2019'),
                    Duration: 3, Progress: 30, Predecessor: '43', resources: [5, 7]
                },
            ]
        },
        {
            TaskID: 45,
            TaskName: 'Flooring',
            StartDate: new Date('04/04/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                {
                    TaskID: 46, TaskName: 'Tile kitchen, bathroom and entry walls', StartDate: new Date('04/04/2019'),
                    Duration: 3, Progress: 30, Predecessor: '44', resources: [4, 9, 3],
                    info: 'Additional tiling on top of cementboard for wet areas, such as the bathroom and kitchen backsplash'
                },
                {
                    TaskID: 47, TaskName: 'Tile floor', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '46SS',
                    resources: [2, 8], info: 'Installation of final floor covering, such as floor tile, carpet, or wood flooring'
                },
            ]
        },
        {
            TaskID: 48,
            TaskName: 'Final Acceptance',
            StartDate: new Date('04/04/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                {
                    TaskID: 49, TaskName: 'Final inspection', StartDate: new Date('04/04/2019'), Duration: 2,
                    Progress: 30, Predecessor: '47', resources: 12, info: 'Ensure the contracted items'
                },
                {
                    TaskID: 50, TaskName: 'Cleanup for occupancy', StartDate: new Date('04/04/2019'), Duration: 2,
                    Predecessor: '49', resources: [1, 5], info: 'Installation of major appliances'
                },
                {
                    TaskID: 51, TaskName: 'Property Handover', StartDate: new Date('04/04/2019'), Duration: 0,
                    Predecessor: '50', info: 'Ending the contract'
                },
            ]
        },
    ];    
});

Custom context menu items

The custom context menu items can be added by defining the contextMenuItems as a collection of contextMenuItemModel. Actions for the customized items can be defined in the contextMenuClick event and the visibility of customized items can be defined in the contextMenuOpen event.

To create custom context menu items for header area, define the target property as .e-gridheader.

The following sample shows context menu item for parent rows to expand or collapse child rows in the content area and a context menu item to hide columns in the header area.

Source
Preview
app.vue
data-source.js
Copied to clipboard
<template>
     <div>
        <ejs-gantt ref='gantt' id="customContextMenu" :dataSource="data" :taskFields = "taskFields" :height = "height" :editSettings="editSettings" :enableContextMenu="true" :allowSorting="true" :allowResizing= "true" :contextMenuItems="contextMenuItems" :contextMenuClick = "contextMenuClick" :contextMenuOpen="contextMenuOpen"></ejs-gantt>
    </div>
</template>
<script>
import Vue from "vue";
import { GanttPlugin, ContextMenu, Edit, Sort, Resize, Selection } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
Vue.use(GanttPlugin);
export default {
  data: function() {
      return{
        data: editingData,
        height: '450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            dependency: 'Predecessor',
            child: 'subtasks'
        },
        editSettings: {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true
        },
        contextMenuItems: ['AutoFitAll', 'AutoFit', 'TaskInformation', 'DeleteTask', 'Save', 'Cancel', 'SortAscending', 'SortDescending', 'Add', 'DeleteDependency', 'Convert',
        { text: 'Collapse the Row', target: '.e-content', id: 'collapserow' },
        { text: 'Expand the Row', target: '.e-content', id: 'expandrow' },
        { text: 'Hide Column', target: '.e-gridheader', id: 'hidecols' }
        ],
    };
  },
  provide: {
      gantt: [ ContextMenu, Edit, Sort, Resize, Selection]
  },
  methods: {
        contextMenuClick: function (args) {
        var record = args.rowData;
        var ganttObj = document.getElementById('customContextMenu').ej2_instances[0];
        if (args.item.id === 'collapserow') {
            ganttObj.collapseByID(Number(record.ganttProperties.taskId));
            }
        if (args.item.id === 'expandrow') {
            ganttObj.expandByID(Number(record.ganttProperties.taskId));
            }
        if (args.item.id === 'hidecols') {
            ganttObj.hideColumn(args.column.headerText);
        }
        },
        contextMenuOpen: function (args) {
        var record = args.rowData;
            if (args.type !== 'Header') {
                if (!record.hasChildRecords) {
                    args.hideItems.push('Collapse the Row');
                    args.hideItems.push('Expand the Row');
                } else {
                    if(record.expanded){
                    args.hideItems.push("Expand the Row");
                    } else {
                    args.hideItems.push("Collapse the Row");
                    }
                }
            }
        }
    }
};
</script>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });

 exports.editingResources = [
        { resourceId: 1, resourceName: 'Martin Tamer' },
        { resourceId: 2, resourceName: 'Rose Fuller' },
        { resourceId: 3, resourceName: 'Margaret Buchanan' },
        { resourceId: 4, resourceName: 'Fuller King' },
        { resourceId: 5, resourceName: 'Davolio Fuller' },
        { resourceId: 6, resourceName: 'Van Jack' },
        { resourceId: 7, resourceName: 'Fuller Buchanan' },
        { resourceId: 8, resourceName: 'Jack Davolio' },
        { resourceId: 9, resourceName: 'Tamer Vinet' },
        { resourceId: 10, resourceName: 'Vinet Fuller' },
        { resourceId: 11, resourceName: 'Bergs Anton' },
        { resourceId: 12, resourceName: 'Construction Supervisor' }
    ];
    exports.editingData = [
        {
            TaskID: 1,
            TaskName: 'Project Initiation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                {
                    TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 0,
                    Progress: 30, resources: [1], info: 'Measure the total property area alloted for construction'
                },
                {
                    TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '2',
                    resources: [2, 3, 5], info: 'Obtain an engineered soil test of lot where construction is planned.' +
                        'From an engineer or company specializing in soil testing'
                },
                { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3', Progress: 30 },
            ]
        },
        {
            TaskID: 5,
            TaskName: 'Project Estimation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                {
                    TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'),
                    Duration: 3, Predecessor: '4', Progress: 30, resources: 4,
                    info: 'Develop floor plans and obtain a materials list for estimations'
                },
                {
                    TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'),
                    Duration: 3, Predecessor: '6', resources: [4, 8], info: ''
                },
                {
                    TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'),
                    Duration: 0, Predecessor: '7', resources: [12, 5], info: ''
                }
            ]
        },
        {
            TaskID: 9, TaskName: 'Sign Contract', StartDate: new Date('04/04/2019'), Duration: 1,
            Predecessor: '8', Progress: 30, resources: [12],
            info: 'If required obtain approval from HOA (homeowners association) or ARC (architectural review committee)'
        },
        {
            TaskID: 10,
            TaskName: 'Project Approval and kick off',
            StartDate: new Date('04/04/2019'),
            EndDate: new Date('04/21/2019'),
            Duration: 0,
            Predecessor: '9'
        },
        {
            TaskID: 11,
            TaskName: 'Site Work',
            StartDate: new Date('04/04/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                {
                    TaskID: 12, TaskName: 'Clear the building site', StartDate: new Date('04/04/2019'),
                    Duration: 2, Progress: 30, Predecessor: '9', resources: [6, 7],
                    info: 'Clear the building site (demolition of existing home if necessary)'
                },
                {
                    TaskID: 13, TaskName: 'Install temporary power service', StartDate: new Date('04/04/2019'),
                    Duration: 2, Predecessor: '12', resources: [6, 7], info: ''
                },
            ]
        },
        {
            TaskID: 14,
            TaskName: 'Foundation',
            StartDate: new Date('04/04/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                {
                    TaskID: 15, TaskName: 'Excavate for foundations', StartDate: new Date('04/04/2019'),
                    Duration: 3, Progress: 30, Predecessor: '13', resources: [2, 8],
                    info: 'Excavate the foundation and dig footers (Scope of work is dependent of foundation designed by engineer)'
                },
                {
                    TaskID: 16, TaskName: 'Dig footer', StartDate: new Date('04/04/2019'),
                    Duration: 2, Predecessor: '15FF', resources: [8], info: ''
                },
                {
                    TaskID: 17, TaskName: 'Install plumbing grounds', StartDate: new Date('04/04/2019'), Duration: 4,
                    Progress: 30, Predecessor: '15', resources: [9], info: ''
                },
                {
                    TaskID: 18, TaskName: 'Pour a foundation and footer with concrete', StartDate: new Date('04/04/2019'),
                    Duration: 1, Predecessor: '17', resources: [8, 9, 10], info: ''
                },
                {
                    TaskID: 19, TaskName: 'Cure basement walls', StartDate: new Date('04/04/2019'), Duration: 4,
                    Progress: 30, Predecessor: '18', resources: [10], info: ''
                },
            ]
        },
        {
            TaskID: 20,
            TaskName: 'Framing',
            StartDate: new Date('04/04/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                {
                    TaskID: 21, TaskName: 'Add load-bearing structure', StartDate: new Date('04/04/2019'),
                    Duration: 3, Progress: 30, Predecessor: '19', resources: [4, 5],
                    info: 'Build the main load-bearing structure out of thick pieces of wood and' +
                        'possibly metal I-beams for large spans with few supports'
                },
                {
                    TaskID: 22, TaskName: 'Install floor joists', StartDate: new Date('04/04/2019'),
                    Duration: 3, Predecessor: '21', resources: [2, 3], info: 'Add floor and ceiling joists and install subfloor panels'
                },
                {
                    TaskID: 23, TaskName: 'Add ceiling joists', StartDate: new Date('04/04/2019'),
                    Duration: 3, Progress: 30, Predecessor: '22SS', resources: [5], info: ''
                },
                {
                    TaskID: 24, TaskName: 'Install subfloor panels', StartDate: new Date('04/04/2019'),
                    Duration: 3, Predecessor: '23', resources: [8, 9]
                },
                {
                    TaskID: 25, TaskName: 'Frame floor walls', StartDate: new Date('04/04/2019'), Duration: 3,
                    Progress: 30, Predecessor: '24', resources: [10], info: ''
                },
                {
                    TaskID: 26, TaskName: 'Frame floor decking', StartDate: new Date('04/04/2019'), Duration: 3,
                    Progress: 30, Predecessor: '25SS', resources: [4, 8], info: ''
                },
            ]
        },
        {
            TaskID: 27,
            TaskName: 'Exterior finishing',
            StartDate: new Date('04/04/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                {
                    TaskID: 28, TaskName: 'Cover outer walls and roof in OSB', StartDate: new Date('04/04/2019'),
                    Duration: 3, Progress: 30, Predecessor: '26', resources: [2, 8],
                    info: 'Cover outer walls and roof in OSB or plywood and a water-resistive barrier'
                },
                {
                    TaskID: 29, TaskName: 'Add water resistive barrier', StartDate: new Date('04/04/2019'),
                    Duration: 3, Predecessor: '28', resources: [1, 10],
                    info: 'Cover the walls with siding, typically vinyl, wood, or brick veneer but possibly stone or other materials'
                },
                {
                    TaskID: 30, TaskName: 'Install roof shingles', StartDate: new Date('04/04/2019'), Duration: 3,
                    Progress: 30, Predecessor: '29', resources: [8, 9], info: 'Install roof shingles or other covering for flat roof'
                },
                { TaskID: 31, TaskName: 'Install windows', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '29', resources: 7 },
            ]
        },
        {
            TaskID: 32,
            TaskName: 'Utilities',
            StartDate: new Date('04/04/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                {
                    TaskID: 33, TaskName: 'Install internal plumbing', StartDate: new Date('04/04/2019'), Duration: 3,
                    Progress: 30, Predecessor: '26', resources: [1, 10]
                },
                {
                    TaskID: 34, TaskName: 'Install HVAC', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '33',
                    resources: [4, 9], info: 'Add internal plumbing, HVAC, electrical, and natural gas utilities'
                },
                {
                    TaskID: 35, TaskName: 'Electrical utilities', StartDate: new Date('04/04/2019'), Duration: 3,
                    Progress: 30, Predecessor: '34'
                },
                {
                    TaskID: 36, TaskName: 'Natural gas utilities', StartDate: new Date('04/04/2019'), Duration: 3,
                    Predecessor: '35', resources: 11
                },
                {
                    TaskID: 37, TaskName: 'Install bathroom fixtures', StartDate: new Date('04/04/2019'), Duration: 3,
                    Progress: 30, Predecessor: '35', resources: [3, 7]
                },
            ],
            info: 'Building inspector visits if necessary to approve utilities and framing'
        },
        {
            TaskID: 38,
            TaskName: 'Interior finsihing',
            StartDate: new Date('04/04/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                {
                    TaskID: 39, TaskName: 'Install insulation', StartDate: new Date('04/04/2019'),
                    Duration: 3, Progress: 30, Predecessor: '37', resources: [1, 8], info: 'Frame interior walls with wooden 2×4s'
                },
                {
                    TaskID: 40, TaskName: 'Install  drywall panels', StartDate: new Date('04/04/2019'), Duration: 3,
                    Predecessor: '39', resources: 5,
                    info: 'Install insulation and interior drywall panels (cementboard for wet areas) and to complete walls and ceilings'
                },
                {
                    TaskID: 41, TaskName: 'Spackle', StartDate: new Date('04/04/2019'), Duration: 3,
                    Progress: 30, Predecessor: '40', resources: 10
                },
                {
                    TaskID: 42, TaskName: 'Apply primer', StartDate: new Date('04/04/2019'), Duration: 3,
                    Predecessor: '41', resources: [10, 11]
                },
                {
                    TaskID: 43, TaskName: 'Paint wall and ceilings', StartDate: new Date('04/04/2019'),
                    Duration: 3, Progress: 30, Predecessor: '42', resources: [2, 9]
                },
                {
                    TaskID: 44, TaskName: 'Install modular kitchen', StartDate: new Date('04/04/2019'),
                    Duration: 3, Progress: 30, Predecessor: '43', resources: [5, 7]
                },
            ]
        },
        {
            TaskID: 45,
            TaskName: 'Flooring',
            StartDate: new Date('04/04/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                {
                    TaskID: 46, TaskName: 'Tile kitchen, bathroom and entry walls', StartDate: new Date('04/04/2019'),
                    Duration: 3, Progress: 30, Predecessor: '44', resources: [4, 9, 3],
                    info: 'Additional tiling on top of cementboard for wet areas, such as the bathroom and kitchen backsplash'
                },
                {
                    TaskID: 47, TaskName: 'Tile floor', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '46SS',
                    resources: [2, 8], info: 'Installation of final floor covering, such as floor tile, carpet, or wood flooring'
                },
            ]
        },
        {
            TaskID: 48,
            TaskName: 'Final Acceptance',
            StartDate: new Date('04/04/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                {
                    TaskID: 49, TaskName: 'Final inspection', StartDate: new Date('04/04/2019'), Duration: 2,
                    Progress: 30, Predecessor: '47', resources: 12, info: 'Ensure the contracted items'
                },
                {
                    TaskID: 50, TaskName: 'Cleanup for occupancy', StartDate: new Date('04/04/2019'), Duration: 2,
                    Predecessor: '49', resources: [1, 5], info: 'Installation of major appliances'
                },
                {
                    TaskID: 51, TaskName: 'Property Handover', StartDate: new Date('04/04/2019'), Duration: 0,
                    Predecessor: '50', info: 'Ending the contract'
                },
            ]
        },
    ];    
});

You can show an specific item in context menu for header/content area in the Gantt control by defining the target property.