CSS for Grid Selection and Highlighting

Radzen.Blazor Components
1

Hi, can someone tell me what are the CSS sections in standard.css that set the grid highlighting and selection colors?

Thanks!

2

Hi @CGrantAnderson,

You can use your browser's developer tools to discover that easily. Here is how.

  1. Right click the element of interest (the selected data grid row) and select "Inspect element" or "Inspect" (the message depends on the browser). You should see something like this:
    image
    image1920×1048 113 KB
  2. The second CSS rule in the right-hand pane shows where the selected text color comes from:
    .rz-selectable .rz-datatable-even.rz-state-highlight .rz-cell-data, 
.rz-selectable .rz-datatable-odd.rz-state-highlight .rz-cell-data {
    color: #1151F3;
}
    It does not however specify the background color. To find what does that we select a parent element of the currently selected one (<span class="rz-cell-data">). This is the <td> element.
    image
    image1920×1026 107 KB
  3. The second rule in the right-hand pane is what we need:
    .rz-selectable .rz-datatable-even.rz-state-highlight > td, 
.rz-selectable .rz-datatable-odd.rz-state-highlight > td {
    background-color: rgba(114, 152, 248, 0.16);
}
    We can verify that by unchecking the background-color setting in the developer tools - this will remove the selected background of the row thus confirming this is indeed the CSS rule of our interest.
    css-inspect

Now that we have found the two rules that define the default selection appearance we can override them by adding the same CSS selectors with different values. We must add them after including the CSS of the Radzen.Blazor theme otherwise the overriding will not work (or require the !important setting).

     .rz-selectable .rz-datatable-even.rz-state-highlight .rz-cell-data, 
     .rz-selectable .rz-datatable-odd.rz-state-highlight .rz-cell-data {
         color: red; /* the text color */
    }

    .rz-selectable .rz-datatable-even.rz-state-highlight > td, 
    .rz-selectable .rz-datatable-odd.rz-state-highlight > td {
         background-color: green; /* the background color */
    }
3

Thank you so much for your very detailed and useful reply! The "even" and "odd" threw me...I was looking for a row highlight or something.

This works! I very much appreciate your help! Thanks again!

4

Sorry for the beginner question but where can I find the including statement for the Radzen.Blazor theme?

And am I creating a new ccs file add my overrides?

Any help appreciated.