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

Question

我正在使用 KendoGrid 控件来放置分层数据。但我想根据条件动态隐藏详细信息或 child table 中的一列。 child 网格是在主网格的 detailInit 函数的帮助下构建的。请告知或建议如何即时隐藏 child table 列。

$(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"

我想根据来自主 table 的 OperationType 字段的值隐藏 child table 中的还原列。

请提出修复建议。

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 - 隐藏带有条件的详细信息列

KendoGrid - Hide the detail column with condition

javascript

jquery

kendo-ui

kendo-grid

kendo-asp.net-mvc