Kendo Grid columns Hide/Show, Enable/Disable

Question

How to hide/show and Enable/Disable columns in kendo grid on condition or event. I could only find option of enable/disable kendogrid column in .model

Any help is appreciated.

Thank you in advance!

score 36 · Accepted Answer · answered Nov 12 '13 at 16:28

36

You showing/hiding columns in KendoUI Grid you should use showColumn and hideColumnand use as argument a number (the index of the column that you want to show/hide) or a string (the name of the field associated in that column).

Example:

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable  : false,
    pageable  : true,
    columns   :
    [
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 90, title: "Last Name" },
        { field: "City", width: 100 }
    ]
}).data("kendoGrid");

$("#show_col1").on("click", function() {
    // Use the index of the column to show
    grid.showColumn(0);
});

$("#hide_col1").on("click", function() {
    // Use the name of the field to hide it
    grid.hideColumn("FirstName");
});

You can control if the column should be initially hidden by setting hidden in the column initialization.

See an example here : http://jsfiddle.net/OnaBai/XNcmt

answered Nov 12 '13 at 16:28

OnaBai

40,767
6
96
125

Thanx a lot hide/show worked like a charm even if grid is editable. similarly anything available for Enable/Disable columns on custom logic pr event. Thnx again – Apurv Deshmukh Nov 13 '13 at 06:17
Not sure about understanding the last part of your comment "anything available for Enable/Disable columns on custom logic pr event"... Basically, use `showColumn`/`hideColumn` from the event or when the condition is met. – OnaBai Nov 14 '13 at 08:54
Hello How can we do it same for raw. – 3 rules Jul 08 '16 at 11:04
@padhiyar, did you try using a filtering condition? – OnaBai Jul 10 '16 at 23:14
@OnaBai Yes that is also the solution but I want to hide and show the raws as per dropdownlist selection at client side is it possible at client side? I have seen this [example](http://jsfiddle.net/valchev/MG89G/) but it is static I want all the data at once and hide and show / filter based on selection of dropdownlist and grid has column the same as dropdownlist values. – 3 rules Jul 12 '16 at 05:33

score 1 · Answer 2 · answered Nov 12 '13 at 14:43

The Kendo grid contains a showColumn method that will take either an index or the column name string. To enable hiding/displaying columns, you'll initialize the grid columnX as a normal column, and mark it hidden (in MVC this is the .Hidden() method when binding the column). Then based on a page event, you can simply call showColumn (and then hideColumn to reverse the operation).

score 0 · Answer 3 · answered Sep 28 '16 at 16:58

For Kendo Grid that has already been created, you can show/hide make all columns editable/uneditable by:

var allowEdit = false;
var grid = $("#sampleGrid").data("kendoGrid");
grid.showColumn(0);
grid.showColumn(1);

if (!allowEdit) {
    grid.hideColumn(0);
    grid.hideColumn(1);
}
var len = $("#sampleGrid").find("tbody tr").length;
for (var i = 0; i <= len ; i++) {
    var model = $("#sampleGrid").data("kendoGrid").dataSource.at(i);
    if (model) {
        for (i = 0; i <= (grid.columns.length - 1) ; i++) {
            var column = grid.columns[i];
            model.fields[column.field].editable = allowEdit;
        }
    }
}

Kendo Grid columns Hide/Show, Enable/Disable

3 Answers3