KendoUI Grid not populating remote data in MVC 4 - asp.net-mvc

Question

I am trying to implement Telerik's example on their site that binds to a remote data source. The grid displays, but there is never any data in it. I am getting a JSON result from my controller. I verified this by browsing directly to RemoteData/GetData and seeing the JSON string. It is populated with the correct data.
Also when I browse directly to localhost/RemoteData/RemoteData, I see it resolve correctly using Fiddler. (status code 200).
Here is the code from their example with my modifications to it. This is in my View
#(Html.Kendo().Grid<DataObjects.Car>()
.Name("grid")
.Columns(columns => {
columns.Bound(p => p.CarID);
columns.Bound(p => p.Make);
columns.Bound(p => p.Model);
columns.Bound(p => p.Year);
columns.Bound(p => p.Mileage);
})
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("GetData", "RemoteData"))
)
)
Code in the controller:
public ActionResult GetData()
{
var cars = new List<Car>();
cars.Add(new Car { CarID = 1, Make = "Chevrolet", Mileage = 259301, Model = "Cavalier", Year = 2000 });
cars.Add(new Car { CarID = 2, Make = "DeLorean", Mileage = 44087, Model = "DMC-12", Year = 1981 });
cars.Add(new Car { CarID = 3, Make = "Honda", Mileage = 183000, Model = "Del Sol", Year = 1993 });
return Json(cars, JsonRequestBehavior.AllowGet);
}

Answer 1

when you do return Json(cars, JsonRequestBehavior.AllowGet); you return a JSON array to your Kendo Grid DataSource(the requestor), exactly like below:
[
{
"CarID": 1,
"Make": "Chevrolet",
"Mileage":259301,
"Model":"Cavalier",
"Year":2000
},
{
"CarID": 2,
"Make": "DeLorean",
"Mileage":44087,
"Model":"DMC-12",
"Year":1981
},
]
but your kendo DataSource expects a javascipt array in a different pre-defined schema then returned by your method.
You need to return the javascript array json in exactly same format as required by the grid. Most simple way to do this is to make your grid_read ActionMethod like this:
public ActionResult GetData([DataSourceRequest] DataSourceRequest request)
{
///your usual code
return Json(cars.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
now your response is in acceptable schema definition by the kendo grid on the client side.
Also, if you don't wish or simply can't change the server side definition then you can directly bind the simple json array returned, to your kendoGrid by doing dataSource.read(response);

Answer 2

Please try with the below code snippet.
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
...............
...............
public ActionResult GetData([DataSourceRequest] DataSourceRequest request)
{
var cars = new List<Car>();
cars.Add(new Car { CarID = 1, Make = "Chevrolet", Mileage = 259301, Model = "Cavalier", Year = 2000 });
cars.Add(new Car { CarID = 2, Make = "DeLorean", Mileage = 44087, Model = "DMC-12", Year = 1981 });
cars.Add(new Car { CarID = 3, Make = "Honda", Mileage = 183000, Model = "Del Sol", Year = 1993 });
return Json(cars.ToDataSourceResult(request));
}