How to change the font-weight for all column headers in the grid ?

[Ben Junior]

All the columns in the grid display the HeaderText in bold. Using the Tools in the browser, I tried to change it to normal by adding the "font-weight: normal" in the style but it didn't work.

.e-grid .e-gridheader {

1. background-color: #fff;
2. border-bottom-color: #dee2e6;
3. border-top-color: #dee2e6;
4. color: blue;
5. font-weight: normal;

}

[Jeevakanth Palaniappan]

Hi Ben, 

Greetings from Syncfusion support. 

We have validated your query but the grid headers are not in bold. We have attached the screenshot and the validated sample for your reference. 

 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/LatestVersion-1998044602  

Please find the below documentation to customize the grid by overriding the corresponding grid class. Also check your styles by adding !important property to override the css. 

https://blazor.syncfusion.com/documentation/datagrid/how-to/grid-styling/  

https://blazor.syncfusion.com/documentation/datagrid/how-to/customize-column-styles/  

General link - https://www.geeksforgeeks.org/how-to-apply-important-in-css/  

If you are still facing issue then kindly share us the issue reproducing sample or reproduce the issue in the provided sample which will be helpful for us to validate the issue and provide you with a better solution as early as possible. 

Regards, 

Jeevakanth SP. 

[Ben Junior]

Hi Jeevakanth,

I've been working on this issue for awhile trying to figure out what was wrong with my code. Thanks to your answer and the links I was able to finally narrow it down to the root of the problem:

Using the same  sample link included on your answer, all it takes to display all the grid columns header in bold is to replace the following line in the _Host.cshtml page and it will not be possible to set the headers to normal (using the .e-grid .e-headercell,  .e-grid .e-columnheader, etc...)

NORMAL

  <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/fabrics.css" rel="stylesheet" />

BOLD

  <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />

I don't know if this behavior is by design or can be fixed

[Jeevakanth Palaniappan]

Hi Ben, 

For bootstrap4 theme, header text will be in bold. This is the default behavior. So we suggest you to use the below style to resolve your issue. 

<style> 

    .e-grid .e-headercelldiv { 

    font-weight: normal !important; 

    } 

</style> 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/LatestVersion2047492583  

Please get back to us if you need further assistance. 

Regards, 

Jeevakanth SP.