使用ajax回调将数据源绑定到Controller时，数据未在Kendo网格上显示

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

Answer 1

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" }};
}

Answer 2

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