How to Hide/Show ClientTemplate column in Kendo grid

Question

I have a kendo grid (testGrid) with following columns:

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

I am able to hide/show Payee column through this snippet:

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

However this code doesn't work in case of Image column. Neither of the two approaches below worked.

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

I would appreciate any input on how to make this work.

Answer 1

You can use the showColumn and hideColumn methods either with a number (the index of the column, starting from zero) or a string (the name of the column). So, in this case, you can show/hide the Image column like this (assuming your grid only has two columns):

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

Answer 2

I was able to add the field property to an image column and call that with the show/hide column.

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

I'm using a button dropdown that lists all the column names and an icon to toggle shown or hidden, but here's my js code:

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

The "colid" variable is an array that contains all the columns "names" - really the field property for all of the columns. The lower for loop is the click event. The createCallback function hides and shows the column. I had to add in a second loop to account for when columns move or are locked/unlocked.

I did the same thing for locking and unlocking the columns, but just used lockColumn or unlockColumn.

As a non-programmer, it took me a while to figure this out. Posting in hopes that it helps someone.