What you are trying to do here is to group a shared DataSource and have it only affect one widget. Furthermore, Kendo UI will return a grouped object when you group it. The Pie chart is not interested in these objects, but rather the count of the items that each of these group objects contains. We just need to get the data in the right format.
So you have your original DataSource (which I have extracted since it's shared with another widget). When that DataSource changes, you want to populate a second one - one that you can group without affecting the grid.
var ds = new kendo.data.DataSource({
data: [
{Status: 10},
{Status: 20},
{Status: 200},
{Status: 200}
],
change: function() {
chartData.data(this.data());
}
});
The second DataSource (chartData) is grouped, and when it changes, it populates an array, constructing objects that the pie chart can actually understand.
var groupedData = [];
// populate the grouped data array by grouping this datasource
// and then populating an plain array
var chartData = new kendo.data.DataSource({
group: { field: 'Status' },
change: function() {
groupedData = [];
$.each(this.view(), function() {
groupedData.push({ field: this.value, value: this.items.length });
});
}
});
And then just bind your pie chart to that array
$("#status-chart").kendoChart({
dataSource: groupedData,
series: [{
type: 'pie',
field: 'value',
categoryField: 'field'
}]
});
Working example: http://jsbin.com/EKuxORA/1/edit