Add Record Cannot read property 'addRecord' of undefined

Thread ID:	Created:	Updated:	Platform:	Replies:
148365	Oct 16,2019 06:22 PM UTC	Oct 17,2019 08:53 AM UTC	Angular - EJ 2	1

Subscribe to this post

Tags: Gantt Chart

Gregori

Asked On October 16, 2019 06:22 PM UTC

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, );
  }
}

Reply | Reply with quote

Saranya Dhayalan [Syncfusion]

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

Reply | Reply with quote

Add Record Cannot read property 'addRecord' of undefined

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US