如何根据reportType参数隐藏Kendo Grid指定列（值为NTR时）

场景1：Grid初始化时直接控制列可见性 #

直接在目标列的配置中添加visible属性，通过reportType的取值判断是否显示该列：

{
    field: "SrNo",
    title: "Grounds of Suspicion",
    template: ({ SrNo }) => `<a style='color: blue !important; cursor: pointer;width:100%' data-ng-click="$parent.displayDetails('${SrNo}')">details</a>`,
    width: 100,
    visible: reportType !== 'NTR' // 当reportType为NTR时，该列自动隐藏
}

场景2：Grid初始化后动态控制列可见性 #

如果reportType是动态变化的，或者需要在运行时调整列的显示状态，可调用Kendo Grid的API方法实现：

步骤1：获取Grid实例 #

const grid = $("#你的Grid容器ID").data("kendoGrid");

步骤2：根据reportType判断并控制列可见性 #

if (reportType === 'NTR') {
    // 根据列的field名称隐藏列
    grid.hideColumn("SrNo");
    // 也可以通过列索引隐藏，比如该列是第0列：grid.hideColumn(0);
} else {
    // 需要显示列时调用showColumn
    grid.showColumn("SrNo");
}

针对AngularJS环境的补充（模板含ng-click） #

如果是在AngularJS项目中，还可以通过监听reportType的变化自动调整列状态：

$scope.gridOptions = {
    columns: [
        {
            field: "SrNo",
            title: "Grounds of Suspicion",
            template: ({ SrNo }) => `<a style='color: blue !important; cursor: pointer;width:100%' data-ng-click="$parent.displayDetails('${SrNo}')">details</a>`,
            width: 100,
            visible: $scope.reportType !== 'NTR'
        }
        // 其他列配置
    ]
};

// 监听reportType变化，动态更新列可见性
$scope.$watch('reportType', function(newVal) {
    const grid = $("#你的Grid容器ID").data("kendoGrid");
    newVal === 'NTR' ? grid.hideColumn("SrNo") : grid.showColumn("SrNo");
});

内容的提问来源于stack exchange，提问作者user30021044