Kendo UI Сетка угловая 5 Мат-меню не закрывается в kendoGridCellTemplate - PullRequest
0 голосов
/ 04 мая 2018

У меня есть mat-menu внутри kendoGridCellTemplate , где элементы меню создаются ngFor .

Это меню отображается правильно, но как только мы нажимаем, оно не закрывается .

Если я использую Chrome Инспектор для перехода к этому элементу, его нет в DOM.

<kendo-grid-column *ngIf="shouldCreate" title="Menu">
  <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
    <mat-menu #actionMenu="matMenu" [overlapTrigger]="false">
      <div class="action-menu">
        <a *ngFor="let actionitem of Items;let mi=index"
          [ngClass]="{'border-top':actionitem.HasSeperator}" 
          ng-click='ActionItemClicked(actionitem.MenuTitle,dataItem)'>
          <mat-icon>{{actionitem.MenuIcon}}</mat-icon> 
           {{actionitem.MenuTitle}}
        </a>
      </div>
    </mat-menu>
    <button mat-icon-button [matMenuTriggerFor]="actionMenu">
      <mat-icon>more_vert</mat-icon>
    </button>
  </ng-template>
</kendo-grid-column>

Любая идея, что здесь пошло не так.

Даже простая реализация не работает, т.е. меню не закрывается, вот код:

<kendo-grid-column title="Menu Test">
  <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
    <button mat-button [matMenuTriggerFor]="menu">Menu</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>Item 1</button>
      <button mat-menu-item>Item 2</button>
    </mat-menu>
  </ng-template>
</kendo-grid-column>

Код меню скопирован с Страница угловых материалов

1 Ответ

0 голосов
/ 17 мая 2018

Наконец-то я нашел в чем проблема. для автоматического определения ширины столбца я использовал функцию grid.autoFitColumn(), которая вызвала эту проблему, как только удалила проблему. Но мне все еще нужно посмотреть, что внутри этого autoFitColumn вызывает эту проблему.

...