Unable to customise a dark grid header background

[Joel Lee]

Hi,

I am trying to customise Header background / text in the grid.

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

I am trying to set a dark background with a white Bold text in the grid header.

I can set the text details in .e-headercell, but to set the background-color, i can only set it in .e-headercelldiv

However, the set background colour does not fill the whole header as expected, leaving sections of 'white around it'. I have attached a screenshot of what it looks like. I am trying to set the background color to fully fill the header row.

Here is the css:

.e-headercelldiv {

        background-color: gray;

    }

    .e-headercell {

        color: white;

        font-size: 1.5rem;

        font-weight: bold;

    }

Thank you.

Joel

[Vignesh Natarajan]

Hi Joel,  

 

Greetings from Syncfusion support.  

 

Query: “the set background colour does not fill the whole header as expected, leaving sections of 'white around it'.” 

 

We are able to reproduce the reported behavior at our end while preparing a sample using your codes. We suggest you to achieve your requirement by using the below style to grid headercell class instead of headercelldiv.  

 

Refer the below code example.  

 

<SfGrid @ref="DefaultGrid" DataSource="@Orders" AllowPaging="true">    

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Visible="false" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

</SfGrid> 

<style> 

    .e-grid .e-headercell { 

        background-color: gray; 

    } 

  

    .e-headercell {         

        color: white; 

        font-size: 1.5rem; 

        font-weight: bold; 

    } 

</style> 

 

  

Refer the below screenshot for the output 

 

 

 

For your convenience we have prepared a sample which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/157740/ze/DataGrid1953938109  

 

Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan 

[Luis Roberto]

Hi, It is posible to add the style on a .css file instead of the component?

I tried on the app.css file but it doesn't work.

Thanks

[Luis Roberto]

Hi, It is posible to add the style on a .css file instead of the component?

I tried on the app.css file but it doesn't work.

Thanks

I figured out how to do this.

I put the style on a separate css file and put it under the synfusion css file and it worked.

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

<link rel='nofollow' href="css/personalized-grid.css" rel="stylesheet" />

Thank you

[Vignesh Natarajan]

Hi Luis,  

Thanks for contacting Syncfusion support.  

We are glad to hear that you have resolved your query on your own. 

Please get back to us if you have further queries. 

Regards, 

Vignesh Natarajan