Problem refreshing data with ej.Datamanager

[oscar bartolome]

Hi,

I've implemented a data refreshing system for my gantt. It is simply a button that when is pressed It calls the same method as when the first data load:

requestData(){

var me = this;

this.dataManager = new ej.DataManager({ url: "http://xxx",

async: false,

crossDomain: true});

var query = new ej.Query();

var dataObj = this.dataManager.executeQuery(query);

dataObj.done(function (e) {

data = e.result;

});

}

The first load goes fine, but when refreshing, the most of the times it freezes. We have realized that the HTTP call is pending (forever), but we know that the API we have called has sent the response:

 Any idea?

Thanks

[John Rajaram]

Hi Oscar, 

Thank you for contacting Syncfusion support. 

We have analyzed your reported issue and screenshots, but we are unable to reproduce the reported issue in our end. We have prepared the sample with details you have shared with us. In this sample we had refresh the Gantt with same data through button click action and the sample is working fine without any performance lag.  

Please refer the below code snippet. 

<button id="refreshGantt">Refresh</button> 

 

[TS] 

 

onClick(e) { 

        

        if ($(e.target).attr("id") == "refreshGantt") { 

            var data = this.getData(); 

            var obj = $("#resourceGantt").data("ejGantt"); 

            obj.option("dataSource", data); 

        } 

 

    } 

getData() { 

        debugger; 

        var data = [], 

         dataManager = new ej.DataManager({ 

             url: "http://internaldemo.syncfusion.com:8090/", 

            async: false, 

            crossDoamin: true 

        }), 

        query = new ej.Query(), 

        dataObj = dataManager.executeQuery(query); 

        dataObj.done(function (e) { 

            data = e.result.resourceGanttData; 

        }) 

        return data 

    } 

Also you can find the sample following location. 

http://www.syncfusion.com/downloads/support/forum/139670/ze/Datamanager_Sample467810622 

Please let us know if the issue still occurs. 

Regards, 

John R 

[oscar bartolome]

Hi, 

doing some tests, we've realized that the problem is not the Http call, we have tried writing the data directly in the code and it happens too. 

Debugging the application, it freezes when doing the refreshing:

var obj = $("#my_gantt").data("ejGantt");

obj.option("dataSource", new_Data); //<- Here

It happens almost all the times, not always, but the most.

Other important thing is that when loading small data (20 task more or less) it doesn't happen. But when we want to load a JSON file of 468KB (132 parent tasks and 234 subtasks, with 30 properties each one more or less) it freezes when refreshing and sometimes in the first load too.

Note that we use the virtualization mode (and have tried without it too).

Could you please try loading data of the same size? Is there any data size restriction? We need to know because is mandatory for us loading data of this size or bigger.

Thanks

[John Rajaram]

Hi Oscar, 

We would like to let you know that, Gantt control does not depends on the file size of the data. Hence we can render more number of records in Gantt. But its performance is depends on the following categories. 

1.     Number of columns 

2.     Chart Timeline length (Number of dates between schedule start and end date) 

3.     Number of Predecessor links 

So please provide us the above details. It will be helpful for us to ensure in our side. 

Note: We request you to ensure the appropriate dates are given to all the records. Because if we provide improper (null) dates, it leads the Gantt to crash. 

Also as per your suggestion we have prepared the Gantt sample with “5000” records. In this sample we had refresh the Gantt with same data through button click action and the sample is working fine without any performance lag.   

Please refer the below code snippet.  

<button id="refreshGantt">Refresh</button>  

   

[TS] 

constructor() { 

       this.ganttData = getData(); 

       

      function getData() { 

          var data = []; 

          var x = 0; 

          for (var i = 0; i < 556; i++) { 

              var parent = {}; 

              parent["TaskId"] = ++x; 

              parent["TaskName"] = "Task " + x; 

              parent["StartDate"] = new Date("01/09/2017"); 

              parent["EndDate"] = new Date("01/13/2017"); 

              parent["Duration"] = 5; 

              parent["Status"] = Math.round(Math.random() * 100); 

              var d = []; 

              for (var j = 1; j < 3; j++) { 

                 var child = {}; 

                  child["TaskId"] = ++x; 

                  child["TaskName"] = "Task " + x; 

                  child["StartDate"] = new Date("01/09/2017"); 

                  child["EndDate"] = new Date("01/13/2017"); 

                  child["Duration"] = 5; 

                  child["Status"] = Math.round(Math.random() * 100); 

                  var y = []; 

                  for (var k = 1; k < 4; k++) { 

                     var c = {}; 

                      c["TaskId"] = ++x; 

                      c["TaskName"] = "Task " + x; 

                      c["StartDate"] = new Date("01/09/2017"); 

                      c["EndDate"] = new Date("01/13/2017"); 

                      c["Duration"] = 5; 

                      c["Status"] = Math.round(Math.random() * 100); 

                      y.push(c); 

                  } 

                  child["Child"] = y; 

                  d.push(child); 

              } 

              parent["Child"] = d; 

              data[i] = parent; 

          } 

          return data; 

      } 

onClick(event) { 

        if ($(event.target).attr("id") == "refreshGantt")  

        { 

            var data = this.ganttData; 

            var obj = $("#GanttControl").data("ejGantt"); 

            obj.option("dataSource", data);  

        } 

    } 

We have also prepared the sample for your reference, please find the sample from below ink 

Link: http://www.syncfusion.com/downloads/support/forum/139670/ze/Gantt_refresh1593803233 

Please let us know if you are still facing the crash issue. 

Regards, 

John R 

[oscar bartolome]

Hi,

I've tested all the dates and I've seen that the cause of blocking  is tring to change endDate based on startDate. I'll detail this:

for(var k = 0; k < opListByResource.length; k++){

if(opListByResource[k-1] != undefined){

opListByResource[k].startDate = opListByResource[k-1].endDate;

}

else{

opListByResource[k].startDate = new Date();

}

opListByResource[k]].endDate = new Date(opListByResource[k].startDate.getTime() + opListByResource[k].duration * 60000);

}

}

I've tried with 'moment.js' library too:

for(var k = 0; k < opListByResource.length; k++){

if(opListByResource[k-1] != undefined){

opListByResource[k].startDate = opListByResource[k-1].endDate;

}

else{

opListByResource[k].startDate = new Date();

}

opListByResource[k][l].endDate = moment(opListByResource[k].startDate).add(opListByResource[k].duration, 'minutes');

}

}

But assigning on the refreshing this calculation to endDate makes the application to freeze.

Thanks.

[John Rajaram]

Hi Oscar, 

We have analyzed the provided code example. To execute the provided action, the data source must have proper startDate, endDate and duration values. Missing of any of these parameter leads to invalid date calculations. So we request you to ensure the proper date values for the fields that highlighted in the below screenshot. 

 

If still issue exists at your end kindly share us your data source with us. This would be helpful for us to serve you better. 

Regards, 

John R 

[oscar bartolome]

Hi, 

finally we have solved the problem. 

The "Date" format was causing some kind of problem (freezing) sometimes when refreshing and sometimes when first loading in this line:

opListByResource[k]].endDate = new Date(opListByResource[k].startDate.getTime() + opListByResource[k].duration * 60000);

Trying with 'moment' library we converted it into this format "0000-00-00T00:00:00-00:00"  :

opListByResource[k][l].endDate = moment(opListByResource[k].startDate).add(opListByResource[k].duration, 'minutes').format();

And now doesn't freeze and works fine.

Hope this helps to any people with the same problem.

Thanks a lot.

[John Rajaram]

Hi Oscar, 

We are glad to know that your issue has been resolved. Please let us know if you require any other assistance. 

Regards, 

John R