Reputation: 173
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.
Upvotes: 11
Views: 19977
Reputation: 2993
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;
}
}
}
Upvotes: 0
Reputation: 351
(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}
Upvotes: 35
Reputation: 986
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.
Upvotes: 1
Reputation: 886
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>
Upvotes: 11