Row Hover & Cell Focus

Forum to discuss the new web client version of Servoy.

Row Hover & Cell Focus

Postby john1598360627 » Fri Apr 22, 2022 2:15 am

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


selection_row.png


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
You do not have the required permissions to view the files attached to this post.
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm

Re: Row Hover & Cell Focus

Postby sean » Mon Apr 25, 2022 10:08 pm

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:

Code: Select all
@import 'custom_servoy_theme_properties.less';


Then you should perhaps add this:

Code: Select all
.ag-row:hover
{
   background-color: lighten(@main-color-light, 40%); // custom row bg
   color: @secondary-color-dark; // custom row text color
}
Software Engineer
Servoy USA
sean
 
Posts: 370
Joined: Mon May 21, 2007 6:26 pm
Location: USA

Re: Row Hover & Cell Focus

Postby john1598360627 » Wed Apr 27, 2022 11:02 pm

sean wrote: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:

Code: Select all
@import 'custom_servoy_theme_properties.less';


Then you should perhaps add this:

Code: Select all
.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!


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


.ag-cell:focus{
   
   border-style: solid;
   border-width: 2px;
   border-color: lighten(@primary-color, 20%);
   
}
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 7 guests

cron