JSON data to KENDO UI Grid ASP.NET MVC 4

Question

I have bit trouble getting data to show on my Kendo.Grid.

JSON is valid and it shows when clicking the link as text, but loading the data n 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 on 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 is return a JSON string while your view expect a list of KendoUIMvcCim.Models.Customer. Use two different action methods in your controller to address this:

1. First action returns a ViewResult and is needed for the View

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

2. Second action returns ActionResult and is needed by your grid to populate it through the 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 finally need to change the .Read line so you're calling the right action method in your controller.

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

Answer 2

I know it's an old post but for anyone still struggling:

Be sure not to be including jquery 2 times if you are copying/pasting from the Kendo documentation, as you might already have it in your file.

That said, put the jQuery reference in the HEAD of your page, instead of the bottom, else the kendo grid will try to render with jQuery before it is actually imported.

Hope this helps