Local array built from DataSource and bound (MVVM) to Chart doesn't update when data source items change

[Jon]

I'm trying to build a grid that displays a set of users, in this example 5 users, and a pie chart that displays those 5 users' licenses and a block of 5 unused licenses for a total of 10 licenses. This jsbin demonstrates the grid and chart. Click the delete button. Notice the grid removes and row but the chart does not reflect the change.

My question is why doesn't the chartDataSource get refreshed when the gridDataSource's data changes?

I found this post and it does provide a workaround but I don't see why the chartDataSource function doesn't get called when model.get('gridDataSource') is used inside of it and clearly the gridDataSource changes.

Here is a jsbin that demonstrates the workaround.

Thanks,
Jon

[Alexander Valchev]

Hi Jon,

Thank you for getting in touch with us.

The problem comes from the fact that the chart is bound to a calculated field which returns arrays of objects. This array however is not connected to the Grid's dataSource which is why any changes made in the grid will not reflect on the chart.

The solution is to bind both components to one DataSource. This way the dataSource will be shared and any changes that are made by the user will be automatically applied on both widgets.

For your convenience I updated the jsBin sample:

• http://jsbin.com/abobow/6/edit

Regards,
Alexander Valchev
Telerik

[Jon]

Thanks for the updated jsbin. This was actually the first thing I tried and it does work just like the shared datasource example shows.

My need is for the chart to show the percentage of the total for each individual license and the remaining unassigned licenses as a single pie slice. The grid needs only to show a row for each individual license and should not show the unassigned licenses. This is what led to the calculated field for the chart.

Doesn't the calculated field recalculate when the underlying observable changes? 

PS the email that was sent as a reply had the word sibscribe instead of subscribe.

[Alexander Valchev]

Hello Jon,

Thank you for the clarification.

Regarding your question, doesn't the calculated field recalculate when the underlying observable changes?

Generally speaking it does, however in case you use DataSource, the change of its data will not trigger the change of the viewModel field. In other words, when you remove a record from the Grid (respectively from the DataSource) you change the data, but not the DataSource instance itself. ViewModel does not know about changes in the data unless you manually force the event to trigger.

Regards,
Alexander Valchev
Telerik