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
– SaiGiridhar, Commented Apr 5, 2016 at 6:39
I have tried to rephrase and added screen shots. Please have another look! — Tobias
– Tobias, Commented Apr 5, 2016 at 11:49
Did you tried to add <... ng-mouseover="rowStyle={\'background-color\': \'red\'};" ng-mouseleave="rowStyle={}" ...> to your row and expanded row template? — Marek Ka.
– Marek Ka., Commented Apr 5, 2016 at 12:03
How can I add this to the row header? I think I cannot change the HTML, unfortunately. — Tobias
– Tobias, Commented Apr 5, 2016 at 12:10

Tobias · Accepted Answer · 2016-04-11 12:49:16Z

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.

Collectives™ on Stack Overflow

Angular UI-Grid: Hover on expandable row

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related