title: How to split a Kendo Grid into a child and parent grid?
body: <p>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. </p>
  
  <p>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. </p>
  
  <p>The code below should be transformed into something like this:
  <a href="https://i.stack.imgur.com/0jkd2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0jkd2.png" alt="enter image description here"></a></p>
  
  <p>Here's the grid itself:</p>
  
  <pre><code>$("#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
      });
  </code></pre>
  
  <p>I'm filling the data on document ready for faster pageload performance with an ajax call.</p>