CODEWITHSUNDEEP
jquerykendo-uikendo-grid
webduvet
webduvet

Reputation: 4292

Show and Hide Columns menu in table

I'm building a table with large number of columns which I want to be able to show and hide from user menu.

nice example from kendoui site here

My problem is that show/hide menu is the same for all columns, but it is buried deep inside column menu of each individual column.

I want to have that menu only in one place, possibly in table toolbar or exposed in footer so the user does not need to click through the complex dropdowns.

Upvotes: 0

Views: 1859

Answers (2)

OnaBai
OnaBai

Reputation: 40887

This is going to be a little trickier and will require some programming.

The solution is based on:

  1. Define in the toolbar a checkbox for each of the columns, for this I'm going to use a template.
  2. For each of the checkboxes we define a handler that will show/hide the column depending on the current state.

Template definition

<!-- language: lang-html -->
<script type="text/kendoui" id="template">
    <div>
        <label for='field-#= item.field #'>
            #= item.title ? item.title : item.field #
            <input type='checkbox' id='field-#= item.field #' checked onclick='hideColumn("#=idx#")'>
        </label>
    </div>
</script>

Now, in the grid definition we define that the toolbar is the result of executing a function:

<!-- language: lang-json -->
toolbar   : toolbarGenerator,

and tootbarGeneration is:

function toolbarGenerator() {
    var template = kendo.template($("#template").html());
    var toolbar = "";
    var grid = $("#grid").data("kendoGrid");
    $.each(grid.columns, function (idx, item) {
        toolbar += template({ idx : idx, item : item });
    });
    return toolbar;
}

That iterates through all the columns applying the template for generating the toolbar.

The event handler for changes in the checkbox is:

function hideColumn(col) {
    var grid = $("#grid").data("kendoGrid");
    if (grid.columns[col].hidden) {
        grid.showColumn(+col);
    } else {
        grid.hideColumn(+col);
    }
}

And the JSFiddle here http://jsfiddle.net/OnaBai/GerEN/1/

Upvotes: 2

developer10214
developer10214

Reputation: 1186

I would try to combine the toolbar example with the multiselect, by getting the available columns from the grid's columns property.

Upvotes: 1

Related Questions