KendoUI Gantt chart dynamically bind the datasource and update in AngularJS

Question

I have used the KendoUI gantt chart in AngularJS (following is the demo URL http://demos.telerik.com/kendo-ui/gantt/angular) option in my project.

I need to update the gantt chart data source dynamically. I tried to update the data source in"$scope.ganttOptions" since that is where the data source is set as per the demo, but failed.

Any help on this would be greatly appreciated.

Thanks

Answer 1

Do not use data source in"$scope.ganttOptions". Instead use the following to insert insert a new item into gantt chart:

var ganttChart = $("#ganttChartId")
          .data("kendoGantt");
        ganttChart.dataSource.add(newItem);

Following would give you access to datasource. gantt[i] refers to each item on your chart. You can perform any operation/modification on gantt[i], which will be reflected immediately on the UI:

var gantt = $("#ganttChartId")
    .data("kendoGantt")
    .dataSource._data;