Setting TWebDBGrid selected row color

WEB TMS WEB Core
1

Can you tell me please if there is a way to set the color of the selected ( highlighted ) row in twebdbgrid using CSS ( i am using 1.7.1).

2

Set the properties of the CSS class
table#GridID td.selected
table#GridID tr.selected

3

Thank you but I am cannot make it applied. What am i missing:

table#Schedule_Grid td.selected { background-color: 5B1F1F; color: #FFFFFF; } table#Schedule_Grid tr.selected { background-color: red; color: #FFFFFF; }

Schedule_Grid is the ID which i assign to the ElementID property of the grid.

However the styles i use to round the webpanel corners work fine:

#rcorners1 { border-radius: 10px; }
#rcorners2 { border-radius: 20px; }

4

Try to add in code:
form.AddCSS('mytable','td.selected { background-color: red; color:white}');
This works fine here.

5

when I do this during runtime ( replacing 'mytable' with my webdbgrid ID ) the webdbgrid goes away and i just see the line

td.selected { background-color: red; color:white}

image

6

I cannot reproduce this with a default grid on the form.

8

This is how I could make it work:

#MYGRID_ID tr.selected td { background-color: red; color: white; }

Now when i assign the ID to my WebDBGrid ( to link it to CSS ) my font size setting goes away. I am trying to set it in CSS but no luck.
In the grid i have : ElementFont = efProperty. The font color comes fine but the size goes back to the small one ( probably the default one ).
Can you advise please.

9

Override the font size also via css class like:
#MYGRID_ID tr td { font-size: 12pt; }

10

That was what i did first. It doesn't help.

     #MYGRID tr.selected td { background-color: red;   color: white; font-size:16pt;}
     #MYGRID tr td { font-size:16pt; }

First line changes colors and font size for selected row but the second doesn't work.
When I try

#MYGRID tr td { background-color: yellow; font-size:16pt;}

it changes the background color but not the font size.

11

Did you set grid.ElementFont = efCSS?

12

I did. I tried both.
I even tried to put the grid on the form directly. Right now it is in the pagecontrol tab. Doesn't help.
The question is why does it change the font right after i assign the ID to the grid ( ElementID property)? Before I even add any styling. No matter what is in the ElementFont property( efProperty or efCSS).
And that font stays ( not the one from the propery) and cannot be overwritten from styling.

14

In v1.8, there are now properties exposed for this that should make this easier from the perspective of an Object Pascal programmer.

15

Thank you. That is very good but still i would prefer to use styling for this kind of settings rather than recompile the project.

16

If you prefer CSS, then please use CSS

17

I am trying. Some things are working now as i mentioned but still number of very simple things are not. I am trying to use the CSS leaner's sites like w3schools.com by making it working there and then move to my project. For example on this page
Tryit Editor v3.6 when i add a line
#customers th {background-color: red} it changes the color of the table headers but it doesn't happen in my project. I understand that i am missing something but cannot figure it out.
As I understand there is one set of rules for CSS.