Grid Column Cell Button Template with Action

[Nathan]

Is there an example of how to make a button within a cell, for each row, and when clicked will open a modal popup window that could be used to provide more information for that grid row. 

Example: 

I have a product grid and want to have a column with a button for each product and when the button is clicked it will open a modal popup window that could show additional product details. The button click event would have to pass the ProductId as a parameter based on the row where the button is located. 

[Dimiter Topalov]

Hello Nathan,

You can use the Grid Cell template to provide any desired custom content for the cells of the respective Grid column:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/templates/#toc-cell-template

The whole data item object, associated with each row, is available in the template as let-dataItem, and you can pass either the whole object or its ID field only to the method that will be responsible for showing the modal popup.

The Kendo UI for Angular built-in modal Dialog component can in turn be used to display all necessary information:

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

Here is an example, demonstrating the described approach:

https://stackblitz.com/edit/angular-il9rq3?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik