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

问题描述

在Kendo网格的模型设置中(如何在javascript中)如何将列/字段绑定到json的child属性?例如，我希望网格包含列: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.

Kendo设置

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

推荐答案

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

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.

但是，您会更高兴使用与JSON相同的Model的Ajax加载，这是我认为您正在尝试的事情.

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网格-如何绑定到子属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！