Styling an individual grid

Questions
1

Is there a way to style an individual, named grid, by CSS? I have a named grid which I have set to readOnly = true and would like it to show all rows with NO selection or hover color, but could not find a solution yet.

Any hints are welcome.

Regards,

2

I think this is the pointer you’re looking for:

1 Like
3

Hi Marc
Hi Seain

Thanks for the hint, I overlooked it, didn’t realise that’s my searched solution.
The selector

.ag-table.custom-class-name .ag-row-selected {
	background-color: transparent;
}

works fine.

As we have a hover style as well, it was logical for me to use

.ag-table.custom-class-name .ag-row:hover {
	background-color: transparent;
}

which does to my surprise Dows not suppress the hovering color. Strange thing is, if I set within this selector a color darker then the defined hovered color, the hover color is shown. If it’s lighter, the color defined in the selector

.ag-table .ag-row:hover {
	color: <hover-color>;
}

is shown.

It looks like a bug, but it’s still strange.

Regards,

4

AGGrid theming heavily relies on CSS variables which makes it very easy to customise. See AGGrid doc: Legacy Themes: CSS Variable Reference. Not all rules are used, so some investigation is needed to know which ones are relevant to Servoy’s implementation.

For your specific case the following should work:

.ag-table.custom-class-name {
    --ag-row-hover-color: transparent;
}

Be aware that if you use the default Servoy theme, in some cases Servoy overrides the use of CSS variables with hard coded values. So some CSS variables may have no effect unless you reverse the Servoy CSS rules.

For example, Servoy overrides the selected row styling with static values:

.ag-table .ag-row-selected {
    background-color: #E9720B;
    color: #FFF;
}

I override this with the following:

.ag-table .ag-row {
    background-color: var(--ag-background-color);
    color: var(--ag-data-color);
}
.ag-table .ag-row.ag-row-selected {
    --ag-background-color: hotpink;
}
5

Thanks a lot, Seain, --ag-row-hover-color solved my problem to suppress the hover color for readonly grids