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
Jump to PostCan you show us some code please?
Can you show us some code please?
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
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.