This is a migrated thread and some comments may be shown as answers.

Binding MVC grid to simple JSON array

3 Answers 1846 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Lee Saunders
Top achievements
Rank 1
Lee Saunders asked on 10 Feb 2014, 09:42 PM

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.






3 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 11 Feb 2014, 03:42 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sally
Top achievements
Rank 1
answered on 22 Dec 2015, 12:10 PM

Hi,

I seek clarification on this.

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

 

0
Dimiter Topalov
Telerik team
answered on 23 Dec 2015, 03:46 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Lee Saunders
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Sally
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Share this question
or