Question

我正在使用KendoGrid控件来放置分层数据。但我想用条件动态隐藏详细信息或子表中的一列。子网格是在主网格的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

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

1 个答案: