Kendo UI Grid - 如何绑定到子属性 [英] Kendo UI Grid - How to Bind to Child Properties

问题描述

如何在 Kendo 网格的模型设置中将列/字段绑定到 json 结果的子属性(在 javascript 中)?例如，我希望网格包含列:FName、LName、Street 和 Address.基本上我想扁平化 web 服务返回的层次结构.

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

剑道设置

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"
          }
}

推荐答案

你不会那样做.您需要创建一个扁平化数据图的类模型".您将能够在构建模型期间使用延迟加载.要么通过控制器将此模型发送到视图，要么将其附加到发送到视图的更大的视图模型(只是模型模型，而不是 MVVM).然后将其绑定到 Grid.

You don't do it like that. You need to create a class 'Model' that flattens the data graph. You will be able to use lazy loading during the construction of the Model. Either send this Model to the View via the controller or attach it to a larger ViewModel (just a Model of Models not MVVM) that is sent to the View. Then bind this to the Grid.

但是，您会更乐意使用 Ajax 加载与 JSON 相同的模型，我认为您正在尝试这样做.

But, you will be happier to use Ajax loading of the same Model as JSON, which is what I think you are trying to do.

型号

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();
    }
}

控制器

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 Will ever made it to Philly. ;)

这篇关于Kendo UI Grid - 如何绑定到子属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！