I'm trying to dig into the API of Angular UI-Grid in order to make sure I achieve the Bootstrap Popover for my cell header. I've been seeing all around but couldn't find any solution.
Something like this - plnkr.co/edit/UJJttN
I'm also trying to make that popover happens only for the header cell. Any suggestions?
Taking a look at the UI-Bootstrap documentation for popover: https://angular-ui.github.io/bootstrap/#/popover
You are using an old version of UI-Bootstrap in your plnkr, so if you upgrade you will need to change attributes popover="" and popover-template="", if you upgrade to latest, to uib-popover="" and uib-popover-template=""
That being said, you may notice a $ icon/badge next to the uib-popover-template attribute in the popover documentation (There is a duplicate without the badge, not sure why it is there.)
From the icon key in the documentation, the $ icon/badge means the following:
This setting expects an angular expression instead of a literal string. If the expression support a boolean / integer, you can pass it directly.
You need to put the URL to the popover template in a scope variable, and reference that in an angular expression in popover-template="ANGULAR.EXPRESSION", rather than passing it a literal string, as you are.
I've modified your plnkr to do it this way, and the popover now works as intended. http://plnkr.co/edit/qc8MNQKch1IIdz2zVtRX?p=preview
Regarding the popover only for the header
Could you clarify, you want the popover to display only for the column header? In that case, you would need to use a headerCellTemplate, instead of a cellTemplate. I've also modified your plnkr to show how to do this. Hover over the Roles column header of grid 2 to see this, and examine the template file added to the plnkr.
In your plnkr example, you are referencing cell data in the static popover (grid 1) and in the template popover (grid 2). Was this just for testing purposes? Referencing 'row' for cell data would not be available from the headerCellTemplate.
I hope this is helpful!
