Kendo UI Grid - How to Bind to Child Properties

Question

How to associate a column / field with a json child property in Kendo grid model settings (in javascript)? For example, I want the grid to contain columns: FName, LName, Street, and Address. Basically, I want to smooth out the hierarchical structure returned by the web service.

Kendo Settings

fields: { FName: { type: "string" }, LName: { type: "string" }, // How to map to child properties below? Street: { field: "Address.Street" }, // this is wrong City: { field: "Address.City" } // this is wrong } 

Json

 { "FName": "William", "LName ": "Shakespeare", "Address": { "Address": "123 Street Ln", "City": "Philadelphia" } } 

Answer 1

You do not do it like that. You need to create a Model class that aligns the data graph. During the construction of the Model, you can use lazy loading. Either send this model to the view through the controller, or attach it to the larger ViewModel (only model models, not MVVM), which is sent to the view. Then tie it to the grid.

But you will be happier using Ajax loading of the same model as JSON, which I think you are trying to do.

Model

 public class ContactModel { public string FName { get; set; } public string LName { get; set; } public string Address { get; set; } public string City { get; set; } public ContactModel() {} public ContactModel(Contact contact) // IContact is better if you have Interfaces { FName = contact.FName; LName = contact.LName; Address = contact.Address.Address; City = contact.Address.City; } // Neat Linq trick to convert database query results directly to Model public static IList<ContactModel> FlattenToThis(IList<Contact> contacts) { return contacts.Select(contact => new ContactModel(contact)).ToList(); } } 

controller

 public JsonResult ReadContacts([DataSourceRequest]DataSourceRequest request) { var contacts = _contactsDataProvider.Read(); // Your database call, etc. DataSourceResult result = ContactModel.FlattenToThis(contacts).ToDataSourceResult(request); return Json(result, JsonRequestBehavior.AllowGet); } 

But I don’t think that Will ever gets to Philadelphia .;)