0

Can please anyone help me to resolve my problem about an example from Telerik where I am trying to display a chart with an ajax call.

The code runs fine without any exceptions, but it's not firing the action method in my controller. I have looked around for quite a while but could't find the right answer.

my controller code is as follow

public ActionResult Index()
{
    DataTable dataTable = GetChartData();
    return View(dataTable);
}

public ActionResult Read([DataSourceRequest] DataSourceRequest request)
{
    DataTable chartData = GetChartData();
    var result = chartData.ToDataSourceResult(request);

    return Json(result, JsonRequestBehavior.AllowGet);
}

private DataTable GetChartData()
{
    return chartService.GetChartDataById(4);
}

my Index view is as follow

@(Html.Kendo().Chart()
    .Name("chartAjaxBinding")
    .CategoryAxis(axis => axis.Labels(labels => labels.Template("#: value.split(' ').join('\\n')#")))
    .Series(series =>
    {
        series.Column("Column1").CategoryField("Column2");
    })
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("Read", "MyController"))
))
Nic
  • 12,220
  • 20
  • 77
  • 105
Learning Curve
  • 1,449
  • 7
  • 30
  • 60

1 Answers1

0

By default the Kendo Chart will send a POST request to the server, your action is accepting GET requests. Also, you don't need to add the DataSourceRequest, nor convert the result to a DataSourceResult. 

[HttpPost]
public ActionResult Read()
{
    DataTable chartData = GetChartData();
    return Json(chartData, JsonRequestBehavior.DenyGet);
}

Alternatively, you can have the chart send a GET request:

@(Html.Kendo().Chart()
    .Name("chartAjaxBinding")
    .CategoryAxis(axis => axis.Labels(labels => labels.Template("#:value.split(' ').join('\\n')#")))
    .Series(series =>
    {
        series.Column("Column1").CategoryField("Column2");
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(r => r.Action("Read", "MyController").Type(HttpVerbs.Get)
))
Nic
  • 12,220
  • 20
  • 77
  • 105
  • Thanks Nicholas. I have figured out the root of the problem.I had two different versions of jquery getting loaded and due to of that reason I was getting the error of Object doesn't support property or method 'kendochart'. I was initially debugging in chrome which wasn't throwing any exception and I had no clue about the exact source of the issue but as soon as I tried IE, I got the jquery exception. My problem is fixed after removing the jquery duplication. – Learning Curve Jun 18 '15 at 09:55