Add Record Cannot read property 'addRecord' of undefined

[Gregori]

Hi guys,

I have 2 questions:

     1 - I'm trying to add a new record in my Gantt chart, but I receive the error ''ERROR TypeError: Cannot read property 'addRecord' of undefined'. I know that this error is because I'm not passing the parameter "Row Position". In some examples, I saw "ej.Gantt.AddRowPosition.Child)". But, I don't know where "ej" comes from.

     2 - The Gantt chart component from Angular 2+ have dependency from Jquery to work? 

      

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

import { ToolbarItem, EditSettingsModel, GanttComponent, Gantt, GanttModel, EditSettings } from '@syncfusion/ej2-angular-gantt';

@Component({

  selector: 'app-syncfusion-gantt',

  template:

    `

    <button (click)="addRecord()">Add</button>

    <ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings"

    [editSettings]="editSettings" [toolbar]="toolbar" [columns]="columns" [addDialogFields]="addDialogFields"

     [editDialogFields]="editDialogFields" ></ejs-gantt>`,

  encapsulation: ViewEncapsulation.None

})

export class SyncfusionGanttComponent implements OnInit {

  public data: object[];

  public taskSettings: object;

  public editSettings: EditSettingsModel;

  public toolbar: ToolbarItem[];

  public columns: object[];

  public addDialogFields: object[];

  public editDialogFields: object[];

  public ganttObj: GanttComponent;

  public ed: EditSettings;

  public ngOnInit() {

    this.data = [

      {

        TaskID: 1,

        TaskName: 'Project Initiation',

        StartDate: new Date('04/02/2019'),

        EndDate: new Date('04/21/2019'),

        ProjectNumber: 23,

        subtasks: [

          {

            TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'),

            Duration: 4, Progress: 50, ProjectNumber: 34

          }

        ]

      },

      {

        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',

      dependency: 'Predecessor',

      child: 'subtasks'

    };

    this.editSettings = {

      allowAdding: true,

      allowEditing: true,

      allowDeleting: true,

      allowTaskbarEditing: true,

      showDeleteConfirmDialog: true

    };

    this.columns = [

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

      { field: 'ProjectNumber', headerText: 'Project Number', textAlign: 'Left', width: '150' },

      { 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.addDialogFields = [

      { type: 'General', fields: ['TaskID', 'TaskName', 'StartDate', 'Duration', 'Progress', 'ProjectNumber'] },

      { type: 'Dependency' },

      { type: 'Resources' },

      { type: 'Notes' },

    ],

      this.editDialogFields = [

        { type: 'General', fields: ['TaskID', 'TaskName', 'StartDate', 'Duration', 'Progress', 'ProjectNumber'] },

        { type: 'Dependency' },

        { type: 'Resources' }

      ];

    this.toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'];

  }

  addRecord = () => {

    const data = {

      TaskID: 1,

      TaskName: 'Project Initiation',

      StartDate: new Date('04/02/2019'),

      EndDate: new Date('04/21/2019'),

      ProjectNumber: 23

    };

    this.ganttObj.addRecord(data, );

  }

}

[Saranya Dhayalan]

Hi Gregori, 

Thank you for contacting Syncfusion support 

 

Please find the response below. 

 

No	Queries	Syncfusion Comments
1	I'm trying to add a new record in my Gantt chart, but I receive the error ''ERROR TypeError: Cannot read property 'addRecord' of undefined'.	We suspect that you have referred the jQuery based Gantt(EJ1 Gantt) documentation. Please refer the below documentation link to add records dynamically in pure JavaScript based Gantt(EJ2-Gantt)  Document - https://ej2.syncfusion.com/angular/documentation/gantt/managing-tasks/?no-cache=1#using-method
2	The Gantt chart component from Angular 2+ have dependency from Jquery to work?	No, in EJ2 Gantt, it is not necessary to use jQuery.

 

Please get back to us if you require further assistance on this. 

 

Regards, 

Saranya D