Stacked row background color

[Michael Lambert]

All I need to do is change the background color to say red.  Do I need to create a custom CSS for this or is there some way to assigned directly inline with the column definition.

[Mani Sankar Durai]

Hi Michael, 

Thanks for contacting Syncfusion support.  

We have checked the query and to change the background color for stacked header row alone we suggest you to use css-class property of stacked header column in grid. Please refer the code example 

<style> 

  #Grid .header1,#Grid .header2{ 

      background-color:red; 

  } 

</style> 

<ej-grid id="Grid" allow-paging="true" show-stacked-header="true" datasource="ViewBag.datasource"> 

    <e-stacked-header-rows> 

        <e-stacked-header-row> 

            <e-stacked-header-columns> 

                <e-stacked-header-column css-class="header1" header-text="Order Details" column='@new List<string> {"OrderID"}'> 

                </e-stacked-header-column> 

                <e-stacked-header-column css-class="header2" header-text="Ship Details" column='@new List<string> {"EmployeeID","ShipCity"}'></e-stacked-header-column> 

            </e-stacked-header-columns> 

        </e-stacked-header-row> 

    </e-stacked-header-rows> 

    <e-columns> 

... 

    </e-columns> 

</ej-grid> 

Please refer the documentation link 

Link: https://help.syncfusion.com/api/js/ejgrid#members:stackedheaderrows-stackedheadercolumns-cssclass 

Please let us know if you need further assistance.  

Regards, 

Manisankar Durai. 

[Michael Lambert]

Worked Thanks!

[Mani Sankar Durai]

Hi Michael, 

We are happy to hear that your problem has been solved.  

Please let us know if you need further assistance.  

Regards, 

Manisankar Durai. 

[Michael Lambert]

Though I noticed if a apply a Theme at the top,
<link rel='nofollow' href="~/lib/syncfusion-javascript/Content/ej/web/gradient-azure/ej.web.all.min.css" rel="stylesheet" />

the background color reverts to the theme color and not the css that is inline.  How do I make individual custom changes the background color?

Mike

[Farveen Sulthana Thameeztheen Basha]

Hi Michael, 

We can reproduce your reported problem at our end. The reported problem occurs because the gradient-azure theme override the CSS property. So we suggested you to apply the below workaround to get rid of the problem. 

Please refer to the code example:- 

<style> 

    #Grid .header1, #Grid .header2 { 

            background-color: red; 

        } 

 

    .e-grid .e-headercell, .e-grid .e-grouptopleftcell { 

        background: #f9f9f9; 

    } 

    </style> 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

[Michael Lambert]

Worked, Thanks!

[Farveen Sulthana Thameeztheen Basha]

Hi Michael, 

  

Thanks for your reply. We are glad to know that your reported problem has been resolved. Please get back to us if you need any further assistance. 

  

Regards, 

Farveen sulthana T