Updating StripLines breaks chart date range when using instance.setModel

[Martin McSharry]

Hi

On first load we load our gantt chart with no data by passing empty lists to dataSource and Resources.

Once the view is loaded we make a call to the server to fetch the data so that we can populate our chart using the setModel method.

var model = fetchModelFromServer();

$(`#GanttChart`).ejGantt("instance").setModel({

     dataSource: model.dataSource,

     resources: model.resources,

     stripLines: model.stripLines,

     scheduleStartDate: model.scheduleStartDate,

     scheduleEndDate: model.scheduleEndDate

 })

When doing this the date range of the chart is not correctly set, the start and end date of the chart seem random and not related to the dataSource or the provided schedule dates. This bug only appear to happen when data is loaded the first time, any subsequent setModels calls using the first method works fine until the browser is refreshed. A workaround we've found setting stripLines separately as such:

var model = fetchModelFromServer();

$(`#GanttChart`).ejGantt("instance").setModel({

     stripLines: model.stripLines,

 })

$(`#GanttChart`).ejGantt("instance").setModel({

     dataSource: model.dataSource,

     resources: model.resources,

     scheduleStartDate: model.scheduleStartDate,

     scheduleEndDate: model.scheduleEndDate

 })

[Karthikeyan Raja]

Hi Martin, 

 

We have analyzed your query and prepared sample with your requirement but unable to reproduce the reported issue. We are usually making ajax call to server and on ajax success call we get the returned data. So we suggest you  to use same. 

Please find the code snippet below, 

[controller.cs] 

//…… 

 

public object getDatasource() { 

  return Json(new { data = _tasks, resoure = resourceData, start = scheduleStart, end = scheduleEnd }); 

} 

 

[index.cshtml] 

$("#ganttContainer").ejGantt({ 

       dataSource: [], 

       resources: [], 

           //…… 

}); 

$("#update").ejButton({ "click": "onClick", width: "100" }); 

}); 

function onClick(args) { 

   $.ajax({ 

       type: "POST", 

       url: "/Home/getDatasource", 

       dataType: "json", 

       success: function (result) { 

            var model = ej.parseJSON(result); 

            var chartModel = { 

                dataSource: model.data, 

                resources: model.resoure, 

                scheduleStartDate: model.start, 

                scheduleEndDate: model.end 

            }; 

            var ganttObj = $("#ganttContainer").data("ejGantt"); 

            ganttObj.setModel(chartModel); 

       } 

   }); 

} 

 

We have prepared sample with your requirement. Please find the sample from below link 

Sample – https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ1_-_JS_gantt_ajax2066928880 

 

If you are still facing issue, Please revert us with your code for fetchModelFromServer() method or issue reproducable sample. 

  

Regards, 

Karthikeyan Raja 

[Martin McSharry]

Hi Karthikeyan

I've updated the index.cshtml file. I've added stripLines to the model, and now when the button is pressed to update the data, the date range is based off of the stripLine and not the provided "scheduleStartDate" and "scheduleEndDate"

Attachment: Index_52cd978b.zip

[Karthikeyan Raja]

Hi Martin,  

  

We have analyzed your query and able to reproduce the reported scenario. If Gantt schedule start and end dates are defined then schedule header render based on that, otherwise it is validated based on the task’s start and end dates. So we do not validated setModel for schedule start and end date.  

In your provided code snippet, schedule start and end dates are not defined, Hence schedule header rendered based on stripLine. So we suggest you to use the schedule start and end dates at load time. Please find the code snippet below,  

$("#ganttContainer").ejGantt({  

     dataSource: [],  

     resources: [],  

     scheduleStartDate: '01/10/2014',  

     scheduleEndDate: '03/10/2014',  

        //……  

});  

  

//……  

We have prepared sample with your requirement. Please find the sample from below link,  

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ1_-_JS_ajax_stripline-348083066 

   

Please get back to us, if you need any further assistance on this.  

 

Regards, 

Karthikeyan Raja