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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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


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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon