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?

I didn't get your problem completely. Can you please rephrase the last line? Basically, I am not getting the desired behavior that you expect for the expanded grid. — SaiGiridhar
I have tried to rephrase and added screen shots. Please have another look! — Tobias
Did you tried to add <... ng-mouseover="rowStyle={\'background-color\': \'red\'};" ng-mouseleave="rowStyle={}" ...> to your row and expanded row template? — Marek Ka.
How can I add this to the row header? I think I cannot change the HTML, unfortunately. — Tobias

Tobias Tobias · Accepted Answer · 2016-04-11T12:49:16

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.

Angular UI-Grid: Hover on expandable row

1 Answers