Панель инструментов Меню столбцов в сетке кендо с использованием угловых js

Question

Как разместить меню столбцов на панели инструментов сетки кендо, чтобы выбрать столбцы по мере необходимости?

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

Вы не можете вставить columnMenu froma сетку Кендо внутри панели инструментов, потому что кендо добавить его к текущей сетке.

Но то, что вы могли бы сделать, - это сама реализация поведения этого меню внутри вашей собственной панели инструментов. Я сделал это недавно для проекта.

То, что я сделал:

• Угловой компонент.
• При нажатии на компонент я читаю, какие столбцы видны.
  • Я делаю это через .getOptions(), а затем проверяя свойство объекта columns объекта. В невидимых столбцах будет hidden=true.
• Затем в шаблоне я показываю все столбцы с помощью флажка, чтобы переключать видимость.
• hideColumn() и showColumn() должны быть прикреплены к действию проверки или снятия флажка.

Угловая контроллер компонента:

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); 
} 

метод для преобразования из кэндо по умолчанию в моей системе визуализации:

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; 
} 

Шаблоне:

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