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

arvindram11 · August 26, 2020, 12:52am

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>

enchev · August 26, 2020, 6:05am

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.

arvindram11 · August 26, 2020, 2:26pm

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.

enchev · August 26, 2020, 2:32pm

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

Mounika_Reddy · July 5, 2022, 12:41pm

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

Stephan_Mayer · November 24, 2022, 8:49am

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

enchev · November 24, 2022, 8:59am

Hey @Stephan_Mayer,

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

github.com

radzenhq/radzen-blazor/blob/4.3.6/Radzen.Blazor/RadzenDataGridColumn.cs#L285


      
          /// </summary>
          /// <value>The CSS class applied to data cells.</value>
          [Parameter]
          public string CssClass { get; set; }
          
          
/// <summary>
          /// Gets or sets the header CSS class applied to header cell.
          /// </summary>
          /// <value>The header CSS class applied to header cell.</value>
          [Parameter]
          public string HeaderCssClass { get; set; }
          
          
/// <summary>
          /// Gets or sets the footer CSS class applied to footer cell.
          /// </summary>
          /// <value>The footer CSS class applied to footer cell.</value>
          [Parameter]
          public string FooterCssClass { get; set; }
          
          
/// <summary>
          /// Gets or sets the group footer CSS class applied to group footer cell.

korchev · November 24, 2022, 9:11am

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;
}

Stephan_Mayer · November 24, 2022, 11:41am

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

github.com

radzenhq/radzen-blazor/blob/master/Radzen.Blazor/themes/components/blazor/_grid.scss

$grid-data-border-shadow: none !default;

$grid-cell-border: var(--rz-border-normal) !default;
$grid-right-cell-border: $grid-cell-border !default;
$grid-bottom-cell-border: $grid-cell-border !default;
$grid-cell-padding: 0.5rem !default;
$grid-cell-color: var(--rz-text-color) !default;
$grid-cell-font-size: var(--rz-body-font-size) !default;
$grid-cell-line-height: var(--rz-body-line-height) !default;

$grid-hover-background-color: var(--rz-secondary-lighter) !default;
$grid-hover-color: var(--rz-secondary-dark) !default;

$grid-selected-background-color: var(--rz-secondary-dark) !default;
$grid-selected-color: var(--rz-text-contrast-color) !default;

$grid-stripe-background-color: var(--rz-base-100) !default;

$grid-toolbar-background-color: var(--rz-base-background-color) !default;
$grid-header-cell-border: $grid-cell-border !default;

This file has been truncated. show original

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.

korchev · November 24, 2022, 11:56am

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"...>

Gerry_An · March 21, 2024, 3:31am

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

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

devshine1973 · December 19, 2024, 2:06am

I try to use HeaderCssClass, but it doesn't work.

<RadzenDataGridColumn TItem="LeadtimeOrder" Title="@caption.ToString("dd-MMM")" Sortable="false" Filterable="false" Pickable="false"
                      Property="DATECOLUMN" HeaderCssClass="holiday_header_column "
                      OrderIndex="@orderIndex">

Here is HTML output when inspect in the web browser

<th rowspan="1" colspan="1" class="rz-unselectable-text  holiday_header_column    rz-text-align-left" scope="col" style="width:70px;z-index:1">
	<div>
		<span class="rz-column-title" title="30-Nov">
			<span class="rz-column-title-content">30-Nov</span>
		</span>
		<div id="i-2N6EOEXE24-resizer" style="cursor:col-resize;float:right;" class="rz-column-resizer">&nbsp;</div>
	</div>
</th>

I put my this holiday_header_column CSS class in this app.css.

When I use the developer tool to inspect element in the datagrid whose Header CSS Class has "holiday_header_column". I found this background-color: #a9cce3 has been strunk out.

.holiday_header_column {
    background-color: #a9cce3;
}

Did I do something incorrectly?