Update Pie chart when Kendo Grid changes

[canon]

I have a simple Kendo grid with inline editing capabilities that I want to tie to a Pie chart. 
Basically, when I update the value of a certain row[column] in the grid, I want the Pie chart 
to reflect the change and redraw immediately. How can I do that?

The data for the grid is saved/added to a List<ProductViewModel> which has Name and Price properties. 

[Alexander Popov]

Hello,

I would recommend using the same dataSource for both of the widgets. This will ensure that all changes in the Grid will immediately reflect in the Chart. This approach however, requires to initialize the Chart using JavaScript once the Grid's dataBound event is triggered. For example:  

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("Grid")
    .Columns(columns => {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice).Width(140);
        columns.Bound(p => p.UnitsInStock).Width(140);
        columns.Bound(p => p.Discontinued).Width(100);
        columns.Command(command => command.Destroy()).Width(110);
        columns.Command(command => command.Edit()).Width(110);
    })
    .ToolBar(toolbar => {
        toolbar.Create();
        toolbar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Events(e=>e.DataBound("onDataBound"))
    .Pageable()
    .Navigatable()
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(5)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.ProductID))
        .Create("Editing_Create", "Grid")
        .Read("Editing_Read", "Grid")
        .Update("Editing_Update", "Grid")
        .Destroy("Editing_Destroy", "Grid")
    )
)

<div id="chart"></div>


<script type="text/javascript">
    var isChartInitialized = false;

    function onDataBound(e) {

        if (!isChartInitialized) {
            isChartInitialized = true;
            $("#chart").kendoChart({
                dataSource: this.dataSource,
                title: {
                    text: "Products"
                },
                legend: {
                    position: "top"
                },
                seriesDefaults: {
                    type: "pie"
                },
                series: [{
                    field: "UnitPrice",
                    categoryField: "ProductName",
                }],
                tooltip: {
                    visible: true,
                    format: "N0",
                    template: "#= ProductName # - #= kendo.format('{0:P}', percentage)#"
                }
            });
        }
    }
</script>

Here is a screencast showing the result.

Regards,
Alexander Popov
Telerik