We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Add Record Cannot read property 'addRecord' of undefined

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 { ComponentViewEncapsulationOnInitViewChild } from '@angular/core';
import { ToolbarItemEditSettingsModelGanttComponentGanttGanttModelEditSettings } 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 dataobject[];
  public taskSettingsobject;
  public editSettingsEditSettingsModel;
  public toolbarToolbarItem[];
  public columnsobject[];
  public addDialogFieldsobject[];
  public editDialogFieldsobject[];
  public ganttObjGanttComponent;
  public edEditSettings;

  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: 2TaskName: 'Identify Site location'StartDate: new Date('04/02/2019'),
            Duration: 4Progress: 50ProjectNumber: 34
          }
        ]
      },
      {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
          { TaskID: 6TaskName: 'Develop floor plan for estimation'StartDate: new Date('04/04/2019'), Duration: 3Progress: 50 },
          { TaskID: 7TaskName: 'List materials'StartDate: new Date('04/04/2019'), Duration: 3Progress: 50 },
          { TaskID: 8TaskName: 'Estimation approval'StartDate: new Date('04/04/2019'), Duration: 3Progress: 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, );
  }
}


1 Reply

SD Saranya Dhayalan Syncfusion Team October 17, 2019 08:53 AM UTC

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) 
 
 
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 


Loader.
Live Chat Icon For mobile
Up arrow icon