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. Image for the cookie policy date

Vue 17 beta changing dynamically Gantt dataSource doesn't refresh the control

I'm using the new Gantt control in Vue beta 17.1.32 like this:

  <ejs-gantt ref='gantt' 
        dateFormat="dd/MM/yyyy hh:mm"
        height = "100%"
        durationUnit= "Hour"
        :timelineSettings= "timelineSettings"
        :dayWorkingTime= "dayWorkingTime">

Initially works fine but if later I reload the data and changing the events the control doesn't refresh and the new data is not displayed.
I tried assigning the events with a new json array or using a DataManager as dataSource and executing a new query but none of them worked.

If I use a grid with the same dataSource it works and the new data is show in the grid

I'm doing something wrong or it's a bug?


6 Replies

JD Jayakumar Duraisamy Syncfusion Team March 19, 2019 05:40 AM UTC

Hi Jaume, 
Greeting from Syncfusion support. 
We would like to thank you for using our new Gantt component in EJ2. We have analyzed your reported query and dynamic updating the data source support not available in our EJ2 Gantt beta version, but it will be available in our Volume 1 2019 main release which is expected to roll-out at the end of March 2019. 
Please let us know, if you need further assistance. 
Jayakumar D 

MS Mydeen S N Syncfusion Team April 4, 2019 01:30 PM UTC

Hi Jaume, 
We regret the inconvenience caused. 
We are working on this feature support for updating the Gantt’s data source dynamically, as we need to ensure the support in multiple use cases, we need more time for the implementation. We are sure that we will implement this support for updating the data source dynamically and will include this feature in our upcoming Volume 1 2019, service pack 1 release which is expected to be available on mid of May,2019. 
We have also created a feedback regarding this support, you can track it using the below link, 
Please let us know, if you need further assistance. 

Mydeen S N 

JA Jaume April 5, 2019 07:09 AM UTC

I'm using v-if to rerender the Gantt control destroying and recreating the control when I have new data. 
It's inefficient but meanwhile until we don't have the functionallity available it works

MS Mydeen S N Syncfusion Team April 8, 2019 11:15 AM UTC

Hi Jaume, 
Thanks for the update. We will update you once the  volume 1, 2019 Service Pack 1 get released. 
Mydeen S N 

DW Derrick Whiting May 1, 2024 02:50 AM UTC

Is this fixed?  I am adding new items to the datasource dynamically and they don't refresh unless I manually refresh the whole vue component which isn't ideal.

SJ Sridharan Jayabalan Syncfusion Team May 3, 2024 03:14 PM UTC



For your query, we would like to inform you that the issue has been resolved and for reference we attached a sample which explained that adding new records to datasource and reflect in UI without manual refresh. Refer sample and code snippet for more information.


Note: Sample used latest version of Gantt Chart 25.1.42.




    <button id="addRow" cssClass="e-info" v-on:click.native="add">

          Add Row




add: function (e) {

      var ganttObj = document.getElementById('GanttContainer').ej2_instances[0];

      var record = {

        TaskID: 9,

        TaskName: 'New record',

        StartDate: new Date('04/02/2019'),

        Duration: 3,

        Progress: 50,


      ganttObj.editModule.addRecord(record, 'Above', 0);




Sample - Bxmina (forked) - StackBlitz

Documentation - Adding new tasks in Vue Gantt component | Syncfusion




If the issue still persists, kindly reproduce the issue in the given sample and revert it back to us.





Live Chat Icon For mobile
Up arrow icon