Data isn't showing on Kendo Grid When Binding Data Source with ajax callback to Controller

Question

My question is a bit similar to this:

Binding Kendo Data Source with Async $.ajax calling from C# MVC Controller Action

Here's the javascript for creating the Kendo grid:

 $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: getData(),
                height: 550,
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 10
                },
                columns: [{
                    field: "a",
                    title: "a",
                    width: 200
                }, {
                    field: "a",
                    title: "a"
                }]
            });
        });

Here's the getData function which I used to get data, it's an ajax callback function which calls an action in the controller called doSearch

 function getData() {
            jQuery.ajax({
                type: "POST",
                url: "@Url.Action("doSearch")",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ needSearch: true }),
                success: function (data) {
                    var dataSource = new kendo.data.DataSource({
                        data: JSON.parse(data)
                    });
                    dataSource.read();
                    return dataSource;
                },
                failure: function (errMsg) {
                    alert(errMsg);
                }
            });
        }

The callback is fine, and the 'data' has value, but the problem is: there is no data shown in the grid.

Here's the returned value for data:

 [{"a": "First record"},{"a": "Second record"}]

What's wrong with the code? Why isn't the data showing?

=================================================================

Here's the updated code for getData function:

function getData() {
 var grid = $("#grid").data("kendoGrid");
 grid.dataSource.transport.read.url = '@Url.Action("doSearch",new {needSearch = true})';
 grid.dataSource.read();
}

And here's the action:

 public ActionResult doSearch(bool needSearch)
        {
            return Json("[{\"a\": \"First record\"},{\"a\": \"Second record\"}]");
        }

But the doSearch Action in the Controller isn't firing

Look like `data` is already JSON so you don't need to parse it again with `JSON.parse(data)`. Try just `data: data` — , Apr 15 '15 at 08:59
@AbbasGaliyakot Stephen Muecke I tried returning only the data and remove the JSON.parse but the result is still the same, I got no error message for that... — User2012384, Apr 15 '15 at 09:27
Why would you do `return Json("[{\"a\": \"First record\"},{\"a\": \"Second record\"}]");`? It should be `return Json(new[] { new { a = "First record" }, new { a = "Second record" }};` — , Apr 15 '15 at 10:07
@StephenMuecke Oh.. That was the problem, I can bind the data with your code, if you want, please post as answer so I can accept.. — User2012384, Apr 15 '15 at 10:10
@Mr.香港人, Update Mike Debela's answer with it and then accept that one :) — , Apr 15 '15 at 10:17

score 2 · Accepted Answer · edited Apr 16 '15 at 01:32

2

I tried your way, but this works for me:

function getData() {
    var grid = $("#grid").data("kendoGrid");
    grid.dataSource.transport.options.read.url = '@Url.Action("doSearch", new {needSearch = true})';
    grid.dataSource.read();
}

alternate:

$("#grid").kendoGrid({
    dataSource: {
        type: "json",
        transport: {
            read: '@Url.Action("doSearch", new {needSearch = true})'
        }
    }
);

Note: Based on your edit, your controller method needs to be changed to

public ActionResult doSearch(bool needSearch)
{
    return Json(new[] { new { a = "First record" }, new { a = "Second record" }};
}

edited Apr 16 '15 at 01:32

answered Apr 15 '15 at 09:04

Mike Debela

1,930
3
18
32

May I know how can I set the ajax post result as the datasource of the grid?? – User2012384 Apr 15 '15 at 09:14
you only need to replace the `yourURL` to point to your controller action. may be this way : `@Url.Action("doSearch", new {needSearch = true})`. I edited my answer – Mike Debela Apr 15 '15 at 09:18
Just now tried your approach, but the doSearch action in the controller doesn't trigger... – User2012384 Apr 15 '15 at 09:26
I've updated my question with the action, am I missing something in the controller?? – User2012384 Apr 15 '15 at 09:42
your code is working but I was returning wrong values in the controller, I modified it and it works :) – User2012384 Apr 15 '15 at 10:22

score 1 · Answer 2 · answered Apr 15 '15 at 09:01

check this

function getData() {
            jQuery.ajax({
                type: "POST",
                url: "@Url.Action("doSearch")",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ needSearch: true }),
                success: function (data) {
                    return data;
                },
                failure: function (errMsg) {
                    alert(errMsg);
                }
            });
        }

But how can I bind the "data" to the grid?? – User2012384 Apr 15 '15 at 09:11 — User2012384, Apr 15 '15 at 09:11

Data isn't showing on Kendo Grid When Binding Data Source with ajax callback to Controller

2 Answers2