Null reference error when trying to add a task

Hi, I have the add feature enabled in the toolbar. However, when I try to add a task, the spinner shows, and the dialog is not opened. In the console I get following error:
Image_7757_1732625707715

Image_3313_1732625753803


5 Replies 1 reply marked as answer

SJ Sridharan Jayabalan Syncfusion Team November 27, 2024 12:40 PM UTC

Hi Niels,


Greetings from Syncfusion.


Regarding the issue you are experiencing, we made several attempts to replicate it on our end but were unable to reproduce the issue. Here’s a summary of our validation steps:


  1. Removed the unit field from the resourceFields property.

  2. Added unit values directly to the resource data source without including the unit field.

  3. Tested scenarios with and without the unit field in the resourceFields property and resource data source. (refer sample)

To assist you further, please share the following additional details:


  1. The version of the Gantt Chart you are using.

  2. Code snippets related to your columns, resourceFields, and taskFields.

  3. The data structure for both resourceData and GanttData.

  4. Are you customized anything with actionBegin/actionCompete event?


Sample - Dzu67h (forked) - StackBlitz 

 


Regards,

Sridharan



NV Niels Van Goethem November 28, 2024 08:03 AM UTC

Hi, I am using version 27.2.4 of the Gantt Chart

The data I receive is this:

[

    {

        "id": 11,

        "parentId": null,

        "title": "Teststap Parent 1 - UPDATE",

        "description": "To be added later?",

        "startDate": "2024-11-20T12:41:45.646",

        "endDate": "2024-12-05T12:41:44.646",

        "isMilestone": false,

        "percentCompleted": null,

        "dependency": "",

        "status": {

            "enumKey": 2,

            "id": 30,

            "name": "Planned"

        },

        "pilot": null,

        "concurrency": "AAAAAAAEb6o=",

        "resources": [

            {

                "id": 1,

                "resourceType": 1,

                "employee": {

                    "amei": "1088448",

                    "id": 2,

                    "name": "Niels VAN GOETHEM"

                },

                "function": null

            },

            {

                "id": 2,

                "resourceType": 1,

                "employee": {

                    "amei": "518345",

                    "id": 1,

                    "name": "KINGSLEY NESEN"

                },

                "function": null

            }

        ]

    },

    {

        "id": 14,

        "parentId": null,

        "title": "Teststap - ADD",

        "description": "To be added later?",

        "startDate": "2024-11-20T12:41:45.646",

        "endDate": "2025-02-21T12:41:44.646",

        "isMilestone": false,

        "percentCompleted": null,

        "dependency": "",

        "status": {

            "enumKey": 2,

            "id": 30,

            "name": "Planned"

        },

        "pilot": null,

        "concurrency": "AAAAAAAEb6s=",

        "resources": [

            {

                "id": 1,

                "resourceType": 1,

                "employee": {

                    "amei": "1088448",

                    "id": 2,

                    "name": "Niels VAN GOETHEM"

                },

                "function": null

            },

            {

                "id": 2,

                "resourceType": 1,

                "employee": {

                    "amei": "518345",

                    "id": 1,

                    "name": "KINGSLEY NESEN"

                },

                "function": null

            },

            {

                "id": 3,

                "resourceType": 2,

                "employee": null,

                "function": {

                    "id": 1,

                    "name": "Developer"

                }

            }

        ]

    },

    {

        "id": 19,

        "parentId": null,

        "title": "New Task 3",

        "description": "To be added later?",

        "startDate": "2024-11-20T12:41:45.646",

        "endDate": "2024-11-20T12:41:45.646",

        "isMilestone": true,

        "percentCompleted": null,

        "dependency": "",

        "status": {

            "enumKey": 2,

            "id": 30,

            "name": "Planned"

        },

        "pilot": null,

        "concurrency": "AAAAAAAEb6w=",

        "resources": []

    }

]

Which I map to 2 different datasets:

this.projectSchedule$ = this.projectSchedulesService.getProjectSchedule$(this.project.id).pipe(
      tap((steps) => {
        this.originalStepIds = steps.map((step) => step.id);
        this.data = steps.map((item) => ({
          ...item,
          resources: item.pilot ? [item.pilot.id] : [],
        }));

        this.resources = steps.map((item: any) => item.pilot);
      }),
      finalize(() => {
        this.gantt.hideMaskRow();
      })
    ); These are the settings for taskFields and resourceFields:
this.taskSettings = {
      id: 'id',
      name: 'title',
      startDate: 'startDate',
      endDate: 'endDate',
      progress: 'percentCompleted',
      parentID: 'parentId',
      dependency: 'dependency',
      milestone: 'isMilestone',
      resourceInfo: 'resources',
    };

    this.resourceSettings = {
      id: 'id',
      name: 'name',
    }; and this is the columns:
this.columns = [
      { field: 'id', headerText: 'Task ID', textAlign: 'Left', width: '100' },
      { field: 'title', headerText: 'Task Name', width: '250' },
      { field: 'startDate', headerText: 'Start Date', width: '150' },
      { field: 'endDate', headerText: 'End Date', width: '150' },
      { field: 'progress', headerText: 'Progress', width: '150' },
    ];
And I am customizing the created and action


NV Niels Van Goethem November 28, 2024 08:14 AM UTC

I have successfully replicated the issue in this stackblitz:

Dzu67h (forked) - StackBlitz



NV Niels Van Goethem November 28, 2024 08:19 AM UTC

I have found that the problem was caused by having emty values in the resources. By passing an empt



IR Indumathi Ravi Syncfusion Team November 29, 2024 03:29 PM UTC

Niels,


Thank you for sharing the sample and details. We have run your sample and performed the add action, which works as expected without the reported console error. Upon validating your data source, we noticed that the id for your resources has been incorrectly set, with the same id being assigned to all resources.

While you can assign multiple resources to a single record, each resource must have a unique id. Please update this in your application and check for the console error.
If the issue persists, replicate the problem using the attached sample and share it with us for further validation.

Code-Snippet:   

data.ts:-


export let dataSet: any[] = [
  {
    id: 11,
    parentId: null,
    title: 'Teststap Parent 1 - UPDATE',
    description: 'To be added later?',
    startDate: '2024-11-20T12:41:45.646',
    endDate: '2024-12-05T12:41:44.646',
    isMilestone: false,
    percentCompleted: null,
    dependency: '',
    status: {
      enumKey: 2,
      id: 30,
      name: 'Planned',
    },
    pilot: {
      amei: '1088448',
      id: 1,
      name: 'Niels VAN GOETHEM 1',
    },
    concurrency: 'AAAAAAAEb6o=',
    resources: [
      {
        id: 1,
        resourceType: 1,
        employee: {
          amei: '1088448',
          id: 2,
          name: 'Niels VAN GOETHEM',
        },
        function: null,
      },
      {
        id: 2,
        resourceType: 1,
        employee: {
          amei: '518345',
          id: 1,
          name: 'KINGSLEY NESEN',
        },
        function: null,
      },
    ],
  },
  {
    id: 14,
    parentId: null,
    title: 'Teststap - ADD',
    description: 'To be added later?',
    startDate: '2024-11-20T12:41:45.646',
    endDate: '2025-02-21T12:41:44.646',
    isMilestone: false,
    percentCompleted: null,
    dependency: '',
    status: {
      enumKey: 2,
      id: 30,
      name: 'Planned',
    },
    pilot: {
      amei: '1088448',
      id: 2,
      name: 'Niels VAN GOETHEM 2',
    },
    concurrency: 'AAAAAAAEb6s=',
    resources: [
      {
        id: 1,
        resourceType: 1,
        employee: {
          amei: '1088448',
          id: 2,
          name: 'Niels VAN GOETHEM',
        },
        function: null,
      },
      {
        id: 2,
        resourceType: 1,
        employee: {
          amei: '518345',
          id: 1,
          name: 'KINGSLEY NESEN',
        },
        function: null,
      },
      {
        id: 3,
        resourceType: 2,
        employee: null,
        function: {
          id: 1,
          name: 'Developer',
        },
      },
    ],
  },
  {
    id: 19,
    parentId: null,
    title: 'New Task 3',
    description: 'To be added later?',
    startDate: '2024-11-20T12:41:45.646',
    endDate: '2024-11-20T12:41:45.646',
    isMilestone: true,
    percentCompleted: null,
    dependency: '',
    status: {
      enumKey: 2,
      id: 30,
      name: 'Planned',
    },
    pilot: {
      amei: '1088448',
      id: 3,
      name: 'Niels VAN GOETHEM 3',
    },
    concurrency: 'AAAAAAAEb6w=',
    resources: [],
  },
];

 

Modified Sample - https://stackblitz.com/edit/angular-sfljjh-jlngso?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fdata.ts 

 

 

Regards,

Sridharan


Marked as answer
Loader.
Up arrow icon