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

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，如果这对你有用。