1. Home
  2. Forum
  3. Angular - EJ 2
  4. Documentation example doesn't work

Documentation example doesn't work

This example doesn't work, the basic of how to insert data in the Gantt.

https://ej2.syncfusion.com/angular/documentation/gantt/getting-started/#binding-gantt-with-data

This is the Error:

ERROR TypeError: ganttProperties.taskId is null

    createRecord ej2-gantt.es2015.js:1897
    prepareRecordCollection ej2-gantt.es2015.js:1717
    prepareDataSource ej2-gantt.es2015.js:1679
    cloneDataSource ej2-gantt.es2015.js:1631
    checkDataBinding ej2-gantt.es2015.js:1543
    render ej2-gantt.es2015.js:12278
    appendTo ej2-base.es2015.js:6703

How can I set the data???


Binding Gantt with data

Bind data for the Gantt component by using dataSource property. It accepts either array of JavaScript object or DataManager instance.

  1. import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<ejs-gantt [dataSource]='data'> </ejs-gantt>`
})
export class AppComponent implements OnInit {

    public data: Object[];

    ngOnInit(): void {
        this.data = [
            {
                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: 4, Progress: 50 },
                    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50  },
                    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
                ]
            },
            {
                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, Progress: 50 },
                    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
                    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
                ]
            },
        ];
    }
}
    ​

6 Replies
PS Premkumar Sudalaimuthu Syncfusion Team April 4, 2022 09:55 AM UTC

Hi  Cesar,


We have checked from our side. We would like to inform you that in order to render the Gantt Chart, we must complete all of the steps up until mapping the task fields. We noticed that you did not map the task fields in your sample based on the code snippets you provided. We request you to follow the steps until you get to the point of mapping task fields for rendering Gantt charts. We have shared a sample for your reference.


Sample: https://stackblitz.com/edit/angular-769u1g?file=app.component.ts


Online documentation: https://ej2.syncfusion.com/angular/documentation/gantt/getting-started/#mapping-task-fields


Regards,

Premkumar S


CS Cesar Smerling April 4, 2022 12:10 PM UTC

I shared the the link the the example, is your example not mine. I'm saing it's not working as it is, I hope you write better documentation, for example now I'm trying to understand how to include resources to task it's not clear how can be acheived. Please can you provide a good example for this and re check the documentation for the Gantt it's seems that there is examples that don't work.


CS Cesar Smerling April 4, 2022 01:53 PM UTC

Here I create an example of the data that we have:

https://stackblitz.com/edit/angular-769u1g-loqkdq?file=app%2Fgantt-example%2Fgantt-example.component.ts

I found out the problem that I have but I shared to you. I have to add child property to taskFieldsSettings if not, the Gantt does not load in the example is commented to show the error.


I hope that you explain better the usage of the components and share more examples that work and combines multiple functionalities, is not the first time that is complicated to understand how to use the components and we pay a third party library so we don't have to lose time but we are losing anyway.


PS Premkumar Sudalaimuthu Syncfusion Team April 5, 2022 09:54 AM UTC


Hi Cesar ,


You can track the status of the feature from the below feedback link.


Feedback: https://www.syncfusion.com/feedback/8596/support-for-resource-histogram-view


Regards,

Premkumar S


PS Premkumar Sudalaimuthu Syncfusion Team April 5, 2022 09:56 AM UTC

Hi Cesar ,


Please ignore the previous update.



Regards,

Premkumar S


PS Premkumar Sudalaimuthu Syncfusion Team April 5, 2022 09:57 AM UTC

Hi Cesar,


We have noticed that you have mentioned about the resource topic does not contain child tasks in task fields. However, we have shared the online documentation of how to map resources. It also contains the mapping of child tasks and we can able to run the sample without any errors by following the online documentation. Our online documentation contains information about all the individual topics. We kindly request you to refer to the topics individually.


Online documentation: https://ej2.syncfusion.com/angular/documentation/gantt/getting-started/#assigning-resources


Regards,

Premkumar S


Loader.
Up arrow icon