Row Hover & Cell Focus

Questions
1

From the ag-grid wiki, I notice a behavior going on with their grid.

[attachment=0]selection_row.png[/attachment]

So when a row is selected, that gets highlighted. Which is how it works in NG grid.

However, they also have;

  • CSS Hover state for when you move your cursor across rows
  • CSS Focus state on a single cell of the grid you clicked on

Is there any way of implementing this into the NG Grid? Do I have to modify the grid’s theme to do so?

https://www.ag-grid.com/javascript-data … t-filtered

selection_row.png
selection_row.png1067×683 27.7 KB

2

Hi John,

I believe the default NG Grid will show a hover color.
However, the servoy Theme Roller might be suppressing that. So if you use:

@import 'custom_servoy_theme_properties.less';

Then you should perhaps add this:

.ag-row:hover
{
	background-color: lighten(@main-color-light, 40%); // custom row bg
	color: @secondary-color-dark; // custom row text color
}
3

sean:
Hi John,

I believe the default NG Grid will show a hover color.
However, the servoy Theme Roller might be suppressing that. So if you use:

@import 'custom_servoy_theme_properties.less';

Then you should perhaps add this:

.ag-row:hover

{
background-color: lighten(@main-color-light, 40%); // custom row bg
color: @secondary-color-dark; // custom row text color
}

Ahh! I see! I setup the row hover and cell focus with this then. Thank you!

.ag-row:hover
{
   background-color: @primary-color-light;
}


.ag-cell:focus{
	
	border-style: solid;
	border-width: 2px;
	border-color: lighten(@primary-color, 20%);
	
}