Как разделить сетку кендо на дочернюю и родительскую?

Итак, у меня проблемы с сеткой, потому что в ней слишком много столбцов. Что я хотел бы сделать, так это разделить эту сетку пополам, имея только половину столбцов, отображаемых в основной сетке, а другую половину в дочерней сетке, когда строка расширяется.

В основном данные в строке родительской сетки должны быть такими же, как данные в строке дочерней сетки, только показаны разные столбцы.

Приведенный ниже код следует преобразовать во что-то вроде этого:

Вот сама сетка:

$("#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.