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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

130984 Jun 14,2017 04:57 PM UTC Jun 15,2017 04:15 PM UTC Angular 1
loading
Tags: ejGantt
Marko
Asked On June 14, 2017 04:57 PM UTC

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 [Syncfusion]
Replied On 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 


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.

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

;