如何将 Kendo 网格拆分为子网格和父网格？

Question

所以我的网格有问题，因为它的列太多了。我想做的是将这个网格分成两半，只有一半的列显示在主网格中，另一半在行展开时显示在子网格中。

基本上，父网格的一行中的数据必须与子网格的行中的数据相同，只是显示不同的列。

下面的代码应该变成这样：

这是网格本身：

$("#Materials")
    .kendoGrid({
        dataSource: {
            data: [],
            schema: {
                model: {
                    id: "ID",
                    fields: {
                        ID: { type: "number", editable: false },
                        Code: { type: "string", editable: false },
                        Name: { type: "string", editable: false },
                        ExternalCode1: { type: "string", editable: false },
                        ExternalCode2: { type: "string", editable: false },
                        OtherCode1: { type: "string", editable: false },
                        ServiceMode: { type: "string", editable: false },
                    }
                }
            },
            pageSize: 20
        },
        pageable: true,
        columns: [
            { field: "Code", title:"Code"},
            { field: "Name", title: "Name"},
            { field: "ExternalCode1", title:"External Code1"},
            { field: "ExternalCode2", title:"External Code2"},
            { field: "OtherCode1", title:"Other Code1"},
            { field: "ServiceMode", title:"Service Mode"},
        ],
        editable: false
    });

我正在通过 ajax 调用在文档中填充数据，以提高页面加载性能。

Answer 1

您可以使用在您的 detailInit 事件中传递的数据用于您的子网格。

试试这个 jsFiddle 如果这适合你。

如何将 Kendo 网格拆分为子网格和父网格？

How to split a Kendo Grid into a child and parent grid?

grid

expand

split

row

kendo-ui