Column show/hide via Toolbar of Angular Kendo UI Grid

Question

Our web application uses Telerik Kendo UI with many Angular Kendo UI Grids. Each Grid has several columns. Some of our users don't prefer seeing all the columns so we want to implement column show/hide feature via checkbox for them. As per the Kendo UI Grid docs, it can be implemented by adding the below line to Kendo Grid options.

$scope.gridOptions = {
    ...
    columnMenu: true,
    ...
}

The above line adds a column menu to each column's header and turns on sorting, filtering, column show/hide by default. The problem with this is that column show/hide is now present in every column's column menu and all the columns are listed in every column . This causes redundancy and also the user has to do more to filter the grid everytime (very important!!!).

Here is a dojo sample which exhibits the behavior: sample

What I want to do instead is implement a single Dropdown or a Menu in the Toolbar of my Angular Kendo UI Grid which lists all the columns with a checkbox. Users should be able to check/uncheck the columns they want to see. I can then call the Kendo UI Grid's hideColumn and showColumn methods to show/hide columns on the select event of Kendo UI Menu.

I tried to build a custom Toolbar template with a Kendo UI Menu in it and bind to static text data.

Toolbar Template:

<script id="toolbarTemplate" type="text/x-kendo-template">
    <a class="k-button k-button-icontext k-grid-excel" href="\\#">
        <span class="k-icon k-i-excel"></span>Export to Excel</a>

    <a class="k-button" href="\\#">New Button</a>

    <ul kendo-menu 
        k-orientation="vertical"
        k-data-source="columnNames"
        k-on-select="onSelect(kendoEvent)">
    </ul>
  </script>

Angular code:

$scope.toolbarTemplate = $("#toolbarTemplate").html();

$scope.columnsData = new kendo.data.DataSource({
                data: [
              { text: "Column1" },
              { text: "Column2" },
              { text: "Column3" }
            ]
        });
$scope.columnsData.fetch();

$scope.columnNames = $scope.columnsData.data();

The Menu doesn't show up. :( Here is the dojo sample with custom Toolbar template: sample

I am an AngularJS beginner. Am I taking a wrong approach? Please help me to implement the Dropdown/Menu from the Grid Toolbar.

Thanks.

Column show/hide via Toolbar of Angular Kendo UI Grid

0 Answers0