1. Home
  2. Forum
  3. Vue
  4. Setting datasource of gantt hangs web application

Setting datasource of gantt hangs web application

Hi all, 

I made a proof-of-concept for a demo for a client with the Gantt chart control previously. 

I am now moving on and implementing the "full version", for some reason after I make a HTTP get to my web api controller, the page appears to hang indefinitely.

The JSON I returning for the datasource of the Gantt control is valid (as it worked fine with the proof-of-concept version).

Here is a small snippet of the JSON structure (removed sensitive information):

[
  {
    "id": 1,
    "activityId": "1300",
    "activityName": "Start",
    "code": "...",
    "name": "...",
    "indicator": "",
    "predecessorId": "",
    "startDate": "04/03/2019",
    "endDate": "19/04/2019",
    "children": [
      {
        "id": 3,
        "activityId": "1301",
        "activityName": "...",
        "code": "...",
        "name": "...",
        "indicator": "",
        "predecessorId": "1FS",
        "startDate": "04/03/2019",
        "endDate": "05/03/2019",
        "children": []
      }
    ]
  },
  {
    "id": 26,
    "activityId": "1500",
    "activityName": "...",
    "code": "...",
    "name": "...",
    "indicator": "...",
    "predecessorId": "60FS",
    "startDate": "27/04/2019",
    "endDate": "06/05/2019",
    "children": [
      {
        "id": 22,
        "activityId": "1325",
        "activityName": "...",
        "code": "...",
        "name": "...",
        "indicator": "",
        "predecessorId": "26FS",
        "startDate": "27/04/2019",
        "endDate": "27/04/2019",
        "children": []
      },
      {
        "id": 28,
        "activityId": "1511",
        "activityName": "...",
        "code": "...",
        "name": "...",
        "indicator": "",
        "predecessorId": "26FS,22FS",
        "startDate": "27/04/2019",
        "endDate": "27/04/2019",
        "children": []
      }
    ]
  }
]


If anyone can tell me why the control cannot render I would greatly appreciate it.

Thank you

Attachment: vue_2edbff1e.zip

3 Replies
PP Pooja Priya Krishna Moorthy Syncfusion Team December 4, 2020 11:35 AM UTC

Hi Sean, 
We prepared a simple sample with the code snippet shared by you. We fetched data using HTTP get as like below code example. 
 
    vm.chartData = result.data.Items; 
}) 
.catch((err) => { 
   console.log(err); 
}); 
 
 
 
Also please share us below details. 
  1. Whether you are using large no. of data?
  2. Any network error having in console on fetching the data through ajax
 
Also we would like to inform you that the page may become unresponsive, when large number of records are loaded. Currently we are implementing the virtual scroll support. Using this support, we can improve the performance at load time. This will be included in our upcoming Volume 4 release which is expected to be rolled out at the mid of December 2020. Until then we appreciate your patience. 
 
Regards, 
Pooja K. 


SM Sean McDonnell December 7, 2020 11:36 AM UTC

Hi SF team,

The issue was due to the JSON data using string types for the dates being returned. 

Once I changed the dates to strings it worked. 



GM Gopinath Muniraj Syncfusion Team December 8, 2020 04:01 AM UTC

Hi Sean, 
We are glad to know that the issue was resolved. Please contact us if you need any further assistance. 
Thanks, 
Gopinath M 


Loader.
Up arrow icon