8 Replies Latest reply on Feb 12, 2019 5:38 PM by Wilson Louie-Oracle

    Gantt chart not getting refreshed

    Wrushasen Dakhane
      this.handleViewModeChange = function (event) {
                          if (event.detail.value == 'expand') {
                              self.data = Promise.resolve($.getJSON(app.restUrls().requestExpandPhases + app.selectedLsRn()));
                          } else {
                              self.data = Promise.resolve($.getJSON(app.restUrls().requestCollapsePhases + app.selectedLsRn()));
                          }
                          document.getElementById('gantt').refresh();
                      }
      

       

       

      gantt chart is not getting refreshed, rest calls are made and new data is being fetched. Can you please let me know if I am missing anything.

        • 1. Re: Gantt chart not getting refreshed
          John 'JB' Brock-Oracle

          I'm going to make a few guesses on the larger context for the app Wrushasen...

           

          self.data is the variable for the Gantt task-data attribute or the dependency-data attribute.

           

          If that is the case, I recommend that it be defined as a knockout observable and then updated with the new value as part of the getJSON callback method.

          I would also use the native getJSON promise instead of trying to write your own.  The code would look more like below....

           

          self.data = ko.observable();
          this.handleViewModeChange = function (event) { 
                              if (event.detail.value == 'expand') { 
                                  $.getJSON(app.restUrls().requestExpandPhases + app.selectedLsRn()).then(function(result){
                                        self.data(result);
                                  }); 
                              } else { 
                                  $.getJSON(app.restUrls().requestCollapsePhases + app.selectedLsRn()).then(function(result){
                                        self.data(result);
                                  }); 
                              } 
                              // document.getElementById('gantt').refresh();  <-- you shouldn't need this if self.data is an observable. Not positive on that though, so try it without first.
                          } 
          
          • 2. Re: Gantt chart not getting refreshed
            Wrushasen Dakhane

            Thanks your solution works but I think as it is not inside Promise it fails sometimes. Can you suggest how can achieve the same behaviour using below data fetch command self.data = Promise.resolve($.getJSON(app.restUrls().requestCollapsePhases + app.selectedLsRn()));

            • 3. Re: Gantt chart not getting refreshed
              John 'JB' Brock-Oracle

              When you say. "fails sometimes"  what does that mean?

              What is it doing or not doing?  Are there error messages in the console when it fails?

              • 4. Re: Gantt chart not getting refreshed
                Wrushasen Dakhane

                I have to go back an forth 2-3 times different models and come back then it works.

                 

                I think its not under promise which is causing problem.

                return new Promise(function (resolve, reject) {

                                        $.getJSON(app.restUrls().requestTimeline + app.selectedLsRn()).then(function (data) {

                                            self.requestStartDate = new Date(data.startDate).toISOString();

                                            self.requestEndDate = new Date(data.endDate).toISOString();

                 

                 

                                            self.collection = new oj.Collection(null, {

                                                url: app.restUrls().requestLsRn + app.selectedLsRn(),

                                                model: model,

                                                comparator: 'lsRn'

                                            });

                                            self.dataSource(new oj.CollectionDataGridDataSource(self.collection));

                                            resolve();

                                        });

                                       

                                        if (self.viewmode == 'expand') {

                                            $.getJSON(app.restUrls().requestExpandPhases + app.selectedLsRn()).then(function (result) {

                                                self.data(result);

                                            });

                                        } else {

                                            $.getJSON(app.restUrls().requestCollapsePhases + app.selectedLsRn()).then(function (result) {

                                                self.data(result);

                                            });

                                        }

                                        // Provide shortDesc for better accessibility:

                                    });

                • 5. Re: Gantt chart not getting refreshed
                  Wilson Louie-Oracle

                  Hi Wrushasen,

                   

                  As JB alluded to, if you want to update the component through binding self.data to the component attribute, then self.data should be an observable so that the component gets notified whenever the value of self.data changes. So in JB's example, using Promise.resolve syntax would look like:

                   

                  self.data = ko.observable();  
                  this.handleViewModeChange = function (event) {   
                                      if (event.detail.value == 'expand') {  
                                          self.data(Promise.resolve($.getJSON(app.restUrls().requestExpandPhases + app.selectedLsRn())));  
                                      } else {  
                                          self.data(Promise.resolve($.getJSON(app.restUrls().requestCollapsePhases + app.selectedLsRn())));  
                                      }  
                                  }  
                  

                   

                  If you really don't want to work with observables, then you can directly assign the new value to the component attribute (in this case, looks like it's 'rows') instead of working with self.data:

                  this.handleViewModeChange = function (event) {   
                                      var gantt = document.getElementById('gantt');
                                      if (event.detail.value == 'expand') {  
                                          gantt.rows = Promise.resolve($.getJSON(app.restUrls().requestExpandPhases + app.selectedLsRn()));  
                                      } else {  
                                          gantt.rows = Promise.resolve($.getJSON(app.restUrls().requestCollapsePhases + app.selectedLsRn()));  
                                      }  
                                  }  
                  

                   

                  I'm also unclear on what you mean by 'fail sometimes', but you should probably be catching any Promise/getJSON rejections/errors to debug further.

                   

                  HTH,

                  Wilson

                  1 person found this helpful
                  • 6. Re: Gantt chart not getting refreshed
                    Wrushasen Dakhane

                    this.handleViewModeChange = function (event) {

                                        return new Promise(function (resolve, reject) {

                                            if (event.detail.value == 'expand') {

                                                $.getJSON(app.restUrls().requestExpandPhases + app.selectedLsRn()).then(function (result) {

                                                    self.data(result);

                                                    resolve();

                                                });

                                            } else {

                                                $.getJSON(app.restUrls().requestCollapsePhases + app.selectedLsRn()).then(function (result) {

                                                    self.data(result);

                                                    resolve();

                                                });

                                            }

                                        });

                                        // Provide shortDesc for better accessibility:

                                        self.data.forEach(function (row) {

                                            var task = row.tasks[0];

                                            var assignmentString = row.label;

                                            var startTimeString = "Start Date is " + self.dateConverter.format(task.start);

                                            var endTimeString = "End Date is " + self.dateConverter.format(task.end);

                                            task.shortDesc = assignmentString + ", " + startTimeString + ", " + endTimeString;

                                        });

                     

                     

                                        self.rowsData = self.data;

                                    };

                    • 7. Re: Gantt chart not getting refreshed
                      Wrushasen Dakhane

                      1. Is it possible to restrict tooltip on certain tasks based on condition.

                      2. If start date and end date are same we see the diamond, I do not want to show a diamond rather simple thick line

                      • 8. Re: Gantt chart not getting refreshed
                        Wilson Louie-Oracle

                        1. Please check out the custom tooltip renderer demos. If what you meant is that you want to prevent the tooltip from showing at all for certain tasks, then check for the necessary condition in your tooltip renderer function and return a {preventDefault: true} object. See also the docs.

                        2. There's a type property you can set on your tasks, but setting type to 'normal' for tasks with start == end would just give you a 0-width bar. If you want a thick line, the workaround is you need to make sure the start != end, i.e. make your end = start + delta where delta is small to give you a skinny bar.

                        1 person found this helpful