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
  1. Home
  2. Forum
  3. jQuery
  4. Angular Update scheduleheader settings for gantt and refresh it.

Angular Update scheduleheader settings for gantt and refresh it.

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

6 Replies
JD Jayakumar Duraisamy Syncfusion Team March 7, 2017 01:36 PM UTC

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. 
Regards, 
Jayakumar D 


NV Nivedita Vijaivergiya March 10, 2017 10:57 AM UTC

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)


JD Jayakumar Duraisamy Syncfusion Team March 14, 2017 04:01 AM UTC

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 


JD Jayakumar Duraisamy Syncfusion Team March 30, 2017 06:58 AM UTC

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:                            
 
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

PA PROCOS AG March 28, 2019 11:29 AM UTC

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)"

JS Jonesherine Stephen Syncfusion Team March 29, 2019 11:56 AM UTC

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. 
 
Regards, 
Jone sherine P S 


Loader.
Up arrow icon