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

Angular Update scheduleheader settings for gantt and refresh it.

Thread ID:

Created:

Updated:

Platform:

Replies:

129223 Mar 6,2017 05:44 AM UTC Mar 30,2017 06:58 AM UTC JavaScript 4
loading
Tags: ejGantt
Nivedita Vijaivergiya
Asked On March 6, 2017 05:44 AM UTC

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


Nivedita Vijaivergiya
Replied On 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)


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


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

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

;