How to set background color of Header?

Richard asked on Mar 3, 2011 8:39 PM

I have a webdatagrid. In the css stylesheet that is automatically created for it (style.css), I have added the following class:

.DirectoryGridHeader

{ background-color: #666666; background-image: none

}

In the grid’s property settings, I have set the HeaderCaptionCSSClass to DirectoryGridHeader.

But when I run the application, the headers all hahve the same default blue background in the header. What am I doing wrong?

Replies

0

Edward answered on Mar 3, 2011 2:34 PM

Hi,

I just gave it a shot iwth the following markup and it worked fine:

<head runat="server">
    <title></title>

<style type="text/css">

.DirectoryGridHeader

{
background-color: #666666 !important; background-image: none !important;
}

</style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="400px"
            HeaderCaptionCssClass="DirectoryGridHeader" AutoGenerateColumns="False"
            DataSourceID="SqlDataSource1">
            <Columns>
                <ig:BoundDataField DataFieldName="ProductID" Key="ProductID">
                    <Header Text="ProductID" />
                </ig:BoundDataField>
                <ig:BoundDataField DataFieldName="ProductName" Key="ProductName">
                    <Header Text="ProductName" />
                </ig:BoundDataField>
            </Columns>

        </ig:WebDataGrid>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="<%$ ConnectionStrings:NorthwindConnectionString.ProviderName %>"
            SelectCommand="SELECT [ProductID], [ProductName] FROM [Alphabetical List of Products]">
        </asp:SqlDataSource>

    </div>
    </form>
</body>
</html>

Ed
- 0
  
  Richard answered on Mar 3, 2011 6:28 PM
  
  Ok so here is what I have so far . . .
  
  If I set the HeaderCaptionCSSClass setting on the grid, it doesn't change the background color of the header. I also see that in the HTML that is rendered, the headers are all using IG default CSS class "igg_HeaderCaption".
  
  But, if I set the Header CSS class directly on a column, that column will display the header background color the way I want (using my CSS class DirectoryGridHeader). As well I see that the HTML that is rendered shows the use of my class for that column.
  
  Why is the HeaderCaptionCSSClass setting not working?
  - 0
    
    Edward answered on Mar 3, 2011 7:15 PM
    
    Hi,
    
    I just tried your code and it's still working. Can you put in a plain WDG bound to northwind and try that? Something's weird here.
    
    Ed
  - 0
    
    Richard answered on Mar 3, 2011 7:50 PM
    
    Im using adventureworks.
    
    Here's the plan wdg on a brand new form. Here is all my code:
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
    
    <style type="text/css">
    .DirectoryGridHeader
    {
    background-color: #666666 !important; background-image: none !important;
    }
    </style>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
             <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="702px" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" HeaderCaptionCssClass="DirectoryGridHeader">
                <Columns>
                    <ig:BoundDataField DataFieldName="EmployeeID" Key="EmployeeID">
                        <Header Text="EmployeeID" />
                    </ig:BoundDataField>
                    <ig:BoundDataField DataFieldName="NationalIDNumber" Key="NationalIDNumber">
                        <Header Text="NationalIDNumber" />
                    </ig:BoundDataField>
                    <ig:BoundDataField DataFieldName="ContactID" Key="ContactID">
                        <Header Text="ContactID" />
                    </ig:BoundDataField>
                    <ig:BoundDataField DataFieldName="LoginID" Key="LoginID">
                        <Header Text="LoginID" />
                    </ig:BoundDataField>
                    <ig:BoundDataField DataFieldName="ManagerID" Key="ManagerID">
                        <Header Text="ManagerID" />
                    </ig:BoundDataField>
                    <ig:BoundDataField DataFieldName="Title" Key="Title">
                        <Header Text="Title" />
                    </ig:BoundDataField>
                    <ig:BoundDataField DataFieldName="Birthdate" Key="Birthdate">
                        <Header Text="Birthdate" />
                    </ig:BoundDataField>
                </Columns>
            </ig:WebDataGrid>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                SelectCommand="SELECT
    	EmployeeID,
    	NationalIDNumber,
    	ContactID,
    	LoginID,
    	ManagerID,
    	Title,
    	Birthdate
    FROM HumanResources.Employee">
            </asp:SqlDataSource>
    
        </div>
        </form>
    </body>
    </html>
  - 0
    
    Edward answered on Mar 3, 2011 7:56 PM
    
    Hi,
    
    I assume it's still not working. What version of WDG are you using. I'm in 10.2.
    
    Ed
  - 0
    
    Richard answered on Mar 3, 2011 7:59 PM
    
    Correct, still not working. 🙂
    
    I'm in 9.2.
    
    The other thing that is bothering me is that even if I set the header background on head column, and it works, I still have a bit of the IG default background peaking out on the top and bottom. Even your example shows that blue header default at top and bottom. How do we get rid of that as well?
    
    By the way, I really appreciate you helpin me out with this!
  - 0
    
    Richard answered on Mar 3, 2011 8:03 PM
    
    Ok, so I just tried something. I edited the IG CSS directly. I went in and modified the igg_Header CSS and it works. But how do we override that class without directly going in and modying IG's classes?
  - 0
    
    Edward answered on Mar 3, 2011 8:27 PM
    
    That's easy.
    
    Just copy the class to your markup from the css file in your ig_res folder and alter according to your needs.
    
    Ed
  - 0
    
    Richard answered on Mar 3, 2011 8:29 PM
    
    Ok, because then my css class definition will supercede the css definition in ig_res?
0

Richard answered on Mar 3, 2011 8:39 PM

Wow. Ok thanks. I will try to get this figured out then. Also, I took out that !Important directive in your code since I didn't know that it was code, I thought it was a comment! LOL Oops. Ok, thanks so much for your help. I will let you know how it goes.