Всплывающее окно для каждого ряда кендо-сетки в угловых 6

Question

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

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>

Answer 1

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

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

Отслеживать для dataItem

Один вариант будетдля отслеживания активного состояния всплывающих строк в самом 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>