title: Kendo Grid Hierarchy (child) grid on click event
body: <p>I want to add Hierarchy (child) grid on button click event. By default on grid load, there is a child grid. I want it to bind on button click. </p>
  
  <pre><code>var people = new kendo.data.DataSource({
        data: {!Output},
        batch: true,
        schema: {
              model: {
                  fields: {
                      carId: { type: "string" },
                      vehicleId: { type: "string", editable:false  },
                      Percentage: { type: "number", editable:false  },
                      Price: { type: "string", editable:false},
                      CarType: { type: "string", editable:false},
                      CarSize: { type: "string", editable:false},
                      CarPerCase: { type: "number", editable:false },
                      Family: { type: "string", editable:false},
                      ModelType: { type: "string", editable:false},
                      EPId: { type: "string" }, 
                      Tax: { type: "string" }
                  }
              }
          },
        pageSize: 20,
        sort: { field: "vehicleId", dir: "asc" }
      });    
  var element = $("#grid").kendoGrid({
          dataSource: people,
          navigatable: true,
          pageable: true, 
          toolbar: [
              "save", 
              "cancel",
               {
                  name: "Add",
                  text: "Show Car Price",
                  click: function(e) {                         
                      return false;
                  }
               },
               {
                  name: "Delete",
                  text: "Hide Car Price",
                  click: function(e) {                         
                      return false;
                  }
               }
          ],
          columns:[                  
                {
                    field: "carId",
                    title: "Car ID",
                    width: 150,  
                    hidden:true                    
                },
                {
                    field: "vehicleId",
                    title: "Vehicle ID",
                    width: 100
                },
                {
                    field: "Percentage",
                    title: "Percentage",
                    width: 70
                },
                {
                    field: "Price",
                    title: "Price",
                    width: 250
                },
                {
                    field: "CarType",
                    title: "Car Type"
                },
                {
                    field: "CarSize",
                    title: "Car Size"
                },
                {
                    field: "CarPerCase",
                    title: "Car Per Case"
                },
                {
                    field: "Family",
                    title: "Family"
                },
                {
                    field: "ModelType",
                    title: "Model Type",
                    width: 100
                },
                {
                    field: "EPId",
                    title: "EP Id",
                    hidden: false
                },                 
                {
                    field: "Tax",
                    title: "Tax",
                    format: "{0:c}",
                    width: 100
                }
            ],   
            editable:true,                                                                           
           groupable: true,  
           filterable: true,                     
           sortable: true,
           reorderable: true,
           resizable: true,
           columnMenu: true,                          
           pageable: {
              refresh: true,
              pageSizes: [10, 20, 50],
              buttonCount: 5
           },
           editable: "incell",               
           detailInit: detailInit                   
        });
  // hierarchy grid
        function detailInit(e) {                 
                var detailRow = e.detailRow;
                codeDetailData = e.data;
  
              $("&lt;div/&gt;").appendTo(e.detailCell).kendoGrid({                    
                  dataSource: e.data.ItemPrices.toJSON(),                                        
                  editable:true,
                  navigatable: true,
                  scrollable: false,
                  sortable: true,
                  pageable: true,
                  columns: [
                      { 
                          field: "Engine", 
                          width: "200px",
                          editor: serviceItemAutoCompleteEditor   
                      },
                      { 
                          field: "TN", 
                          title:"TN", 
                          width: "110px" 
                      },
                      { 
                          field: "TaxApplied", 
                          title:"Tax Applied" 
                      },
                      { 
                          field: "TaxChange", 
                          title: "Tax Change", 
                          width: "300px" 
                      },
                      { 
                          field: "StartDate", 
                          title: "Start Date",
                          format:"{0:dd-MM-yyyy}", 
                          editor: dateTimeEditor 
                      },
                      { 
                          field: "EndDate", 
                          title: "End Date",
                          format:"{0:dd-MM-yyyy}", 
                          editor: dateTimeEditor  
                      }
                  ]
              });
  
           } 
  </code></pre>
  
  <p>Now the detailInit: detailInit configuration is set on load. I want that load without detailInit (responsible for child grid), and bind this setting on button click. Is it possible?</p>