We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Styling Master Detail Grid

I have a master grid and detail grids which are shown below the selected line of the master grid.

I want ot style the grid header of the master grid.

<style>

    .e-grid .e-headercell{

        background: grey

    }

    .e-headercell {

        color: white;

        font-size: 1.5rem;

        font-weight: bold;

    }

</style>

works for most of the header, but the leftmost column, which shows the ">" icon in the grid rows, is left blank in the header. How can I style this cell.

Thanks

Hartmu


3 Replies 1 reply marked as answer

MS Monisha Saravanan Syncfusion Team January 17, 2023 01:27 PM UTC

Hi Hartmut,


Greetings from Syncfusion.


Query: “works for most of the header, but the leftmost column, which shows the ">" icon in the grid rows, is left blank in the header. How can I style this cell.”


We suggest you to use the (.e-detailheadercell) class to style the detail header cell. Kindly check the below code snippet for your reference.


<style>

 

    .e-grid .e-headercell, .e-grid .e-detailheadercell {

        background-color: grey;

 

    }

    .e-headercell {

        color: white;

        font-size: 1.5rem;

        font-weight: bold;

    }

 

</style>


Please let us know if you have any concerns.


Regards,

Monisha


Marked as answer

HA Hartmut January 17, 2023 03:27 PM UTC

Hallo Monisha,

that is exactly what I was looking for, many thanks.


Hartmut



MS Monisha Saravanan Syncfusion Team January 18, 2023 04:06 AM UTC

Hi Hartmut,


Welcome. We are glad to hear that the reported issue has been resolved. Kindly get back to us if you need further assistance. As always we will be happy to help you.


Loader.
Up arrow icon