CODEWITHSUNDEEP
angularkendo-uipopup
Alaa'
Alaa'

Reputation: 487

Popup for each kendo-grid row in angular 6

I working with kendo grid and Angular 6. each row has action button in kendo column which is (preview) for each row. By clicking it, it previews in a popup, only this row information. I used this tutorial for making the popup

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

and it worked, unless, if I press "show" button for any row, all show buttons open the popups and same for close button, close all the popups.

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

Upvotes: 0

Views: 3168

Answers (1)

Philipp
Philipp

Reputation: 1884

You are currently tracking the active state for all the popups in one single variable called show. Which causes all popups to show/hide at the same time.

But you need to track the active state per row/dataItem.

Track per dataItem

One option would be to track the active state of the rows popup in the dataItem itself.

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

Track per rowIndex

Alternatively one could track the active state in a global variable based on the rowIndex. Which is provided by the 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>

Upvotes: 1

Related Questions