Kendo网格 - 从嵌套字典中添加列

时间:2015-06-05 00:40:44

标签: jquery asp.net asp.net-mvc kendo-ui kendo-grid

    [Serializable]
    public class ContactDto
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string CompanyName { get; set; }
        public Dictionary<string, string> CustomFields { get; set; }
    }

我上面的contactdto类有自定义字段的字典。那些可以是'MotherName''Birthdate'等等。

如何在kendo网格中将自定义字段显示为列?所有contactDTO都将具有相同的字典键。我正在使用ASP.net MVC助手。

我尝试了类似的东西 - 这不起作用 -

@(Html.Kendo().Grid<ContactDto>(Model)
.Name("ReportViewer-Data")
.Columns(columns =>
{
    columns.Bound("FirstName");
    columns.Bound("LastName");
    columns.Bound("CustomFields.Industry");
})
.Sortable()
.Pageable(pageable => pageable.PageSizes(true).ButtonCount(5))
.Groupable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("DataView_Test", "Reports"))
)
)

1 个答案:

答案 0 :(得分:1)

假设你后端的json数据类似于

data: [{
    FirstName: "John",
    LastName: "Doe",
    CustomField: {
        BirthDate: "9 June 1999",
        MotherName: "Valen"
    }
}, {
    FirstName: "Ray",
    LastName: "Doe",
    CustomField: {
        BirthDate: "9 June 1998",
        MotherName: "Valen"
    }
}, {
    FirstName: "Grey",
    LastName: "Doe",
    CustomField: {
        BirthDate: "9 June 1997",
        MotherName: "Valen"
    }
}]
  

由于kendo dataSource目前不支持复杂数据类型   像数组和对象。

解决方法是将架构添加到您的数据源

schema: {
    parse: function (response) {
        var items = [];
        for (var i = 0; i < response.length; i++) {
          console.log(response);
            var item = {
                FirstName: response[i].FirstName,
                LastName: response[i].LastName,
                BirthDate: response[i].CustomField.BirthDate,
                Mother: response[i].CustomField.MotherName
            };

            items.push(item);
        }
        return items;
    },
    pageSize: 20
},

获取数据后,dataSource将解析嵌套到普通字段的customField。请参阅此工作example