Tool bar Column Menu in kendo grid using angular js

Question

How to put a column menu in toolbar of a kendo grid to select the columns as per need?

dataSource: $scope.kDisplayReceivedOrders,
            toolbar: ["save", "cancel",
                {
                    template:
                        '<button class="k-button k-button-icontext " ng-click="confirmReceivedOrder()" >Confirm</button>' +
                        '<button class="k-button "  ng-click="printReceivedOrderDetails()">Print</button>'
                }
            ],

Answer 1

You cannot insert the columnMenu froma a Kendo grid inside a toolbar because Kendo add it to the current grid.

But what you could do is a self implementation of the behavior of this menu inside your own toolbar. I have done it recently for a project.

What I have done:

• An angular component.
• When clicking on the component I read what columns are visible.
  • I do that throgh the .getOptions() and then inspecting the columns property of the object returned. The invisible columns will have a hidden=true.
• Then in the template I show all the columns with a checkbox to switch the visibility.
• hideColumn() and showColumn() should be attached to the action of checking or unchecking a checkbox.

Angular component controller:

init() {
 if(this.grid)
  this.columns = getColumns(this.grid.getOptions().columns);
}

checkbox(column) {
  column.visible === true ? this._objectViewService.grid.showColumn(column.field) : this._objectViewService.grid.hideColumn(column.field);
}

A method to convert from kendo defaults to my visualization system:

function getColumns(columns) {
 let cols = [];
 columns.forEach(column => cols.push({title: column.title, field:   column.field, visible: column.hidden !== undefined ? !column.hidden : true}));
 return cols;
}

The template:

<div class="columnDropdownComponent">
 <p class="title" ng-mouseover="$ctrl.init()">
  <button>Columns<span class="icon-navigation-down"></span></button>
 </p>
 <div class="dropdown">
  <div class="group">
   <label ng-repeat="column in $ctrl.columns" ng-class="{'checked': column.visible}">
    {{column.title}}
   <input type="checkbox" ng-model="column.visible" ng-click="$ctrl.checkbox(column)">
  </label>
 </div>
</div>