I recently applied a javascript code from Mudassar Khan's article "Dynamically freeze ASP.net Gridview header using Javascript" found here, ASP Snippets Article, to my page. The javascript works great, but somehow, it's overriding my CSS code for the headers. When I refresh the page, I can see the headers with my CSS in place for just a fraction of a second before it is replaced with generic styling. I am not a javascript person, so really can't troublshoot the problem. I have a style sheet with the following code.
.dGrid {
width: 983px;
background-color: #ffffff;
font-family: Century Gothic;
font-size: 10pt;
color: #666666;
padding: 5px;
}
.dGrid TD {
padding: 5px;
border-style: solid;
border-color: #e4e4e4;
border-bottom-width: 0px;
border-top-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
}
.dGrid TH {
padding: 4px 2px;
color: #666666;
border-style: solid;
border-color: black;
position: relative;
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
margin-left: auto;
margin-right: auto;
}
I reference the CSS in my control as follows.
<asp:GridView id="dgvEmpSum" runat="server"
DataSourceID="dsEmpSum"
AutoGenerateColumns="False"
VerticalAlign="Top"
ShowHeader="True"
cssClass="dGrid"
OnRowCreated="dgvEmpSum_RowCreated"
OnSelectedIndexChanged="dgvEmpSum_SelectedIndexChanged">
<Columns>
<asp:BoundField
DataField="Name"
HeaderText="Name"
HtmlEncode="False">
</asp:BoundField>
<asp:BoundField
DataField="Description"
HeaderText="Description"
HtmlEncode="False">
</asp:BoundField>
<asp:BoundField
DataField="Ext"
HeaderText="Ext"
HtmlEncode="False">
</asp:BoundField>
<asp:BoundField
DataField="Email"
HeaderText="Email"
HtmlEncode="False">
</asp:BoundField>
</Columns>
</asp:GridView>
This was working fine until I added the javascript to freeze the headers. Any suggestions?
Thanks,
Tal