Error when editing tasks

[Niels Van Goethem]

Dear

I am getting following error when trying to edit the task bars in the Gantt Chart

The error occurs when dragging or resizing a bar, the bar freezes, and when moving my cursor inside the Gantt chart, the error is logged again



The code is taken over from the demo in the documentation: 

import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';

import { ProjectDetails } from '@shared/models';

import { EditService, EditSettingsModel } from '@syncfusion/ej2-angular-gantt';

@Component({

  selector: 'am-planning',

  templateUrl: './planning.component.html',

  styleUrls: ['./planning.component.scss'],

  providers: [EditService],

  encapsulation: ViewEncapsulation.None,

})

export class PlanningComponent implements OnInit {

  @Input() public project: ProjectDetails;

  public data?: object[];

  public taskSettings?: object;

  public columns?: object[];

  public toolbar?: string[];

  public editSettings?: EditSettingsModel;

  constructor() {}

  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,

          },

        ],

      },

    ];

    this.taskSettings = {

      id: 'TaskID',

      name: 'TaskName',

      startDate: 'StartDate',

      endDate: 'EndDate',

      duration: 'Duration',

      progress: 'Progress',

      child: 'subtasks',

    };

    this.editSettings = {

      allowTaskbarEditing: true,

    };

    this.columns = [

      { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },

      { field: 'TaskName', headerText: 'Task Name', width: '250' },

      { field: 'StartDate', headerText: 'Start Date', width: '150' },

      { field: 'Duration', headerText: 'Duration', width: '150' },

      { field: 'Progress', headerText: 'Progress', width: '150' },

    ];

    this.toolbar = ['Edit'];

  }

}

[Niels Van Goethem]

Solved this by something that was not present in the documentation:

You still need the "allowEditing" property set to true

[Sridharan Jayabalan]

Hi Niels,

Greetings from Syncfusion.

We would like to inform you that the issue you’re encountering with task editing in the Gantt Chart is a known issue on our side. A fix for this will be included in the patch release scheduled for tomorrow, October 29, 2024. Once the update is available, we’ll notify you, and we appreciate your patience in the meantime.

Note - After the fix, you can use allowTaskbarEditing property alone inside the editSettings.

Please feel free to reach out if you have any other questions.

Regards,

Sridharan

[Sridharan Jayabalan]

Niels,

 

We appreciate your patience.

 

The reported issue occurred because checking editing module for taskbarDrag and now the fix for the issue “Console error occurs while taskbar editing without allowEditing property” has been rolled out in our latest patch release (v27.1.57). So upgrade to our latest version to resolve the problem.

 

Sample Link - Evjj8j (forked) - StackBlitz

 

Please get back to us if you need any further assistance.

 

 

Regards,

Sridharan