JSON data for the KENDO ASP.NET MVC 4 user interface grid

Question

I have some problems getting the data to display on my Kendo.Grid.

JSON is valid and it displays when the link is clicked as text, but it loads the data into the grid.

Here is the source, any help would be appreciated!

br Eero

controller

public ActionResult Index([DataSourceRequest]DataSourceRequest request) { using (var db = new CimDataContext()) { IQueryable<Customer> customers = db.Customers; DataSourceResult result = customers.ToDataSourceResult(request); return Json(result, "text/x-json", JsonRequestBehavior.AllowGet); } } 

Index.cshtml

 @(Html.Kendo().Grid<KendoUIMvcCim.Models.Customer>() .Name("grid") .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("Index", "Customer")) ) .Columns(columns => { columns.Bound(customer => customer.Id); columns.Bound(customer => customer.Name); columns.Bound(customer => customer.Number); columns.Bound(customer => customer.AgentID); columns.Bound(customer => customer.Info); columns.Bound(customer => customer.Email); columns.Bound(customer => customer.StartTime); columns.Bound(customer => customer.EndTime); columns.Bound(customer => customer.Category); }) .Pageable() .Sortable() 

)

Result in browser

 {"Data":[{"Id":2,"Name":"Name1","Number":"040000000","AgentID":"1","Info":"info1","Email":"email1","StartTime":"\/Date(1360101600000)\/","EndTime":null,"Category":"Laser"},{"Id":3,"Name":"Name2","Number":"0400000000","AgentID":"2","Info":"info2","Email":"email2","StartTime":"\/Date(1360188000000)\/","EndTime":null,"Category":"Kaihi"}],"Total":2,"AggregateResults":null,"Errors":null} 

Answer 1

I think the problem is that your action method returns a JSON string, while your view expects a list of KendoUIMvcCim.Models.Customer . To solve this problem, use two different methods of action:

• The first action returns a ViewResult and is necessary for the view

   public ViewResult Index() { using (var db = new CimDataContext()) { IQueryable<Customer> customers = db.Customers; return View(customers); } } 

• The second action returns an ActionResult and is required by your network to populate through AJAX calls.

   public ActionResult Customers_Read([DataSourceRequest]DataSourceRequest request) { using (var db = new CimDataContext()) { IQueryable<Customer> customers = db.Customers; DataSourceResult result = customers.ToDataSourceResult(request); return Json(result, "text/x-json", JsonRequestBehavior.AllowGet); } } 

In your Index.cshtml file, you will finally need to change the .Read line .Read that you .Read correct action method in your controller.

  .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("Customers_Read", "Customer")) ) 

Answer 2

I know this old post, but for those still struggling:

Be sure not to include jquery 2 times if you copy / paste from the Kendo documentation, as you may already have a file.

However, put the jQuery link in the HEAD of your page, not at the bottom, otherwise the kendo grid will try to render using jQuery before it is imported.

Hope this helps

Answer 3

Final working code:

controller

 public ViewResult Index() { return View(); } public ActionResult Customers_Read([DataSourceRequest]DataSourceRequest request) { using (var db = new CimDataContext()) { IQueryable<Customer> customers = db.Customers; DataSourceResult result = customers.ToDataSourceResult(request); return Json(result, JsonRequestBehavior.AllowGet); } } 

Index.cshtml

 @(Html.Kendo().Grid<KendoUIMvcCim.Models.Customer>() .Name("grid") .DataSource(dataBinding => dataBinding.Ajax().Read(read => read.Action("Customers_Read", "Customer"))) .Columns(columns => { columns.Bound(customer => customer.Id); columns.Bound(customer => customer.Name); columns.Bound(customer => customer.Number); columns.Bound(customer => customer.AgentID); columns.Bound(customer => customer.Info); columns.Bound(customer => customer.Email); columns.Bound(customer => customer.StartTime); columns.Bound(customer => customer.EndTime); columns.Bound(customer => customer.Category); }) .Pageable() .Sortable() 

)