Cannot read properties of undefined (reading 'ganttProperties')

[Mahdoui Hafedh]

Hi,

Im trying to use ejGantt with Redux(Ngrx) in my project simulator web app, so all actions must to be done in the state, so i get Data from store like bellow :

public ngOnInit(): void {

this.subscriptions.push(

this.store.pipe(select(getSelectedInterval)).subscribe(interval => {

this.selectedInterval = interval;

this.timelineSettings = timeLineSettingsRender(this.selectedInterval);

}),

this.store.pipe(select(getSelectedDateRange)).subscribe(dateRange => {

this.dateRange = justifyDateRange(dateRange);

this.projectStartDate = new Date(this.dateRange.startDate);

this.projectEndDate = new Date(this.dateRange.endDate);

}),

// Get ProjectList Form the State

this.store.pipe(select(getSimulatedProjectList)).subscribe(projectList => {

this.data = projectList.map(project => {

return {

...project,

costCenters: project.costCenters.map(costCenter => {

return {

...costCenter

}

})

}

});

})

);

// Set Gantt Settings

this.editSettings = EditSettings;

this.columns = Columns;

this.taskSettings = TaskFields;

this.splitterSettings = SplitterSettings;

this.gridLines = GridLines;

this.labelSettings = LabelSettings;

this.toolbar = Toolbar;

this.contextMenuItems = ContextMenuItems;

}

and i have two way to manage my Projects (edit Tasks), the first way is by edit dialog and every thing work properly and the second way is directly in Gantt Chart by projection or transition task and i update the State with TaskBarEdited $event in html :

<div class="gantt-section">

<ejs-gantt

#gantt

id="gantt"

[height]="Hight"

[dataSource]="data"

[taskFields]="taskSettings"

[allowSelection]="true"

[treeColumnIndex]="1"

[labelSettings]="labelSettings"

[enableVirtualization]="false"

[projectStartDate]="projectStartDate"

[projectEndDate]="projectEndDate"

[highlightWeekends]="true"

[toolbar]="toolbar"

[allowRowDragAndDrop]="true"

[splitterSettings]="splitterSettings"

[editSettings]="editSettings"

[columns]="columns"

[allowResizing]="true"

[timelineSettings]="timelineSettings"

[enableContextMenu]="true"

[gridLines]="gridLines"

[contextMenuItems]="contextMenuItems"

(contextMenuClick)="contextMenuClick($event)"

(rowDataBound)="rowDataBound($event)"

(toolbarClick)="toolbarClick($event)"

(taskbarEdited)="taskbarEdited($event)"

(rowSelected)="rowSelected($event)"

(dataStateChange)="dataStateChange($event)"

>

ejs-gantt>

div>

and in ts it like :

public taskbarEdited(event: ITaskbarEditedEventArgs): void {

let editedTask = event.data?.taskData as any;

let parentEditedTask: Project;

let childIndex: number;

let isParent = !editedTask.parentId;

if (!isParent) {

parentEditedTask = (this.ganttObj.getTaskByUniqueID(event.data?.parentUniqueID as string).taskData) as Project;

const newParentTask = calculateAllChildPeriodValues(parentEditedTask);

this.store.dispatch(new UpdateProject({ updatedProject: newParentTask }));

} else {

editedTask = { ...calculateAllChildPeriodValues(editedTask) };

this.store.dispatch(new UpdateProject({ updatedProject: editedTask }));

}

}

and this where the problem appear after 2 or 3 successfully edit

and some time it appear in a repetitive way according to the mouse movement until the app crash

any help will be appreciated

Thanks.

[Pooja Priya Krishna Moorthy]

Hi Mahdoui, 

  

We have logged a custom sample for your requirement. The sample will be provided on 11^th February 2022. We appreciate your patience until then. 

  

Regards, 

Premkumar S

[Monisha Sivanthilingam]

Hi Mahdoui, 

 

Thank you for your patience!!! 

 

We have prepared a sample of Gantt working in Redux. We have performed CRUD operations in actionComplete event . 

 

 

The actionComplete event is triggered to update the Gantt data. You can perform the save operation based on the event arguments and you need to call the endEdit method to indicate the completion of the save operation. We have shared the code snippets of actionComplete event. Click on the link to get more information about actionComplete and endEdit   events . 

 

appComponent.ts 

 

public actionComplete(args: any) { 

    if (args.requestType == "save") { 

      this.TaskService.updateRecord(this.tasks).subscribe(() => { 

        args.endEdit(); 

    }, (e) => { 

        this.ganttChart.endEdit(); 

    } 

    ); 

  } 

    if (args.requestType == 'add') { 

      this.TaskService.addRecord(this.tasks).subscribe(() => { 

        args.endEdit(); 

      }); 

      this.TaskService.addRecord(this.tasks).subscribe(() => { }, error => console.log(error), () => { 

        args.endEdit(); 

      }); 

    } 

    if (args.requestType == 'delete') { 

      this.TaskService.deleteRecord(this.tasks).subscribe(() => { 

        args.endEdit(); 

      }); 

    } 

  } 

 

 

 

We have defined the functions such as add, delete,update in task-store.service.ts file. Please refer below sample for more information. 

 

addRecord(state: any): Observable<any> {// you can apply empty string instead of state.data to get failure(error) 

    return this.http.post<TaskModel>(this.apiUrl, state.data, httpOptions); 

  } 

  /** DELETE: delete the record from the server */ 

  deleteRecord(state: any): Observable<any> { 

    const id = state.data[0].id; 

    const url = `${this.apiUrl}/${id}`; 

    return this.http.delete<TaskModel>(url, httpOptions); 

  } 

  /** PUT: update the record on the server */ 

  updateRecord(state: any): Observable<any> { 

    return this.http.put(this.apiUrl, state.data, httpOptions); 

  } 

 

Please contact us for further assistance. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/NGRX(2~1-705102002  

 

Regards, 

Premkumar S