Kendo Grid Hierarchy (дочерняя) сетка при событии click

Question

Я хочу добавить сетку иерархии (дочерняя) в событие нажатия кнопки. По умолчанию при загрузке сетки имеется дочерняя сетка. Я хочу, чтобы он привязывался при нажатии кнопки.

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; 

      $("<div/>").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 
        } 
       ] 
      }); 

     } 

Теперь detailInit: detailInit конфигурация задана при нагрузке. Я хочу эту загрузку без detailInit (отвечает за дочернюю сетку) и привязываю этот параметр при нажатии кнопки. Является ли это возможным?

Answer 1

Вы должны добавить шаблон подробно рассказать сетку там собирается быть detailinit сетку с

var element = $("#grid").kendoGrid({ 
    dataSource: people, 
    navigatable: 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: 100 
    }, { 
     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 
    }], 
    groupable: true, 
    filterable: true, 
    sortable: true, 
    reorderable: true, 
    resizable: true, 
    columnMenu: true, 
    pageable: { 
     refresh: true, 
     pageSizes: [10, 20, 50], 
     buttonCount: 5 
    }, 
    editable: "incell", 
    detailTemplate: 'Item Prices: <div class="grid"></div>', 
dataBound:function(e){ 
$(".k-hierarchy-cell").hide(); 
$(".k-hierarchy-col").hide(); 
} 
}); 

затем связать событие детали к сетке с помощью кнопки щелчка

$("#testbtn").click(function (e) { 
     $(".k-hierarchy-cell").show(); 
     $(".k-hierarchy-col").show(); 
     var grid = $("#grid").data("kendoGrid"); 
     grid.unbind("detailInit"); 
     grid.bind("detailInit", grid_detailInit); 
    grid.refresh(); 
    }); 

Вот пример Jsfiddle http://jsfiddle.net/ecotz69h/7/