Hiding Columns in the Columns of the Column menu option based on condition

Question

I am using Kendo Column Menu option for kendo grid.I want that while hiding/showing the columns through the third option i.e Column I want to hide the Menus if the title of that column is blank.

Here I want to Hide the RefValue4 and RefValue5 since it corresponding values are coming null from the database.so there is no need of showing these.

I am doing this way:

if (grid.dataSource.data()[0].RefName4==null) {
    grid.hideColumn(18);
}

but not able to achieve the result.

Answer 1

Is enough checking the content of the first row of the grid (as you propose in your code sample(? If so, you can define a dataBound handler that hides columns as:

dataBound : function (e) {
    // Get reference to the grid
    var grid = e.sender;
    // Get reference to received data
    var data = e.sender.dataSource.data();
    // Check that we actually received any data
    if (data.length > 0) {
        // Iterate on columns hiding those that in the first row have no data
        $.each(grid.options.columns, function (idx, elem) {
            if (!data[0][elem.field]) {
                grid.hideColumn(idx);
            }
        });
    }
}

This runs anytime that you receive data from the server but as I said, only checks for the content of the first but you can easily modify for checking all. What this does not implement is hiding the column title from the menu.

See a running example here: http://jsfiddle.net/OnaBai/XNcmt/67/

EDIT: If you need that columns with no data are not displayed but also do not show up in the menu, you need to configure columns in the grid without those columns. You can do it in runtime once the data is received doing something like:

// Fetch data from the DataSource
ds.fetch(function (d) {
    // By default, no column in the grid
    var columns = [];
    // List of available column definitions
    var definitions = [
        { field: "Id", hidden: true },
        { field: "FirstName", title: "First Name" },
        { field: "LastName", title: "Last Name" },
        { field: "City" },
        { field: "Position" }
    ];
    // For each column in the definition check if there is data
    $.each(definitions, function(idx, elem) {
        if(d.items[0][elem.field]) {
            // If there is data then copy the definition to columns
            columns.push(elem);
        }
    });
    // Use received data plus the columns definition computed
    $("#grid").kendoGrid({
        dataSource: d.items,
        editable  : false,
        pageable  : true,
        columnMenu: true,
        columns   : columns
    }).data("kendoGrid");
});

Where ds is the DataSource definition.

See it here : http://jsfiddle.net/OnaBai/XNcmt/69/