Question

我想在按钮点击事件上添加Hierarchy（子）网格。默认情况下，在网格加载时，有一个子网格。我希望它在按钮点击时绑定。

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/

点击事件上的Kendo Grid Hierarchy（子）网格

1 个答案: