use of tooltip inside ui-grid

Question

I try to use angularjs tooltip that contains angularjs tamplate for a row cell

Here are the two columns that are used

{ 
    name: 'id',
    field: 'id', 
    displayName: 'N° CF', 
    grouping: { groupPriority: 0 }, 
    sort: { 
        priority: 0, 
        direction: 'asc' 
    }, 
    width: '200', 
    cellTemplate: `
        <span 
            ng-if="row.groupHeader && 
            col.grouping.groupPriority === row.treeLevel">
            {{COL_FIELD}}
        </span>
        <span 
            ng-if="!row.groupHeader" 
            tooltips 
            tooltip-view="customers.html" 
            tooltip-side="bottom" 
            tooltip-show-trigger="mouseover" 
            tooltip-view-ctrl="PhoneListCtrl">
            {{row.entity.partNumber}}
        </span> ' 
    },

and

{ name: 'customer',field: 'customer', visible: false}

the data is coming from a json file until now

[
    {
        "description": "description1", 
        "a": 1, 
        "b": 3,
        "c": 3,  
        "d": 2, 
        "e": 3, 
        "id": 1000, 
        "groupingStatus" :  1,
        "manufacSiteCode": "manufacSiteCode1", 
        "nissanLocalCode": "nissanLocalCode1", 
        "supplierName": "supplierName1",
        "town": "town1",
        "partNumber": "part1",
        "partDescription": "partDescription1",

        "customer" : [{ "customerId" : "cust1",
                        "apiCode" : "api1",
                        "g2bCode" : "g2b1",
                        "label" : "label1"
                        },
                        { "customerId" : "cust2",
                        "apiCode" : "api2",
                        "g2bCode" : "g2b2",
                        "label" : "label2"
                        },
                        { "customerId" : "cust1",
                        "apiCode" : "api1",
                        "g2bCode" : "g2b1",
                        "label" : "label1"
                        }]                      
        }, 
    {..........................
...............................

and the template of the tooltip is the following

<table border="1" >
  <tr>
    <th>G2B Code</th>
    <th>Label</th>
    <th>API Code</th>
  </tr>
<tr ng-repeat="customer in row.entity.customer">
    <td>{{customer.g2bCode}}</td>
    <td>{{customer.label}}</td>
    <td>{{customer.apiCode}}</td>
</tr>
</table>

the two things that control the display of the tooltip are "tooltip-view-ctrl="PhoneListCtrl"" in the column def and "customer in row.entity.customer" in the previous template. When I replace "row.entity.customer" by a variable in the scope it works. But, I want to display the data coming from the row and it doesn't work until now. So my question is : What have I to do so that I can pass "row.entity.customer" in the template that will fetch the data coming from my json file. It is a question relating about what is the controller in the grid and about what is the grid scope.

Here is the plunker. Thank you in advance for your answer http://plnkr.co/edit/jY0lH1FsczgR3jrQH3iL?p=preview

flamant flamant · Accepted Answer · 2015-11-29T12:17:05

I found a solution. I pass a model in my columndef template as the following

tooltip-view-model="row.entity.customer"

And in my template I use it as the following

<table border="1" >
  <tr>
    <th>G2B Code</th>
    <th>Label</th>
    <th>API Code</th>
  </tr>
<tr ng-repeat="customer in tooltipViewModel">
<td>{{customer.g2bCode}}</td>
<td>{{customer.label}}</td>
<td>{{customer.apiCode}}</td>
</tr>
</table>

fortunately, angularjs tooltip offer me the possibility to pass a model, but I would like to know more generally how we can refer to the internal scope of the grid and how we can pass properties and functions of that scope to a template

use of tooltip inside ui-grid

1 Answers