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!

Solution 1

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

Solution 2

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).

Comments

[Apurv Deshmukh]

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

[OnaBai]

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.

[3 rules]

Hello How can we do it same for raw.

[OnaBai]

@padhiyar, did you try using a filtering condition?

[3 rules]

@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 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.