클릭 이벤트에서 Kendo Grid Hierarchy (하위) 격자

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

당신은

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

를 사용하여 그리드에 대한 세부 이벤트를 바인딩 detailinit 그리드에게있을 것입니다 그리드를 알려줄 수있는 세부 템플릿을 추가해야합니다 여기에 Jsfiddle 예제가 있습니다 http://jsfiddle.net/ecotz69h/7/