How to Set the background color of all columns for a grid

Fairly new to Blazor and even newer to the Radzen components, so apologize if this is something easy that I missed. I am trying to set the background color for all column headers to a different color (to match with our existing page colors). I have tried setting this (see below code snippet) but it does not appear to work. I have also tried to set it based on a HeaderTemplate (for each individual columns) but that does not seem to work either. Is this possible?

Tried these options:
<RadzenGrid @ref="myGrid" .... Style="background-color:aqua"> --> Was not sure what this was supposed to set the background color of, but it did not work anyway.

RadzenGridColumn TItem="TestObject" Title="Test" Width="400px">
HeaderTemplate>
div style="background-color: aqua">
/div>
HeaderTemplate>
RadzenGridColumn>

You can use the approach from this demo:
https://blazor.radzen.com/datagrid-conditional-template

or directly CSS for grid cells. Check applied CSS classes with your browser devtools.

Isn't this to set the Cell background? I am interested in setting the table column header background. Using the dev-tools in Chrome and Firefox, it only works when I set the style for the div around the cell header. I does not appear to have a class name associated. Setting at the parent level doesn't seem to make any difference.

In the screenshot attached ID and DESCRIPTION are the column headers for the table. I am trying to set the background for these column headers. When I manually (in the elements tab in Chrome) set the div that contains the cell, then it works. But I don't know how to set this in Blazor code.

image

In the next update there will be special property for header CSS class:

1 Like

Hi, Is there a CSSClass for grid header to change color ?

When will the next update release? There is still no option to change the header or th background

Hey @Stephan_Mayer,

This was released 2.5 years ago shortly after my post here:

1 Like

If you want to change the background color of a particular DataGrid you can do this

<RadzenDataGrid style="--rz-grid-header-background-color: red;" ...>

Also if you want to change the frozen column background as well:

<RadzenDataGrid style="--rz-grid-header-background-color: red;--rz-grid-frozen-cell-background-color: red;" ...>

And to change the header backround color of all DataGrid components:

body {
--rz-grid-header-background-color: red;
--rz-grid-frozen-cell-background-color: red;
}
2 Likes

that works great. but for normal cells it didn't work. i tried a few options from here

but nothing works, except header.
i search for normal cells, and maybe mouse over, like hover, but the options didn't work.

 style="--rz-grid-header-background-color: #F0F0F0;
                --rz-grid-hover-background-color: blue;
  --rz-grid-hover-color: red;
--rz-grid-cell-color: grey;

thats a few options, i tried.

It depends on the theme you use. In some themes just using background-color is enough.

<RadzenDataGrid style="background-color: green"...>

And to set the alternating color

<RadzenDataGrid style="--rz-grid-stripe-background-color: red"...>
1 Like

You can use this approach to apply to all data grids.

.rz-data-grid-data .rz-grid-table thead tr th {
background-color: green;
}

1 Like