Grid Header Background Color

[Mustafa Kuyucu]

Hi,

 I have two grid one inside another (one is detail grid). I want to customize headers, specifically header background color.

I tried this and it changes all colors: https://www.syncfusion.com/forums/157740/unable-to-customise-a-dark-grid-header-background

Can you provide me for working example about that? Thanks in advance.

[Prathap Senthil]

Hi Mustafa,

Based on your requirement, we have created a simple sample for you. Please refer the attached code snippet and screenshot for your reference, Kindly let us know if it meets your expectations. If you need further customization for the header of either the Grid or the detail grid, please provide us with more details so that we can proceed accordingly.

<style>

    .e-grid .e-headercell {

        background-color: aqua;

    }

</style>

Regards,
Prathap S

Attachment: DataGridWithDetailTemplate_8ef00bb5.zip

[Mustafa Kuyucu]

Hi Prathap Senthil,

This is not what I want. In this example, the color of the sub-grid is also aqua. What I want is to make the headers of the grids different colors. So for example I want to make one Blue and the other red.

Thanks in advance.

[Balamurugan Lakshmanan]

Hi Mustafa,

From your query, We understood that you need to make the headers of the grids different colors. We modify the sample as per your requirement. Kindly refer the below code snippet , Screenshot and attached sample file for your reference.

<style>

    #Grid1  .e-headercell {

        background-color: aqua;

    }

 

    #Grid2  .e-headercell {

        background-color:yellow;

    }

 

</style>

Please get back to us if you have further queries.

Regards,

Bala.

Attachment: BlazorApp1_6255e692.zip

[Mustafa Kuyucu]

  Thanks, everything is okay

[Balamurugan Lakshmanan]

Hi Mustafa,

Thanks for your update.

We are glad to hear that you have resolved your query using our solution. Please get back to us if you have further queries.

Regards,

Bala.