KendoGrid - 隐藏条件的详细信息栏

Question

我正在使用KendoGrid控件来放置分层数据。但是我想用条件动态地隐藏detail或child表中的一列。子网格是在主网格的detailInit函数的帮助下建立起来的。请提醒或建议，如何隐藏儿童表格栏。

$(function() { 
    $("#gridAudit").kendoGrid({ 
     dataSource: { 
      data: partnergroups, 
      schema: { 
       model: { 
        fields: { 
         PartnerGroupID : {type: "number"}, 
         PartnerName: { type: "string" }, 
         OperationType: { type: "string" }, 
         HasHistory: { type: "boolean" } 
        } 
       } 
      }, 
      pageSize: 10, 
      sort: { field: "PartnerName", dir: "asc" } 
     }, 
     height: 250,      
     scrollable: true,      
     sortable: true, 
     filterable: true,       
     detailInit: detailInitfunc, 
     pageable: { 
      input: true, 
      numeric: true 
     }, 
     columns: [ 
      { field: "PartnerName", title: "Partner Name", width: "150px" }, 
      { field: "OperationType", title: "Status", width: "80px" } 
     ] 
    }); //E.O. "kendoGrid" initialization 

});  //E.O. "DomReady" 


function detailInitfunc(e) { 
    $("<div/>").appendTo(e.detailCell).kendoGrid({ 
     dataSource: { 
      data: childgroups, 
      filter: { field: "PartnerGroupID", operator: "eq", value: e.data.PartnerGroupID } 
     }, 
     scrollable: false, 
     sortable: false, 
     pageable: false, 
     columns: [ 
      { field: "PartnerName", title: "Partner Name", width: "150px" }, 
      { field: "OperationType", title: "Status", width: "80px" }, 
      { field: "Revert", title: "Action", width: "80px", template: '<i class="fa fa-floppy-o fontIcon" onclick="revertData(#=HistoryID#);" title="Revert the record"></i> ' } 
     ] 
    }); 
} //E.O. "detailInitfunc" 

我想根据来自主表的OperationType字段的值隐藏子表中的Revert列。

请提出修复建议。

Answer 1

这可以通过在创建详细网格时管理columns属性轻松完成。你的信息已经有了，它带有e.data（简称段）：

var columns = [ 
    { field: "PartnerName", title: "Partner Name", width: "150px" }, 
    { field: "OperationType", title: "Status", width: "80px" } 
]; 

if (e.data.OperationType == "Type #1") { 
    columns.push({ field: "Revert", title: "Action", width: "80px", template: '<i class="fa fa-floppy-o fontIcon" onclick="revertData(#=HistoryID#);" title="Revert the record"></i> ' }); 
} 

$("<div/>").appendTo(e.detailCell).kendoGrid({ 
    columns: columns 
}); 

Working Demo with Full Code

甚至简单，设置列的hidden财产（简称段）：

var hidden = false; 

if (e.data.OperationType == "Type #1") { 
    hidden = true; 
} 

$("<div/>").appendTo(e.detailCell).kendoGrid({ 
    columns: [{ field: "Revert", title: "Action", width: "80px", template: '<i class="fa fa-floppy-o fontIcon" onclick="revertData(#=HistoryID#);" title="Revert the record"></i> ', hidden: hidden }] 
}); 

Working Demo with Full Code