Kendo UI Grid - Hide/Unhide of column in MVC3

Question

My case is a search window with around 20 properties, in which the user can choose to specify search criteria. Each property has a corresponding checkbox which toggles if the prop is included in the search result or not. The search result is then displayed in a kendo grid.

Simplified code which should illustrate the issue (kendo ui complete ver. 2012.2.710):

<input type="checkbox" onclick="fnShowHide(1);" name="showSearchColumn" id="checkShowField1"  />                                

<div id="example" class="k-content">
    <div id="kendoGridTest"></div>
</div>

<script>
function fnShowHide( iCol )
{
   $('#kendoGridTest').data("kendoGrid").options.columns[iCol].hidden = false;
   $('#kendoGridTest').data("kendoGrid").refresh();
}
</script>

The MVC3-controller method returns data from search is of type JsonResult (given as jsonResultSearchResult below):

$('#kendoGridTest').kendoGrid({
    dataSource: jsonResultSearchResult,
    schema: {
        model: {
            fields: {
                FirstName: { type: "string" },
                LastName: { type: "string" },
                Address: { type: "string" }
            }
        }
    },
    sortable: true,
    resizable: true,
    columns: [{
        field: "FirstName",
        width: 90,
        title: "First name"
    },
        {
            field: "LastName",
            width: 120,
            hidden: true,
            title: "Last name"
        },
        {
            field: "Address",
            width: 140,
            title: "Adr"
        }
    ]
});

After performing a search, the grid fills with the right data and LastName is indeed hidden. But if the user now checks the checkShowField1 control, I would like the grid to refresh with all three cols visible. It does not. fnShowHide() does not do the job.

I must admit I was looking for anything of a type of Columns collection in a QuickWatch window while debugging in VS. The collection in fnShowHide contains the right data from when the grid was initialized, and I'm able to manipulate the .hidden property, but the grid still does not display the column.

I'm still a bit confused whether dynamic hide/show of cols is supported but this accepted answer from a Telerik employee looked promising.

Answer 1

To hide a column on the client side with JavaScript you should use the hideColumn() and to show it you use the showColumn(). Both methods have several overloads - you either pass the index of the column or you pass the name of the field the column is bound to. For example:

var grid = $('#GridID').data('kendoGrid');
grid.hideColumn(2);
//or show it
grid.showColumn("OrderDate") // lets say thats the field name of the same column

The post you linked shows how to Hide/Show column with the MVC Wrappers which is slightly different.