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

KendoGrid - Hide the detail column with condition

本文关键字：详细信息 有条件 隐藏 KendoGrid      更新时间：2023-09-26

>我正在使用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"

我想根据来自主表的"操作类型"字段的值隐藏子表中的"还原"列。

请提出修复建议。

这

可以通过在创建细节网格时管理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
});

具有完整代码的工作演示

甚至很简单，设置列的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 }]
});

具有完整代码的工作演示

相关文章：