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. Image for the cookie policy date

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

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

1 Reply

JD Jayakumar Duraisamy Syncfusion Team June 15, 2017 04:15 PM UTC

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, 
Please let us know, if you require any other assistance. 
Regards, 
Jayakumar D 


Loader.
Up arrow icon