Search code examples
kendo-uisplitgridrowexpand

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

So I'm having problems with my grid because it has too many columns. What I'd like to do is split this grid into half, having only half of the columns shown in the main grid and the other half in a child grid when row gets expanded.

Basically the data in a row of a parent grid has to be the same as the data in row of a child grid, only different columns shown.

The code below should be transformed into something like this: enter image description here

Here's the grid itself:

$("#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
    });

I'm filling the data on document ready for faster pageload performance with an ajax call.

Solution

  • You can use the data passed in your detailInit event to be used in your child grid.

    Try this jsFiddle if this works for you.