Angular UI-Grid: Hover on expandable row

Question

I am trying to implement a hover effect on the rows of an Angular ui grid. When the user hovers anywhere on the row, the complete row is supposed to change its background color. However, I am using the expandable grid, which automatically creates a row header with the expand icon. Now the CSS rules either color the row header area or the data area, but never the complete row.

This is the hover effect on the row header:

This is the hover effect on any other column:

Did anyone find a solution for this?

Answer 1

Here is what I did:

In the right part of the table, I added the following to the cell template:

<div class="ui-grid-cell-contents" 
     ng-class="{ 'ui-grid-cell-hover': (grid.appScope.hoverRow == row.uid) }"
     ng-mouseenter="grid.appScope.hoverRow = row.uid"
     ng-mouseleave="grid.appScope.hoverRow = undefined">

To cover the left part, I changed the expandableRowHeader template (in the template cache, since it is not exposed externally):

<div class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell">
    <div class="ui-grid-cell-contents"
         ng-class="{'ui-grid-cell-hover': (grid.appScope.hoverRow == row.uid)}"
         ng-mouseenter="grid.appScope.hoverRow = row.uid"
         ng-mouseleave="grid.appScope.hoverRow = undefined">
         ...
    </div>
</div>

I do not like this solution. Firstly, I do not like patching a third party component. Secondly, the hover reacts slow: it takes half a second until between hover and color change.

So in case someone has a better solution, please post it here.