We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Drill Down Pie Chart with display of Grid onclick of pie chart region.

I’m trying to display a grid in piechart region click, I’m facing some issue in doing so,

Find below the code where the javascript exception is thrown.


File Name:“jquery-2.1.0.js”



jQuery.parseJSON = function (data) {


       return JSON.parse( data + "" );



When the data is “”, “Unexpected End of Input Error” is thrown.

This issue occurs when I try to return a view with custom model from my Action method


But if I Include the below code(return a MVCChartModel object instead of custom model) in my OnClick Action method,

the javascript error is not occurring but it shows some bar chart in the next page..


  if (args.ChartAction == ChartHtmlAction.RegionClick || args.ChartAction == ChartHtmlAction.None)



                  return chartModel.ChartActionResult(args);



Please guide me on this, Is it possible to send a sample code to display a grid below the chart onclick of pie chart region.

2 Replies

SK Sanjith Kesavan Syncfusion Team July 20, 2015 01:44 PM UTC

Hi Anjali,
We have updated solution for the same query in the incident id-141611. Please take the follow-up the incident.
Let us know if you have any other concern.
Sanjith K.

SK Sanjith Kesavan Syncfusion Team July 21, 2015 12:03 PM UTC

Hi Anjali,
We have analyzed your query. Drilldown of the chart to grid cannot be achieved directly. For achieving you requirement we had used Ajax postback method. Please find a below code which is used to drilldown a chart according to a region clicked in a pie chart.

Code Snippet:

//Action method to handle postbacks in Grid

public ActionResult GridPartialView(PagingParams args)


    IEnumerable data = new ChartDrillDownMVC.Models.StudentDataContext().Student.Take(100).ToList();

    return data.GridActions<ChartDrillDownMVC.Models.Student>();


//Action method for drilldown       

public ActionResult DrillDown(string Name, int index)


     var data = new ChartDrillDownMVC.Models.StudentDataContext().Student.Take(100).ToList();

     return PartialView("GridPartialView", data);                       

//Client-side function to handle mouse click event of chart

function MouseClick(sender, e)




   //Using ajax request to drill down when chart point is clicked


      url: "/Chart/DrillDown",

      data: { "Name": e._currentItem.SeriesName, "index":e._currentItem.PointIndex },

      success: function (data) {





Normal piechart:

Piechart after one region is clicked:

We have prepared the workaround sample as per your requirement. Please find the sample from below location.

Sanjith K.​

Live Chat Icon For mobile
Up arrow icon