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.

score 35 · Answer 1 · edited Apr 08 '16 at 12:31

35

(angular-ui-grid#3.0.7) Easiest way is to use CSS hover styles, just add the following to your CSS styles for the page and you are all set:

.ui-grid-row:hover .ui-grid-cell {
  background-color: beige;
}

With ui-grid 3.1.1 the above styles didn't work. I had to do this:

.ui-grid-row:nth-child(odd):hover .ui-grid-cell{background:red}
.ui-grid-row:nth-child(even):hover .ui-grid-cell{background:red}

Solution borrowed from here

edited Apr 08 '16 at 12:31

JeffryHouser

39,401
4
38
59

answered Dec 13 '15 at 01:52

Sadjad Abdoli

351
1
2
2

The solutions offered by the other answers were buggy, but this one was simple and worked perfectly. So easy. Thanks – Kabb5 Mar 09 '16 at 14:58
1

Simplifying things even further, if you don't need the highlight to change because the row is even or odd, then you can just do this `.ui-grid-row:hover .ui-grid-cell{background:red}`. It works all the same – Jon May 12 '16 at 20:01
For working with ngGrid, you can use .ngRow:nth-child(odd):hover .ngCell{background: red} .ngRow:nth-child(even):hover .ngCell{background: red} – Akash KC Dec 28 '16 at 20:08
1

works great. anyone find a solution that works with pinned columns though? – ss ulrey Feb 16 '17 at 23:33

score 11 · Accepted Answer · answered Nov 27 '15 at 06:20

11

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>

answered Nov 27 '15 at 06:20

SaiGiridhar

886
1
13
28

I'd have used `ng-class` instead of `ng-style`, but the logic would be the same. – imbalind Nov 27 '15 at 08:44
1

Thank you! My understanding is that the outer div encompasses the whole row while the inner div gets expanded to each cell in the row. Is that correct? – ethan Nov 27 '15 at 18:09

score 1 · Answer 3 · answered Feb 08 '16 at 12:06

There is a small problem with the solution of SaiGiridhar: the selection highlighting stops working since another wrapper is added on top of the ng-repeat div.

A small fix for it would be:

<div ng-mouseover="rowStyle={'background-color': (rowRenderIndex%2 == 1) ? '#76BED6' : '#BFDAE3'};" ng-mouseleave="rowStyle={}" ng-style="selectedStyle={'background-color': (row.isSelected) ? '#379DBF' : ''}">
    <div ng-style="(!row.isSelected) ? rowStyle : selectedStyle" 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>

I've just copy-pasted my code. It adds alternate row styling for highlighted rows and also fixes the selected row highlighting.

Hope it helps someone.

score 0 · Answer 4 · answered Apr 25 '18 at 18:02

This is harder if you have selection enabled. Use this.

//js

   $templateCache.put('ui-grid/ui-grid-row',
            `
            <div 
            ng-mouseenter="row.isHov = true" 
            ng-mouseleave="row.isHov = false" 
            ng-init="row.isHov = false"
            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="{ 'on': row.isHov, 'ui-grid-row-header-cell': col.isRowHeader }"
            role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}"
            ui-grid-cell>
          </div>
            `
        );

//scss

.ui-grid-cell {


&.on {
    .ui-grid-cell-contents {
        background: red;
    }
}

}

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

4 Answers4