Блог

Я работаю с kendo grid и Angular 6. в каждой строке есть кнопка действия в столбце kendo, которая является (предварительным просмотром) для каждой строки. При нажатии на него во всплывающем окне отображается только эта информация о строке. Я использовал это руководство для создания всплывающего окна

https://www.telerik.com/kendo-angular-ui/components/popup/

и это сработало, если только, если я не нажму кнопку «Показать» для любой строки, все кнопки «Показать» откроют всплывающие окна, и то же самое для кнопки «Закрыть», закроет все всплывающие окна.

     <kendo-grid-column field="tests" title="Actions" width="120" [locked]="true">
      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">            
        <div>
          <div class="example-config">
            <button #anchor (click)="onToggle()" class="btn" class="btn btn-primary btn-lg gradient">{{toggleText}}</button>
          </div>
          <kendo-popup [anchor]="anchor" *ngIf="show" [animate]="animate">
<!--(anchorViewportLeave)="show = false"-->
            <div class='content'>
                   <--!content here-->
             </div>
  

В настоящее время вы отслеживаете активное состояние для всех всплывающих окон в одной переменной с именем show . Что приводит к одновременному отображению / скрытию всех всплывающих окон.

Но вам нужно отслеживать активное состояние для каждой строки / элемента данных.

Отслеживание для каждого элемента данных

Одним из вариантов было бы отслеживать активное состояние всплывающего окна rows в самом DataItem.

 <button #anchor (click)="dataItem.show = !dataItem.show" class="btn btn-primary">Preview</button>

<kendo-popup [anchor]="anchor" *ngIf="dataItem.show" [animate]="animate">
     <-- content here -->
</kendo-popup>
  

Отслеживание по RowIndex

В качестве альтернативы можно отслеживать активное состояние в глобальной переменной на основе rowIndex . Которое предоставляется kendoGridCellTemplate .

 <button #anchor (click)="show[rowIndex] = !show[rowIndex]" class="btn btn-primary">Preview</button>

<kendo-popup [anchor]="anchor" *ngIf="show[rowIndex]" [animate]="animate">
     <-- content here -->
</kendo-popup>