Change color of StackedHeaderColumn

[Manolo]

Hi,

I want to change the StackedHeaderColumn background color. I set this config for test:

<ej:StackedHeaderColumn Column="Fecha,Descripcion" HeaderText="Eventos" TextAlign="Center"  CssClass="temp"   />

.temp{
    color: red;
    background-color: blueviolet;
}

The text color is changed, but the background color no.

Thanks

[Manolo]

Ups, I've forgotten this.

I want the header background color similar at accordion color. And also, I want set a backgound color in accordion's content, but I can't eliminate margins

[Isuriya Rajan]

Hi Manolo,

Query1: I want the header background color similar at accordion color.

We have used below style to display the header color of accordion. So you can set the below style to the header class of desired div element which is used in your application.

<style>

.class

{

background: #179bd7;

}

style>

Query 2: I want set a background color in accordion's content, but I can't eliminate margins

You can change the background color of the accordion’s content by using the below style.Please find the code for same:

<style>

.e-acrdn > .e-content {

background-color:#c43d3d;

}

style>

Also, we have implemented the Theme studio for our controls which will allow us to customize the UI theme to generate customized CSS files for our controls and it has been released in Volume 3, 2015. Please use the below link to customize the UI theme to generate customized CSS files for our controls.

http://js.syncfusion.com/themestudio/

So that in order to customize the css you can make use of Theme Studio for our controls. Please let us know if you have any further query.

Query 3: change the StackedHeaderColumn background color:

You can change the background color of the Grid stackedHeaderColumn using background css style property.

.custom{

            color : red;

        background:#179bd7 !important;
        }

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" ShowStackedHeader="true" >

                     <Columns>

                ..

                ..

                ..

                   <StackedHeaderColumns>

                        <ej:StackedHeaderColumn Column="OrderID,CustomerID"  HeaderText="Order Details" CssClass ="custom" />

                        <ej:StackedHeaderColumn Column="ShipCity,EmployeeID,OrderDate,Freight" HeaderText="Ship Details" CssClass="custom" />

                    </StackedHeaderColumns>

                </ej:StackedHeaderRow>

            </StackedHeaderRows>
        </ej:Grid>

For your reference, we attached a sample in the following link

Sample Link: http://www.syncfusion.com/downloads/support/forum/120827/stackedHeader-1004419806.zip
Regards,
Jayaprakash k

[Manolo]

Thanks!

[Isuriya Rajan]

Hi Manolo,

Thanks for the update. We are happy to assist you.

Regards,
Isuriya R.