Cannot edit list of tasks and header view at the same time

[Marko]

Hi,

I have gantt:

<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

[Jayakumar Duraisamy]

Hi Marko, 

Thanks for contacting Syncfusion support. 

We have analyzed the reported issue. In Gantt, we have a method called “setModel” for dynamically update the value of the API’s. By using setModel, we can update the “scheduleHeaderSettings” and change the new data source in the same method. 

Please refer the following code snippet, 

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

 

        } 

We have also prepared sample in Angular 2 for your reference, please find the sample location as below, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Gantt_angular2-1309438208.zip 

Please let us know, if you require any other assistance. 

Regards, 

Jayakumar D