angular-ui-grid: how to highlight row on mouseover?

Question

I want to highlight an entire row of angular-ui-grid when the mouse is on top of it.

I have tried to modify the rowTemplate by adding ng-mouseover and ng-mouseleave callbacks which set the background-color.

Here is my rowTemplate--I expect the first three lines to change the entire row color to red. But only the cell currently under the mouse gets changed.

<div
    ng-mouseover="rowStyle={'background-color': 'red'}; grid.appScope.onRowHover(this);"
    ng-mouseleave="rowStyle={}"
    ng-style="rowStyle"
    ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
    ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
    class="ui-grid-cell"
    ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"
    role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}"
    ui-grid-cell>
</div>

How do I highlight an entire row on mouseover events?

Another approach that I tried: using some callback function do this--like the appScope.onRowHover in the example. Here, I have the scope of the row being hovered on. How do I go about styling that row within the onRowHover function?

Thanks!

Link to Plunkr. I expect mousing over a grid cell to turn the entire row red.

Answer 1

Here, is it. I made a change in the row template. http://plnkr.co/edit/gKqt8JEo2FukS3URRLJ5?p=preview

RowTemplate:

<div ng-mouseover="rowStyle={'background-color': 'red'}; grid.appScope.onRowHover(this);" ng-mouseleave="rowStyle={}">
    <div  ng-style="rowStyle" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
    class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}" ui-grid-cell>
    </div>
</div>