MVC Exploding Pie Chart

[Justin]

I'm trying to add an exploding function to my pie chart. I've been able to locate the follow javascript code to assist from the Kendo UI documentation:

seriesClick: function(e){
          $.each(e.sender.dataSource.view(), function() {
            // Clean up exploded state
            this.explode = false;
          });

          // Disable animations
          e.sender.options.transitions = false;

          // Explode the current slice
          e.dataItem.explode = true;
          e.sender.refresh();
        }


Using the MVC version I'm call the series click with:

        .Events(events => events
            .SeriesClick("explodingPie")
        )

Along with the following Javascript:

function explodingPie(e) {
    $.each(e.sender.dataSource.view(), function() {
            this.explode = false;
          });
          e.dataItem.explode = true;
          e.sender.refresh();
        }

I'm unsure why
$.each(e.sender.dataSource.view(), function() { 
isn't working properly.

[Patrick | Technical Support Engineer, Senior]

Hi Justin,

Please take a look at the attached project illustrating an exploding function for a pie chart.  

The Kendo Chart's ExplodeField is set to the model's IsExploded property.

.Series(s =>
   {
       s.Pie(
           model => model.Percentage,
           model => model.Source,
           null,
           model => model.IsExploded
       )
       ...
   })

Here are the steps I took in my explodingpie function:
1. For each dataItem on my current page (using dataSource.view()), set the ExplodeField to false. 
2. Turn off the animation using the transitions configuration.
3. Set the clicked Series's ExplodeField to true.
4. Refresh the pie chart using .refresh().

Here is the event handler and function:

.Events(e => e.SeriesClick("explodingPie"))

    function explodingPie(e) {
        $.each(e.sender.dataSource.view(), function () {
            this.IsExploded = false;
        });
        e.sender.options.transitions = false;
        e.dataItem.IsExploded = true;
        e.sender.refresh();
    }

Hope this helps!

Regards,
Patrick
Telerik