如何在 Kendo 网格中 Hide/Show ClientTemplate 列

Question

我有一个包含以下列的 kendo 网格 (testGrid)：

columns.Bound(p => p.Payee);
columns.Template(@<text></text>).ClientTemplate("#if(clrCode=='1') {#<a href='javascript:GetImage()' class='k-button  k-grid-view' id='Image' title='View'>View</a>#}#").Title("Image");

我可以通过此代码段 hide/show 收款人列：

$("#testGrid").data("kendoGrid").showColumn("Payee");

但是，此代码不适用于图像列。以下两种方法均无效。

$("#testGrid").data("kendoGrid").showColumn("Image");
$("#testGrid thead [id=Image] .k-link").hideColumn("Image");

如有任何关于如何完成这项工作的意见，我将不胜感激。

Answer 1

您可以将 showColumn 和 hideColumn 方法与数字（列的索引，从零开始）或字符串（列的名称）一起使用。因此，在这种情况下，您可以像这样 show/hide Image 列（假设您的网格只有两列）：

$("#testGrid").data("kendoGrid").showColumn(1);
$("#testGrid").data("kendoGrid").hideColumn(1);

Answer 2

我能够将字段属性添加到图像列并使用 show/hide 列调用它。

{ field: "photo", title:" ", filterable: false, sortable: false, template: kendo.template($(".column-photo-employee").html()), width: 30, locked:true }

我使用的是一个按钮下拉列表，其中列出了所有列名称和一个用于切换显示或隐藏的图标，但这是我的 js 代码：

var grid = $(".grid").data("kendoGrid");
var colid = ['photo','last','first','user_id','wms_id','ta_id','payroll_id','alt_id','facility','department','supervisor','shift','tg','ag','activity_id','activity_name','start','end'];

var prefix3h = 'sch3hide-';

function createCallback( a ){
    return function(){
        $('#' + prefix3h + colid[a]).toggleClass('fa-eye fa-eye-slash');
        for (var i = 0; i < grid.columns.length; i++) {
            if (grid.columns[i].field === colid[a]) {
                var col = grid.columns[i];
                if (col.hidden) {
                    grid.showColumn(col.field);
                } else {
                    grid.hideColumn(col.field);
                }
            }
        }
    }
}

for(var a = 0; a < colid.length; a++) {
    $('#' + prefix3h + colid[a]).click( createCallback( a ) );
}

"colid" 变量是一个包含所有列 "names" 的数组 - 实际上是所有列的字段属性。下面的for循环是点击事件。 createCallback 函数隐藏和显示该列。我必须添加第二个循环来说明列何时移动或 locked/unlocked。

我对列的锁定和解锁做了同样的事情，但只是使用了 lockColumn 或 unlockColumn。

作为一个非程序员，我花了一段时间才弄明白这一点。发帖希望对大家有所帮助。

如何在 Kendo 网格中 Hide/Show ClientTemplate 列

How to Hide/Show ClientTemplate column in Kendo grid

asp.net-mvc

jquery

kendo-ui

kendo-grid