Angular Update scheduleheader settings for gantt and refresh it.

[Nivedita Vijaivergiya]

Hi,

I yhave a dropdown with scale day, month, week and year. On selection change, i have to refresh Gantt to reflect desired scale.

 How can i achieve this?

I tried it like , but its not working for me.

 $scope.update = function () {

                    if ($scope.scale == "Week") {

                        scheduleHeaderSettings = {

                            scheduleHeaderType: ej.Gantt.ScheduleHeaderType.Week,

                            weekHeaderFormat: "MMM dd , yyyy",

                            dayHeaderFormat: "ddd",

                        }

                    }

                    else if ($scope.scale == "Month") {

                        scheduleHeaderSettings = {

                            scheduleHeaderType: ej.Gantt.ScheduleHeaderType.Month,

                            monthHeaderFormat: "MMM yyyy",

                            weekHeaderFormat: "M/dd",

                        }

                    }

                    else {

                        scheduleHeaderSettings = {

                            scheduleHeaderType: ej.Gantt.ScheduleHeaderType.Year,

                            yearHeaderFormat: "yyyy",

                            monthHeaderFormat: "MMM",

                        }

                    }

                    $scope.scheduleHeaderSettings = scheduleHeaderSettings;

                

                    var ganttObj = $("#angulargantt").ejGantt("instance");

                    ganttObj.setModel({ "scheduleHeaderSettings": scheduleHeaderSettings }); 

[Jayakumar Duraisamy]

Hi Nivedita, 

Thanks for contacting syncfusion support, 

We can update the timescale of Gantt control by using “reRenderChart” method, before calling this method we have to update the time scale mode value in “sheduleHeaderSettings” property. 

Please find the code snippet for this. 

if ($scope.scale == "Week") { 

    scheduleHeaderSettings = { 

    scheduleHeaderType: ej.Gantt.ScheduleHeaderType.Week, 

    weekHeaderFormat: "MMM dd , yyyy", 

    dayHeaderFormat: "ddd", 

    } 

  } 

  $scope.scheduleHeaderSettings = scheduleHeaderSettings; 

  var ganttObject = $("#angulargantt").data("ejGantt"); 

  //Re-Rendering GanttChart to update scheduleHeaderType. 

  ganttObject.reRenderChart(scheduleHeaderSettings.scheduleHeaderType);                                               

 

We have prepared a sample for your reference,  please find the sample from below location. 

Sample: http://jsplayground.syncfusion.com/Sync_3xwr3oia 

Regards, 

Jayakumar D 

[Nivedita Vijaivergiya]

Above solution is working for me but while updating timescalemode, i am getting following error in console.

TypeError: Cannot use 'in' operator to search for 'modelChange' in null

    at Object._trigger (ej.web.all.min.js:10)

    at Object.setModel (ej.web.all.min.js:10)

    at Object.option (ej.web.all.min.js:10)

    at ChildScope.raise (ej.widget.angular.min.js:10)

    at Object.fn (ej.web.all.min.js:10)

    at Scope.$digest (angular.js:15826)

    at Scope.$apply (angular.js:16097)

    at HTMLSelectElement.<anonymous> (angular.js:28525)

    at HTMLSelectElement.dispatch (jquery-2.1.4.js:4435)

    at HTMLSelectElement.elemData.handle (jquery-2.1.4.js:4121)

Also while destroying gantt, i am getting following console error

TypeError: Cannot read property 'off' of null

    at Object.destroyWidget (ej.widget.angular.min.js:10)

    at ej.widget.angular.min.js:10

    at ChildScope.$broadcast (angular.js:16311)

    at ChildScope.$destroy (angular.js:15923)

    at Object.ngIfWatchAction [as fn] (angular.js:24080)

    at Scope.$digest (angular.js:15826)

    at Scope.$apply (angular.js:16097)

    at HTMLInputElement.<anonymous> (angular.js:23554)

    at HTMLInputElement.dispatch (jquery-2.1.4.js:4435)

    at HTMLInputElement.elemData.handle (jquery-2.1.4.js:4121)

[Jayakumar Duraisamy]

Hi Nivedita, 

We regret for the inconvenience caused. 

We could reproduce the issue, when change the time scale mode dynamically in Angularjs and we have confirmed this as bug and logged a report on this. The fix for the issue will be available in our upcoming main release Volume 2, 2017 which is expected to be out at the end of April 2017. 

Please let us know if you require further assistance on this.

Regards, 

Jayakumar D 

[Jayakumar Duraisamy]

Hi Nivedita, 

We are glad to announce that our Essential Studio 2017 Volume 1 Service pack 2 Release v15.1.0.41 is rolled out which included bug fix for the reported issue and is available for download under the following link:                            

Link: https://www.syncfusion.com/forums/129701/essential-studio-2017-volume-1-service-pack-2-release-v15-1-0-41-available-for-download 

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

 

Regards, 

Jayakumar D

[PROCOS AG]

The destroy issue seems to be still valid: we use the latest ej1 component "syncfusion-javascript": "16.4.52" within our Angular 7 SPA and get a TypeError: Cannot use 'in' operator to search for 'destroy' on destroy of the gantt control.

Some infos that might be related: "client":"Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36","clientLocaleId":"de-DE"

Stack trace:

TypeError: Cannot use 'in' operator to search for 'destroy' in null

    at Object._trigger (http://localhost:51941/ui-ltr/vendor.js:319566:13292)

    at Object.destroy (http://localhost:51941/ui-ltr/vendor.js:319566:12038)

    at GanttComponent.push../node_modules/ej-angular2/src/ej/core.js.EJComponents.ngOnDestroy (http://localhost:51941/ui-ltr/vendor.js:274504:31)

    at callProviderLifecycles (http://localhost:51941/ui-ltr/vendor.js:65170:18)

    at callElementProvidersLifecycles (http://localhost:51941/ui-ltr/vendor.js:65138:13)

    at callLifecycleHooksChildrenFirst (http://localhost:51941/ui-ltr/vendor.js:65128:29)

    at destroyView (http://localhost:51941/ui-ltr/vendor.js:66190:5)

    at callViewAction (http://localhost:51941/ui-ltr/vendor.js:66316:13)

    at execEmbeddedViewsAction (http://localhost:51941/ui-ltr/vendor.js:66259:17)

    at destroyView (http://localhost:51941/ui-ltr/vendor.js:66188:5)"

[Jonesherine Stephen]

Hi Procos, 

 

We have prepared the Gantt sample and destroyed using _destroy method and dynamically changed Gantt schedule using reRenderChart method. We are unable to reproduce the reported issue. Can you please modify our sample based on your application along with the replication procedure or else share us more details/code examples related to this query. This would be helpful for us to proceed further. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/ganttdestroy1391557845 

 

Regards, 

Jone sherine P S