How to use Popup in GRID - when HTML anchor repeats

[LJ]

I am wanting to leverage kendo Popup component with in a Grid.  The problem I'm having is to isolate or parametrize the popup component so that it only opens for the cell data that the user interacts with.  At present, the Popup uses an HTML style anchor and I have not determined how to pass a unique attribute so that the Popup opens only for the cell/row the user engages. 

 

Please have a look at this Stackblitz stubbed out to show as example of scenario:

• Clicking on "Show Description" button will bring up pop-up for every cell with that component due to anchor reference.
• https://stackblitz.com/edit/angular-bpyibp?file=app/app.component.ts 
  

Any help from this community forum will be helpful and appreciated!!

Thx,

LJ

[Dimiter Topalov]

Hi LJ,

Using the declarative syntax to create a Popup component in each and every Grid cell of the respective column in its cell template is not optimal and leads to the observed undesired behavior (all popups are displayed simultaneously).

To open a single popup each time a button is clicked, I can suggest utilizing the Popup Service instead:

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

Create a new Popup and pass the desired data item properties to display in the content.

Here is the updated example:

https://stackblitz.com/edit/angular-bpyibp-qmrldu?file=app%2Fapp.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik