Gantt not loading

Question

I am getting error while loading Gantt Chart

sample JSON

{"TaskID":"PORT-01","TaskName":"New Portfolio July 2021","StartDate":"2021-07-01T05:00:00.000Z","EndDate":"2021-12-31T06:00:00.000Z","Progress":20,"isManual":true,"Children":[{"TaskID":"PROG-12","TaskName":"Program July 2021","StartDate":"2021-09-01T05:00:00.000Z","EndDate":"2021-12-31T06:00:00.000Z","Progress":30,"isManual":true,"Children":[{"TaskID":"PROJ-24","TaskName":"July 2021 - NEW","StartDate":"2021-09-01T05:00:00.000Z","EndDate":"2021-10-30T05:00:00.000Z","Progress":41,"isManual":true,"Children":[{"TaskID":"EPIC-31","TaskName":"DeleteChainTest","StartDate":"","EndDate":"","Progress":41,"isManual":true,"Children":[],"Predecessor":"PROJ-24"},{"TaskID":"EPIC-42","TaskName":"Test Epic","StartDate":"2021-08-01T05:00:00.000Z","EndDate":"2021-08-24T05:00:00.000Z","Progress":41,"isManual":true,"Children":[{"TaskID":"FEATURE-51","TaskName":"Test Feature Link","StartDate":"2021-08-01T05:00:00.000Z","EndDate":"2021-08-24T05:00:00.000Z","Progress":0,"isManual":true,"Predecessor":"EPIC-42"}],"Predecessor":"PROJ-24"}],"Predecessor":"PROG-12"}],"Predecessor":"PORT-01"},{"TaskID":"PROJ-63","TaskName":"July 2021 - NEW","StartDate":"2021-09-01T05:00:00.000Z","EndDate":"2021-10-30T05:00:00.000Z","Progress":40,"isManual":true,"Children":[{"TaskID":"EPIC-71","TaskName":"DeleteChainTest","StartDate":"","EndDate":"","Progress":0,"isManual":true,"Children":[],"Predecessor":"PROJ-63"},{"TaskID":"EPIC-82","TaskName":"Test Epic","StartDate":"2021-08-01T05:00:00.000Z","EndDate":"2021-08-24T05:00:00.000Z","Progress":0,"isManual":true,"Children":[{"TaskID":"FEATURE-91","TaskName":"Test Feature Link","StartDate":"2021-08-01T05:00:00.000Z","EndDate":"2021-08-24T05:00:00.000Z","Progress":0,"isManual":true,"Predecessor":"EPIC-82"}],"Predecessor":"PROJ-63"}],"Predecessor":"PORT-01"}],"Predecessor":null}

  <ejs-gantt #gantt1 id="gantt1" name="gantt1" height="100%" [dataSource]="ganttData"
                                    [taskFields]="taskSettings" readOnly=true [columns]="columns" [treeColumnIndex]="1"
                                    [dayWorkingTime]="dayWorkingTime" [splitterSettings]="splitterSettings"
                                    [timelineSettings]="timelineSettings" [labelSettings]="labelSettings"
                                    [editSettings]="editSettings" [allowSelection]="true" [includeWeekend]="true"
                                    [highlightWeekends]="true" allowPdfExport='true' allowExcelExport='true'
                                    [toolbar]="toolbar" (toolbarClick)="toolbarClick($event)" taskMode="Custom"
                                    [enablePredecessorValidation]="false" (queryTaskbarInfo)="queryTaskbarInfo($event)">
                                </ejs-gantt>

this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      endDate: 'EndDate',
      dependency: 'Predecessor',
      child: 'Children',
      manual: 'isManual'
    };
    this.columns = [
      { field: 'TaskID', visible: false },
      { field: 'TaskName', headerText: 'Task Name' },
      { field: 'StartDate', headerText: 'Start Date' },
      { field: 'EndDate', headerText: 'End Date' }
    ];
    this.editSettings = {
      allowAdding: false,
      allowEditing: false,
      allowDeleting: false,
      allowTaskbarEditing: false,
      showDeleteConfirmDialog: false
    };

 this.toolbar = ['ExpandAll', 'CollapseAll', 'PdfExport', 'ExcelExport', 'CsvExport', 'ZoomToFit', 'ZoomIn', 'ZoomOut']; //'Add', 'Edit', 'Update', 'Delete', 'Cancel', 
    this.splitterSettings = {
      position: "25%"
    }
    this.labelSettings = {
      leftLabel: 'TaskName'
    };
    this.timelineSettings = {
      timelineViewMode: 'Month',
      timelineUnitSize: 100,
    };

Error

Monisha Sivanthilingam · Answer

Hi Vin, 
 
Greetings from Syncfusion support. 
 
We have analyzed the code snippet and data you shared. We noticed that you have defined the TaskID of tasks in alphanumeric characters. Currently, we do not have support to define the TaskId as string in Gantt Chart. However, we have already logged a feature report for it. You can track its status from the below feedback link. 
 
Feedback: https://www.syncfusion.com/feedback/8557/support-to-define-task-id-as-string-type 
 
As we have already lined up some major features, we could not implement this support immediately. We will implement this and include it in any of our upcoming releases. Please cast your vote on this feature. Based on the customer demand we will prioritize the features in our upcoming road map. 
 
Regards, 
Monisha.

vin · Answer

I am getting same error when i am using the numeric TaskId

Can you please check this

Monisha Sivanthilingam · Answer

Hi Vin, 
 
We have also used the same data you shared with us. However, we were unable to replicate the error you reported. Please ensure that you have mapped the taskFields correctly in your sample. The mapping according to the data you shared should be as follows. 
 
app.component.ts 




 
this.taskSettings = { 
  id: 'TaskID', 
  name: 'TaskName', 
  startDate: 'StartDate', 
  duration: 'Duration', 
  progress: 'Progress', 
  endDate: 'EndDate', 
  dependency: 'Predecessor', 
  child: 'Children', 
  manual: 'isManual' 
}; 
 
 
We have also prepared a sample with the same code snippets you shared previously. 
 
Please contact us if the issue persists. 
 
Regards, 
Monisha.

vin · Answer

Please use this package.json"@angular/animations": "^9.1.13",    "@angular/common": "^9.1.13",    "@angular/compiler": "^9.1.13",    "@angular/core": "^9.1.13",    "@angular/forms": "^9.1.13",    "@angular/platform-browser": "^9.1.13",    "@angular/platform-browser-dynamic": "^9.1.13",    "@angular/router": "^9.1.13",    "@syncfusion/ej2-angular-base": "*",    "@syncfusion/ej2-angular-buttons": "*",    "@syncfusion/ej2-angular-calendars": "*",    "@syncfusion/ej2-angular-charts": "*",    "@syncfusion/ej2-angular-diagrams": "*",    "@syncfusion/ej2-angular-dropdowns": "*",    "@syncfusion/ej2-angular-gantt": "*",    "@syncfusion/ej2-angular-grids": "*",    "@syncfusion/ej2-angular-heatmap": "*",    "@syncfusion/ej2-angular-inputs": "*",    "@syncfusion/ej2-angular-kanban": "*",    "@syncfusion/ej2-angular-layouts": "*",    "@syncfusion/ej2-angular-navigations": "^19.1.67",    "@syncfusion/ej2-angular-notifications": "*",    "@syncfusion/ej2-angular-popups": "*",    "@syncfusion/ej2-angular-progressbar": "*",    "@syncfusion/ej2-angular-richtexteditor": "*",    "@syncfusion/ej2-angular-splitbuttons": "^19.1.63",    "@syncfusion/ej2-angular-spreadsheet": "*",    "@syncfusion/ej2-base": "*",    "@syncfusion/ej2-buttons": "*",    "@syncfusion/ej2-calendars": "*",    "@syncfusion/ej2-charts": "*",    "@syncfusion/ej2-diagrams": "*",    "@syncfusion/ej2-dropdowns": "*",    "@syncfusion/ej2-gantt": "*",    "@syncfusion/ej2-grids": "*",    "@syncfusion/ej2-heatmap": "*",    "@syncfusion/ej2-inputs": "*",    "@syncfusion/ej2-kanban": "*",    "@syncfusion/ej2-layouts": "*",    "@syncfusion/ej2-navigations": "*",    "@syncfusion/ej2-notifications": "*",    "@syncfusion/ej2-popups": "*",    "@syncfusion/ej2-progressbar": "*",    "@syncfusion/ej2-richtexteditor": "*",    "@syncfusion/ej2-spreadsheet": "*",    "bootstrap": "^4.5.2",    "classlist.js": "^1.1.20150312",    "install": "^0.13.0",    "jquery": "^3.6.0",    "moment": "^2.29.1",    "ngx-moment": "^5.0.0",    "popper.js": "^1.16.1",    "rxjs": "6.5.5",    "ts": "^0.2.2",    "tslib": "^1.10.0",    "xlsx": "^0.16.9",    "zone.js": "~0.10.2"

Monisha Sivanthilingam · Answer

Hi Vin, 
 
We have used the package.json file you shared. However, we were still unable to replicate the issue you reported. Please find the sample we used to validate your issue below. In this sample, we have used the package.json file you shared in this update and the data and codes you shared in the previous updates. However, the gantt is rendered without any issues for us. 
 
Sample: https://stackblitz.com/edit/angular-vztrqd?file=package.json 
 
Please ensure that you ensure that you have mapped the taskfields correctly, and also share with us whether the error occurs in load time or when you are trying to perform some action in the Gantt. 
 
We would also like to schedule a meeting with you so that we can check your application in live and identify the cause of the issue. Please get back to us with your available timings if you are interested in scheduling a meeting. 
 
Regards, 
Monisha.