mdd-fix-slice-explosion

mdd-fix-slice-explosion

Author: mddifilippo89

samples/charts/doughnut-chart/explosion/App.razor

@@ -17,7 +17,7 @@
             {
                 <IgbDoughnutChart Height="100%" Width="100%" @ref="Chart"
                 AllowSliceExplosion="true"
-                SliceClick="OnSliceClick">
+                SliceClickScript="OnSliceClickScript">
                     <IgbRingSeries DataSource="Data"
                                 LabelMemberPath="Summary"
                                 LabelsPosition="LabelsPosition.OutsideEnd"
@@ -40,7 +40,6 @@
 @code {
 
     private List<DataItem> Data;
-    public int[] explodedSlices { get; set; } = new int[0];
     public IgbItemLegend Legend;
     public IgbDoughnutChart Chart;
 
@@ -66,14 +65,4 @@
         if (Chart != null && Legend != null && !firstRender)
             this.Chart.ActualSeries[0].Legend = Legend;
     }
-
-    protected void OnSliceClick(IgbSliceClickEventArgs e)
-    {
-        //Console.WriteLine("Sample OnButtonClick");
-
-        // TODO
-        // e.IsExploded = !e.IsExploded;
-        //e.IsSelected = false;
-        //explodedSlices = new int[] { e.Index };
-    }
 }

samples/charts/doughnut-chart/explosion/wwwroot/events.js

@@ -0,0 +1,6 @@
+
+igRegisterScript("OnSliceClickScript", (ctx, evtArgs) => {
+
+    evtArgs.isExploded = !evtArgs.isExploded;    
+
+}, false);

samples/charts/doughnut-chart/explosion/wwwroot/index.html

@@ -24,7 +24,7 @@
     <!-- importing blazor bundle for IG controls: -->
     <script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
     <script src="_framework/blazor.webassembly.js"></script>
-
+    <script src="events.js"/>
 </body>
 
 </html>