Take the 2-minute tour ×

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>

function fnShowHide( iCol )
   $('#kendoGridTest').data("kendoGrid").options.columns[iCol].hidden = false;

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

    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.

share|improve this question
add comment

1 Answer

up vote 10 down vote accepted

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');
//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.

share|improve this answer
That was it - Thanx a bunch! –  Caad9 Aug 31 '12 at 7:00
thks, if i want to show all column which hide then how can do it? i.e what is best way to do? –  Rikin Patel Oct 25 '12 at 14:19
To show all the columns you can cycle through them for(var i=0;i<grid.columns.length;i++){ grid.showColumn(i); } –  Petur Subev Oct 27 '12 at 13:35
add comment

Your Answer


