Grid header different styles

[Luis Roberto]

Hi guys, It is possible to have different header styles from two different grids on the same page?

I would like to show one grid with a header on gray and the other one with the header on blue.

[Rahul Narayanasamy]

Hi Luis, 

Greetings from Syncfusion. 

Query: It is possible to have different header styles from two different grids on the same page? I would like to show one grid with a header on gray and the other one with the header on blue. 

You want to set different header color for the Grids which is present in the same page. You can achieve your requirement by using CSS. Find the below code snippets for your reference. 

 

<SfGrid ID="Grid1" DataSource="@Orders" AllowPaging="true"> 

    <GridPageSettings PageSize="5"></GridPageSettings> 

    <GridColumns> 

        . . . 

    </GridColumns> 

</SfGrid> 

 

<SfGrid ID="Grid2" DataSource="@Orders" AllowPaging="true"> 

    <GridPageSettings PageSize="5"></GridPageSettings> 

    <GridColumns> 

        . . . 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    . . . 

} 

 

<style> 

    #Grid1.e-grid th.e-headercell { 

        background-color: gray; 

    } 

    #Grid2.e-grid th.e-headercell { 

        background-color: blue; 

    } 

</style> 

You can customize the Grid appearance by using below documentation. Find the below link for your reference. 

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

Please let us know if you have any concerns. 

Regards. 

Rahul  

[Luis Roberto]

Thank you very much Rahul, it worked perfectly.

Take care.

[Rahul Narayanasamy]

Hi Luis, 

 

Thanks for the update. 

 

We are happy to hear that the provided solution was helpful to achieve your requirement. Please get back to us if you need further assistance. 

 

Regards, 

Rahul