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

[Jaume]

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"

        :dataSource="events"        

        height = "100%"

        :gridLines="'Both'"

        durationUnit= "Hour"

        :highlightWeekends="true"

        :taskFields="taskFields"

        :timelineSettings= "timelineSettings"

        :dayWorkingTime= "dayWorkingTime">

        </ejs-gantt>

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?

Regards,

Jaume

[Jayakumar Duraisamy]

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. 

Regards, 

Jayakumar D 

[Mydeen S N]

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, 

 

https://www.syncfusion.com/feedback/5599/support-for-refreshing-the-datasource-in-gantt-chart 

 

Please let us know, if you need further assistance. 

Regards,
Mydeen S N 

[Jaume]

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

[Mydeen S N]

Hi Jaume, 

 

Thanks for the update. We will update you once the  volume 1, 2019 Service Pack 1 get released. 

 

 

Regards, 

Mydeen S N 

 

[Derrick Whiting]

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.

[Sridharan Jayabalan]

Derrick,

 

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.

 

Code-Snippet:   

<template>

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

          Add Row

       </button>

</template>

 

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.

 

 

Regards,

Sridharan