Explode Pie section when user clicks

Question

I found a link that explains how to explode a pie section when the user clicks a wedge (http://jsfiddle.net/derickbailey/FXs6b/) but it's not working for me. From what I can tell, it doesn't appear to be updating the datasource field that is bound to the chart's explodeFiled. The createChart() function is getting called when a pie section is clicked but it doesn't explode the section. the example works just fine but not if I try to apply it to my own code. I also have a Kendo grid attached to the same datasource. The grid is editable and if I "check" the Exploded field for a record, the pie slice explodes. I Also removed the grid thinking maybe the 2 controls attached to the same datasource was causing a problem but that didn't work either. Can anyone see what's wrong in my code? You can see an example of my code here: http://jsfiddle.net/ihatemash/d5yR7/

My class containing the data to be shown in the chart:

public partial class GetTotals_Result
{
    public Nullable<int> Total { get; set; }
    public int PETypeID { get; set; }
    public string Description { get; set; }
    public bool Exploded { get; set; }
}

Code in my cshtml file:

        var mdl = @Html.Raw(Json.Encode(Model));

        var tempcontext = new kendo.data.DataSource(
            { data: mdl });

        function createChart() {
            $("#piechart").kendoChart({
                title: {
                    position: "bottom",
                    text: "Totals Pie Chart"
                },

                dataSource: tempcontext,

                series: [{
                    type: "pie",
                    field: "Total",
                    categoryField: "Description", 
                    explodeField: "Exploded",
                    labels: { visible: true},                        
                }],

                seriesClick: function(e){
                    $( e.sender.dataSource.options.data ).each( function ( i, item ) {
                        if ( item.Description != e.category )
                        {
                            item.Exploded= false;
                        }
                        else
                        {
                            item.Exploded= true;
                        }
                    } );
                    createChart();
                }

            });
        }
        setTimeout(function() {
            // Initialize the chart with a delay to make sure
            // the initial animation is visible
            createChart();

            $("#example").bind("kendo:skinChange", function(e) {
                createChart();
            });
        }, 400);

Answer 1

I believe the datasource is never getting updated (you defined "Hydro" with exploded set to true). However, if you set the datasource as seen in this jsfiddle, then the explosion happens. I believe you may need to manually update the dataItem in the data source in the series click event if you choose to use your original pattern of defining the dataContext variable outside of the scope of the function.

 function createChart() {
                $("#piechart").kendoChart({
                    title: {
                        position: "bottom",
                        text: "Patient Encounter Totals by Encounter Type - Pie"
                    },
                    legend: {
                        position: "bottom",
                        padding: {right: 20, left: 20},
                        border: { width: 1}
                    },
                    dataSource: { data: data },
                    ... 
  }