Kendo Chart's ajax request not reaching the action method

Question

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"))
))

Answer 1

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)
))