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