i have managed to create a scrollable datagrid with fixed header.
The header doesnt scroll out of focus when i pull the scrollbar down.
However the height of the header increases or decreases depending on the number of records displayed. This is unacceptable to some of my customers and i am desperate to get a solution.

I am sure one of you could help me.

Thanks & regards

Sanjish


i have used the following style for my datagrid fixed header
in the <HEAD> section of HTML source

[

<style type="text/css">

.DataGridFixedHeader { BORDER-RIGHT: #4a3c8c 1px solid; BORDER-TOP: #4a3c8c 1px solid; font-height:30; FONT-SIZE: .9em; BORDER-LEFT: #4a3c8c 1px solid; COLOR: blue; BORDER-BOTTOM: #4a3c8c 1px solid; FONT-FAMILY: Arial; POSITION: relative; ; TOP: expression(this.offsetParent.scrollTop -2); HEIGHT: 40px; BACKGROUND-COLOR: #c6d7cf }
.DataGridFixedPager { BORDER-RIGHT: #4a3c8c 1px solid; BORDER-TOP: #4a3c8c 1px solid; FONT-SIZE: .8em; BORDER-LEFT: #4a3c8c 1px solid; COLOR: blue; ; BOTTOM: expression(getScrollBottom(this.offsetParent)); BORDER-BOTTOM: #4a3c8c 1px solid; FONT-FAMILY: Arial; POSITION: relative; HEIGHT: 17px; BACKGROUND-COLOR: #c6d7cf }
BODYs { BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(../Images/buter.jpg); BACKGROUND-REPEAT: repeat-x }

</style>

]

Then i have defined the datgrid properties in the <BODY> section as follows

[

<div id="div2" style="OVERFLOW: auto; WIDTH: 840px; HEIGHT: 400px ; z-index: 900; left: 48px; position: absolute; top: 150px;" runat="server">
<asp:datagrid id="DataGrid1" OnSelectedIndexChanged="DataGrid1_SelectedIndexChanged" runat = "server" BackColor = "White" style="z-index: 905; left: 20px; top: 150px;" BorderColor="#DEBA84" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" Width="800px" CellSpacing="2" Font-Bold="True" Font-Size="Smaller" Visible="False" PageSize="10" AutoGenerateColumns="True" Height="400px" ForeColor="Black" >
<ItemStyle CssClass="GridTD1" ></ItemStyle>
<AlternatingItemStyle BackColor="BlanchedAlmond" Height="12px" ForeColor="Black" />
<SelectedItemStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#135A9C" Font-Bold="True" Font-Underline= "False" ForeColor="White" HorizontalAlign="Center" CssClass="DataGridFixedHeader" Wrap="False" ></HeaderStyle>
<Columns>
<asp:ButtonColumn ButtonType="PushButton" CommandName="Select" Text="Select"></asp:ButtonColumn>
</Columns>
</asp:datagrid>
</div>

]

I hope that helps

Thanks

Sanjish

This article has been dead for over six months. Start a new discussion instead.