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");

我可以通过此代码段隐藏/显示Payee列：

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

但是，对于Image列，此代码不起作用。以下两种方法都没有奏效。

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

我很感激有关如何使这项工作的任何意见。

Answer 1

您可以将showColumn和hideColumn方法与数字（列的索引，从零开始）或字符串（列的名称）一起使用。因此，在这种情况下，您可以像这样显示/隐藏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 ) );
}

＆＃34; colid＆＃34;变量是一个包含所有列的数组＆＃34; names＆＃34; - 确实是所有列的字段属性。较低的for循环是click事件。 createCallback函数隐藏并显示列。我不得不添加第二个循环来解释列移动或锁定/解锁的时间。

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

作为一名非程序员，我花了一段时间来解决这个问题。希望它可以帮助某人。

如何在Kendo网格中隐藏/显示ClientTemplate列

2 个答案: