Binding MVC grid to simple JSON array

[Lee Saunders]

My Data Action:

01.public ActionResult GetContacts()
02.{
03.    var contacts = new List<Contact>
04.        {
05.            new Contact {CompanyName = "Alabaster Almonds", ContactName = "Alex Allentown", ContactTitle = "Academic Adviser", Country = "Albania"},
06.            new Contact {CompanyName = "Boones' Brew", ContactName = "Barbara Bell", ContactTitle = "Barista", Country = "Bulgaria"},
07.            new Contact {CompanyName = "Cartons Inc.", ContactName = "Cami Camaro", ContactTitle = "Comptroller", Country = "Canada"},
08.            new Contact {CompanyName = "Digital Diversions", ContactName = "Dan Douglas", ContactTitle = "Developer", Country = "Denmark"}
09.        };
10.
11.    return Json(contacts);
12.}

My View that creates the grid:

01.@model IEnumerable<Contact>
02.
03.@(Html.Kendo().Grid<Contact>()
04.    .Name("ExampleGrid")
05.    .Columns(columns =>
06.    {
07.        columns.Bound(c => c.ContactName).Width(140);
08.        columns.Bound(c => c.ContactTitle).Width(190);
09.        columns.Bound(c => c.CompanyName);
10.        columns.Bound(c => c.Country).Width(110);
11.    })
12.    .DataSource(s => s.Ajax().Read(r => r.Action("GetContacts", "Example")))
13.)

No matter what I do, I cannot get the DataSource to bind. 

But, if I add this script:

01.<script>
02.
03.    $.ajax({
04.        type: "POST",
05.        url: "Example/GetContacts",
06.        dataType: "json",
07.        data:{data:'B'},
08.        success: function (data) {
09.            $("#ExampleGrid").data("kendoGrid").dataSource.data(data);
10.        },
11.    });
12.
13.</script>

Then I can get the grid to bind.  So, Obviously the grid can handle the data that I am sending, in the format that I am sending, but ... it will not simply bind when I define the datasource in the MVC helper.

[Atanas Korchev]

Hi Lee,

Indeed the grid can't recognize the format of data your are returning from it. Currently it can only bind to the format specified by the DataSourceResult class.

You can call the ToDataSourceResult method over your contacts list to fix this. Or instantiate and populate a DataSourceResult object.

You can check the ajax binding help topic for more details.

We plan to provide support for binding to arbitrary result in the MVC grid in our upcoming release. 

Regards,
Atanas Korchev
Telerik

[Sally]

Hi,

I seek clarification on this.

Does the KendoUI 2015q4 (latest), ASP.NET MVC work with Json?

 

[Dimiter Topalov]

Hello Sally,

Please check out the following documentation article on how to configure the AJAX binding for the Grid with ASP.NET MVC:

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/ajax-binding#ajax-binding

The important thing to note is that the MVC Grid expects specific structure of the JSON response. This structure is created with the ToDataSourceResult() extension method, outlined in the above page.

If you are unable to implement or use a data response with the required structure, then configure a custom Grid DataSource, which will be compatible with the server response.

http://docs.telerik.com/kendo-ui/aspnet-mvc/custom-datasource

Regards,
Dimiter Topalov
Telerik