DataGrid Header Title Style Customization

Radzen.Blazor Components
1

Hi There,
Apologies! I am very new to Radzen and I am doing a product evaluation to see if this fits in our requirement. I created a grid with 1 table only, along with auto generated pages for Add/Edit.
While I see Edit Page is nicely Converted All column names into Uppercase for first letter and Lower for the rest, but the main GridView showing all Columns Header in All Caps and also I am unable to adjust the font size of the Column Header there. I have few questions...

(1) How in Main GridView I can auto convert Column Title into - Upper Case - only for First Letter of the Word.. i.e. if DB column name is : APPLICATION_NAME then I want to see it as "Application Name"
(2) How can I change the font size of Column Names? I tried the following (adding font size), but no effect at all...

.rz-grid-table thead th .rz-column-title-content {
font-size: 10px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }

image
image968×502 29 KB

image
image817×257 13.1 KB

2

If you are using our Default theme this is expected since the DataGrid column titles are uppercase by design:

image
image1920×1080 204 KB

You can customize it like this:

image
image1920×1080 245 KB

Or you can choose different theme like Material:

image
image1920×1080 238 KB

3

Apologies again. I didn't get the answer quite well. By the way I used that: Material Theme only.
What is most surprising to me is that - Edit screen and Add screens are auto generated nicely with column name format as : Upper case first letter. But the main application screen with gridview is showing all CAPs for Column names... and I am also not able to change font size.

4

As shown in @enchev's answer, try adding the following custom CSS to your application:

.rz-data-grid {
    --rz-grid-header-text-transform: none;
    --rz-grid-header-font-size: 20px; /* Set this value to a desired font size */
}

Back to your screenshots - it looks like there are some styles missing. Тhe font is not the one delivered with the Material UI theme, but the screenshots do not provide enough information to understand why this happens.

5

This can also be added inline via the style attribute:

<RadzenDataGrid style="--rz-grid-header-text-transform: none; --rz-grid-header-font-size: 20px;" ...>