need popover over custom template cell of Angularjs ui grid

Question

I am using Angularjs ui grid with progress bar in first column and my grid options are shown below :

  ctrl.gridOptions = {};

ctrl.gridOptions.columnDefs = [{
        field: 'completeStatus',
        cellTemplate: '<span>{{row.entity.completeStatus}} % </span> <uib-progressbar value="row.entity.completeStatus"> </uib-progressbar>',
        width: 100
    },

    {
        field: 'invoiceNum'
    }
];

html:

<div id="regGrid" ui-grid="ctrl.gridOptions" class="reg-grid"></div>

Which is working fine. Now I want to display bootstrap popover upon hovering the first cell of the grid, I mean the cell with field 'completeStatus'. Can any one help me how to configure it?

score 2 · Answer 1 · answered Jun 01 '16 at 12:15

Add popover attributes to your cell template and have a popover template located in your component html. Like this:

Component HTML:

This will be located at the bottom of your HTML just before the closing root </div>.

    <script type="text/ng-template" id="cellPopover.html">
        <div>Your popover Template</div>
    </script>

Component Controller: Adding the popover attributes to your cell template.

ctrl.gridOptions.columnDefs = [{
        field: 'completeStatus',
        cellTemplate: '<div popover attributes><span>{{row.entity.completeStatus}} % </span> <uib-progressbar value="row.entity.completeStatus"> </uib-progressbar></div>',
        width: 100
    }

Where I wrote popover attributes you will place the actual attributes such as:
1. uib-popover-template="'cellPopover.html'"
2. popover-trigger="mouseenter"
3. popover-placement="bottom"

need popover over custom template cell of Angularjs ui grid

1 Answers1