{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "gantt-resource-view",
  "framework": "angular",
  "type": "registry:component",
  "component": "Gantt",
  "variant": "resource-view",
  "dependencies": [
    "@syncfusion/ej2-angular-gantt"
  ],
  "description": "Gantt chart sample presenting project tasks grouped by assigned resources.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/angular/llms.txt",
    "skillPack": "syncfusion/angular-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/angular/gantt-resource-view.md"
  },
  "files": [
    {
      "target": "src/components/gantt-resource-view/resource-view.component.ts",
      "content": "import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';\nimport { ClickEventArgs } from '@syncfusion/ej2-navigations';\nimport { DayMarkersService, EditService, GanttComponent, GanttModule, ResizeService, SelectionService, ToolbarService } from '@syncfusion/ej2-angular-gantt';\nimport { resourcesData, resourceCollection } from '../data';\n@Component({\n    selector: 'ej2-ganttresourceview',\n    templateUrl: 'resource-view.html',\n    standalone: true,\n    providers: [SelectionService, EditService, ResizeService, ToolbarService, DayMarkersService],\n    imports: [ GanttModule]\n})\n\nexport class GanttResourceViewComponent implements OnInit {\n    public data!: object[];\n    public resources!: object[];\n    public taskSettings!: object;\n    public columns!: object[];\n    public labelSettings!: object;\n    public splitterSettings!: object;\n    public editSettings!: object;\n    public toolbar!: (string | object)[];\n    public resourceFields!: object ;\n    public projectStartDate!: Date;\n    public projectEndDate!: Date;\n    public taskType!: string;\n    @ViewChild('resourceview', { static: false })\n    public ganttObj!: GanttComponent;\n    public ngOnInit(): void {\n        this.data = resourcesData;\n        this.resources = resourceCollection;\n        this.taskType = \"FixedWork\"\n        this.taskSettings = {\n            id: 'TaskID',\n            name: 'TaskName',\n            startDate: 'StartDate',\n            endDate: 'EndDate',\n            duration: 'Duration',\n            progress: 'Progress',\n\t\t\tdependency: 'Predecessor',\n            resourceInfo: 'resources',\n            work: 'work',\n            child: 'subtasks'\n        };\n        this.resourceFields = {\n            id: 'resourceId',\n            name: 'resourceName',\n            unit: 'resourceUnit',\n            group: 'resourceGroup'\n        };\n        this.columns =  [\n\t\t\t{ field: 'TaskID', visible: false },\n            { field: 'TaskName', headerText: 'Name', width: 260 },\n            { field: 'work', headerText: 'Work' },\n            { field: 'Progress' },\n            { field: 'resourceGroup', headerText: 'Group' },\n            { field: 'StartDate' },\n            { field: 'Duration' },\n        ];\n        this.editSettings = {\n            allowAdding: true,\n            allowEditing: true,\n            allowDeleting: true,\n            allowTaskbarEditing: true,\n            showDeleteConfirmDialog: true\n        };\n        this.toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll',\n        {text: 'Show/Hide Overallocation', tooltipText: 'Show/Hide Overallocation', id: 'showhidebar'}];\n        this.splitterSettings = {\n            columnIndex: 3\n        }\n        this.labelSettings = {\n            rightLabel: 'resources',\n            taskLabel: 'Progress'\n        };\n        this.projectStartDate= new Date('03/26/2025');\n        this.projectEndDate= new Date('05/18/2025');\n    }\n    public toolbarClick(args: ClickEventArgs): void {\n        if (args.item.id === 'showhidebar') {\n            this.ganttObj.showOverAllocation = !this.ganttObj.showOverAllocation;\n        }\n    }\n}\n"
    },
    {
      "target": "src/components/gantt-resource-view/resource-view.html",
      "content": "\n<div class=\"control-section\">\n    <ejs-gantt id=\"ResourceView\" #resourceview height=\"650px\" rowHeight=\"46\" taskbarHeight =\"25\" [dataSource]=\"data\" [taskFields]=\"taskSettings\" [columns]=\"columns\" [treeColumnIndex]=\"1\"\n        [splitterSettings]=\"splitterSettings\" [labelSettings]=\"labelSettings\" [editSettings]=\"editSettings\" \n        [allowSelection]=\"true\" [allowResizing]=\"true\" [projectStartDate]=\"projectStartDate\" [projectEndDate]=\"projectEndDate\" [highlightWeekends]=\"true\"\n        [toolbar]=\"toolbar\" [resourceFields] = \"resourceFields\" [taskType] = \"taskType\"\n        [resources]=\"resources\" viewType=\"ResourceView\" [showOverAllocation]= \"true\" (toolbarClick)=\"toolbarClick($event)\">\n    </ejs-gantt>\n</div>\n"
    }
  ]
}