Kendo UI Grid not showing JSON data

问题

I am facing this problem for quite a while now with the problem that I am unable to bind JSON data that my controller action is passing to the kendo UI Grid, there were few JavaScript issues before but now they are gone but still my grid is not showing any results:

In Model:

public object GetResult(string id)
    {
        var sqlCom = new SqlCommand("SELECT [No],[Desc],[Date],[Height],[Final] FROM [cr_form] WHERE [uId]=@id;", sqlConn);
        sqlCom.Parameters.AddWithValue("@id", id);

        StringBuilder sb = new StringBuilder();
        StringWriter sw = new StringWriter(sb);
        JsonWriter jsonWriter = new JsonTextWriter(sw);
        var rcrds = GETSQLRESULTS(sqlCom);

        try
        {
            int i = 0;
            if (rcrds != null || rcrds.HasRows)
            {
                //jsonWriter.WriteStartObject();
                while (rcrds.Read())
                {
                    jsonWriter.WriteStartObject(); //Changed
                    for (int j = 0; j < rcrds.FieldCount; j++)
                    {
                        jsonWriter.WritePropertyName(rcrds.GetName(j)); // column name
                        jsonWriter.WriteValue(rcrds.GetValue(j)); // value in column
                    }
                    i++;
                    jsonWriter.WriteEndObject(); //Changed
                }
                //jsonWriter.WriteEndObject();

            }

        }

        catch (Exception ex) { }
        return jsonWriter;
    }

In Controller:

    public ActionResult GetRecords()
    {
        var usrObj = new User();
        var jsnRslt = usrObj.GetResult(Session["Id"].ToString());
    //Till here jsnRslt contains this string: “{"No":null,"Desc":"asfasfasfasfasfasfasfasfasfasfasfasf","Date":"2013-03-27T00:00:00","Height":0,"Final":null,"No":null,"Desc":"etwetwetwetwet","Date":"2013-03-27T00:00:00","Height":0,"Final":0,"No":null,"Desc":"asfasfasfskfjklajsfkjasklfjklasjfklajsfkljaklsfjklasjfkljasfkljlasf","Date":"2013-03-27T00:00:00","Height":0,"Final":0,"No":null,"Desc":"askjfkajsfklaskjfkajsfklaskjfkajsfklaskjfkajsfklaskjfkajsfklaskjfkajsfklaskjfkajsfklaskjfkajsfklaskjfkajsfklaskjfkajsfklaskjfkajsfklaskjfkajsfkl","Date":"2013-03-27T00:00:00","Height":0,"Final":0,"No":null,"Desc":"safasfasfasfasfasf","Date":"2013-03-27T00:00:00","Height":0,"Final":0,"No":null,"Desc":"asfasf","Date":"2013-03-27T00:00:00","Height":0,"Final":0,"No":null,"Desc":"asfasfasf","Date":"2013-03-27T00:00:00","Height":2,"Final":0}”

    //After Changes in the Model I am getting it in the required Array format:
    //{"No":null,"Desc":"asfasfasfasfasfasfasfasfasfasfasfasf","Date":"2013-03-27T00:00:00","Height":0,"Final":null}
    //{"No":null,"Desc":"etwetwetwetwet","Date":"2013-03-27T00:00:00","Height":0,"Final":0}
    //{"No":null,"Des...

        return Json(jsnRslt, JsonRequestBehavior.AllowGet);            
    }

In View:

<div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "json",
                    serverPaging: true,
                    pageSize: 5,
                    groupable: true,
                    selectable: "row",
                    transport: { read: { url: "Records", dataType: "json"} }
                },
                height: 400,
                scrollable: true,
                sortable: true,
                filterable: true,
                pageable: true,
                columns: [
                        { field: "No", title: " No" },
                        { field: "Desc", title: "Description" },
                        { field: "Date", title: "Date" },
                        { field: "Height", title: "Height" },
                        { field: "Final", title: "Final" }
                    ],
                dataBound: function () {
                    this.expandRow(this.tbody.find("tr.k-master-row").first());
                }
            });
        });
    </script>
</div>

But after all this all I can see is an empty grid. And no errors in JavaScript console.

Please help

回答1:

The JSON that you return from the server should be array. You currently it seems that you are returning single objects with multiple fields that are the same.

Here is an example how the JSON should look like:

[{"No":null,"Desc":"asfasfasfasfasfasfasfasfasfasfasfasf","Date":"2013-03-27T00:00:00","Height":0,"Final":null},
{"No":null,"Desc":"etwetwetwetwet","Date":"2013-03-27T00:00:00","Height":0,"Final":0},
{"No":null,"Desc":"asfasfasfskfjklajsfkjasklfjklasjfklajsfkljaklsfjklasjfkljasfkljlasf","Date":"2013-03-27T00:00:00","Height":0,"Final":0}]

回答2:

I think following code will be useful for you and let me know if you have any problem:

    $('#gridName').kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: {
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    url: 'YourURL'
                }
            },
            pageSize: 10,
            type: "json"
        },
        scrollable: true,
        sortable: true,
        resizable: true

});

回答3:

Inside you dataSource set data.

 data: @Html.Raw(Json.Encode(Model.RemoteObject)),

RemoteObject is you object containing all data.

回答4:

First I check your tranport read URL. have you trace the controller if it fires the GetRecords command?

transport: 
{ 
  read: {
    //if you don't use area then remove it
    url: "@Url.Action("GetRecords", new { area = "YourAreaName", controller = "YourControllerName" })",
    dataType: "json"
  }
}

if it still doesn't fix your problem, then modify your Controller,

public ActionResult GetRecords([DataSourceRequest] DataSourceRequest request)
{
    var usrObj = new User();
    var jsnRslt = usrObj.GetResult(Session["Id"].ToString());
    return Json(jsnRslt.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);            
}

here's the link to understand the Kendo's ToDataSourceResult

来源：https://stackoverflow.com/questions/15675115/kendo-ui-grid-not-showing-json-data