Madhav Madhav - 4 months ago 18
AngularJS Question

Popover in ng-grid

I am trying to use Popover in my project and I am referring this post :

var templatePopover = '<div popover={{row.entity.name}} popover-trigger="mouseenter" popover-placement="top" popover-append-to-body="true">{{row.getProperty(col.field)}}</div>';


What is {{row.getProperty(col.field)}} for? Where is col.field in the code?

Thanks.

Answer

When you set your column definitions for ng-grid, you tell it the name of the field.

gridOptions: {  
columnDefs: [
      {field: 'name', displayName: 'Name', cellTemplate: templatePopover},
      {field: 'age',  displayName: 'Age'}
]
}

So when you reference

{{row.getProperty(col.field)}}

You are saying get the value for the current row, for that field. In this case, get the current row's 'name' field, since that is the column that you have placed templatePopover on.

Edit: Here is an update of your plunker with 2 changes: First: disable the flexible height plugin otherwise nothing showed up at all in the grid - probably this plunker just doesn't have that and it didn't seem relevant to your question. Second: turn on row selection and you get the hand icon back. I don't know what you mean about taking out the col.field part and still seeing the data. The plunker you gave me still had it in there. http://plnkr.co/edit/TVWsmEGXUDgNhlLrkWXY?p=preview