<ej-gantt id="GanttControl"
...
[dataSource]="ganttData"
...>
And I have function clickB, which is called when botton is clicked:
clickB(){
const ganttObject = $("#GanttControl").ejGantt("instance");
ganttObject.model.scheduleHeaderSettings.monthHeaderFormat = "MMM yyyy";
ganttObject.model.scheduleHeaderSettings.weekHeaderFormat = "dd/M";
ganttObject.model.scheduleHeaderSettings.scheduleHeaderType = ej.Gantt.ScheduleHeaderType.Month;
ganttObject.reRenderChart(ej.Gantt.ScheduleHeaderType.Month);
this.ganttData = this.newData;
}
And now I have realized, that i cannot call reRenderChart and change data source at the same time, beacuse it returns an error:
EXCEPTION: valFn is not a function
This error is called in node_modules/ej-angular2/src/ej/core.js at 159 line, where valFn is null:
if (key.endsWith('.two')) {
var oKey = key.replace('.two', ''), valFn = ej.getObject(oKey, this.widget['model']);
valFn(element.currentValue, true);
ej.createObject(oKey, valFn, ngChanges);
}
I also tried first to set data source and then call function reRenderChart but it didn't help.
It also didn't work when I set to read data source from service (so there was 100ms delay).
If I try only to change view to month or only to change data source, then function works fine.
Is there any work around or other solution?
My full stack trace:
core.umd.js:3069 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ core.umd.js:3069
next @ core.umd.js:8041
schedulerFn @ core.umd.js:3689
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:3675
NgZone.triggerError @ core.umd.js:4040
onHandleError @ core.umd.js:4001
ZoneDelegate.handleError @ zone.js:338
Zone.runTask @ zone.js:169
ZoneTask.invoke @ zone.js:420
core.umd.js:3070 TypeError: valFn is not a function
at GanttComponent.ngOnChanges (core.ts:183)
at Wrapper_GanttComponent.ngDoCheck (/EJAngular2Module/GanttComponent/wrapper.ngfactory.js:1439)
at View_GridComponent1.detectChangesInternal (/AppModule/GridComponent/component.ngfactory.js:90)
at View_GridComponent1.AppView.detectChanges (core.umd.js:12208)
at ViewContainer.detectChangesInNestedViews (core.umd.js:12466)
at CompiledTemplate.proxyViewClass.View_GridComponent0.detectChangesInternal (/AppModule/GridComponent/component.ngfactory.js:191)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (core.umd.js:12208)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (core.umd.js:12193)
at CompiledTemplate.proxyViewClass.View_GridComponent_Host0.detectChangesInternal (/AppModule/GridComponent/host.ngfactory.js:27)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (core.umd.js:12208)
at ViewContainer.detectChangesInNestedViews (core.umd.js:12466)
at CompiledTemplate.proxyViewClass.View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:86)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (core.umd.js:12208)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (core.umd.js:12193)
at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:27)
ErrorHandler.handleError @ core.umd.js:3070
next @ core.umd.js:8041
schedulerFn @ core.umd.js:3689
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:3675
NgZone.triggerError @ core.umd.js:4040
onHandleError @ core.umd.js:4001
ZoneDelegate.handleError @ zone.js:338
Zone.runTask @ zone.js:169
ZoneTask.invoke @ zone.js:420
Subscriber.ts:241 Uncaught TypeError: valFn is not a function
at GanttComponent.ngOnChanges (core.ts:183)
at Wrapper_GanttComponent.ngDoCheck (/EJAngular2Module/GanttComponent/wrapper.ngfactory.js:1439)
at View_GridComponent1.detectChangesInternal (/AppModule/GridComponent/component.ngfactory.js:90)
at View_GridComponent1.AppView.detectChanges (core.umd.js:12208)
at ViewContainer.detectChangesInNestedViews (core.umd.js:12466)
at CompiledTemplate.proxyViewClass.View_GridComponent0.detectChangesInternal (/AppModule/GridComponent/component.ngfactory.js:191)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (core.umd.js:12208)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (core.umd.js:12193)
at CompiledTemplate.proxyViewClass.View_GridComponent_Host0.detectChangesInternal (/AppModule/GridComponent/host.ngfactory.js:27)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (core.umd.js:12208)
at ViewContainer.detectChangesInNestedViews (core.umd.js:12466)
at CompiledTemplate.proxyViewClass.View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:86)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (core.umd.js:12208)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (core.umd.js:12193)
at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:27)
Thank you for answer in advence.
Marko
clicked(e){
var newData = [{
taskID: 1,
taskName: "Design",
startDate: "02/03/2014",
endDate: "02/07/2014",
progress: 100,
duration: 5,
subtasks: [
{ taskID: 2, taskName: "Plan", startDate: "02/03/2014", endDate: "02/07/2014", duration: 5, progress: 100 },
{ taskID: 3, taskName: "Plan", startDate: "02/03/2014", endDate: "02/07/2014", duration: 5 },
{ taskID: 4, taskName: "Allocate", startDate: "02/03/2014", endDate: "02/07/2014", duration: 5, progress: 100 },
{ taskID: 5, taskName: "Planning", startDate: "02/07/2014", endDate: "02/07/2014", duration: 0, progress: 0 }
]
}];
// Change the new data source
this.ganttData = newData;
var ganttObject = $("#GanttControl").ejGantt("instance"),
scheduleHeaderSettings;
ganttObject.model.scheduleHeaderSettings.monthHeaderFormat = "MMM yyyy";
ganttObject.model.scheduleHeaderSettings.weekHeaderFormat = "dd/M";
scheduleHeaderSettings = {"scheduleHeaderType": ej.Gantt.ScheduleHeaderType.Month};
// Dynamically update the scheduleHeaderSettings
ganttObject.setModel({"scheduleHeaderSettings":scheduleHeaderSettings});
} |