Click here to Skip to main content
15,938,446 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi!
How to fixed datagrid header while scrolling. without using table for headers.

Sample Code:

<asp:UpdatePanel ID="updtPnlGrid" RenderMode="Inline" runat="server">
<ContentTemplate>
<div style="height: 260px; width: 470px; overflow: auto; vertical-align :top;">
<asp:DataGrid ID="dgAPVender" AccessKey="G" runat="server" CssClass="clsGrid" BorderColor="Desktop"
CellPadding="3" AutoGenerateColumns="False" Width="450px" >
<SelectedItemStyle CssClass="clsGridRowShade2"></SelectedItemStyle>
<AlternatingItemStyle CssClass="clsGridRowShade2"></AlternatingItemStyle>
<ItemStyle CssClass="clsGridRowShade1"></ItemStyle>
<HeaderStyle Font-Bold="True" CssClass="clsGridHeader" HorizontalAlign="center">
</HeaderStyle>
<FooterStyle CssClass="clsGridHeader"></FooterStyle>
<Columns>
<asp:TemplateColumn HeaderText="No">
<ItemTemplate>
<%# dgAPVender.PageSize * dgAPVender.CurrentPageIndex + Container.ItemIndex + 1
%>
</ItemTemplate>
<ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
Font-Underline="False" HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:TemplateColumn>
<asp:TemplateColumn Visible="false" HeaderText="GL">
<ItemStyle VerticalAlign="Middle" Height="20px" Width="10px" />
<ItemTemplate>
<asp:Label runat="server" ID="lblId" CssClass="clsText" Text='<%# DataBinder.Eval(Container.DataItem,"ID")%>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="varUserID" HeaderText="User ID" ItemStyle-HorizontalAlign="left">
<ItemStyle HorizontalAlign="Left" />
</asp:BoundColumn>
<asp:BoundColumn DataField="varFName" HeaderText="User Name" ItemStyle-HorizontalAlign="left">
<ItemStyle HorizontalAlign="Left" />
</asp:BoundColumn>
<asp:TemplateColumn>
<HeaderTemplate>
<asp:Label ID="lblAPVendor" runat="server" Text="AP Vendor ID"></asp:Label>
</HeaderTemplate>
<ItemStyle VerticalAlign="Middle" Height="20px" Width="100px" />
<ItemTemplate>
<asp:TextBox ID="txtVendorID" Style="text-align: left;" Width="95px" runat="server"
AutoPostBack="true" OnTextChanged="txtVendorID_TextChanged" onkeypress="JavaScript:fncInputPureAlphaNumericWithoutSpecial();"
MaxLength="10" Height="20px" Font-Size="12px" Text='<%# DataBinder.Eval(Container.DataItem,"varVendorID") %>'>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnCancel" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="dgAPVender" />
</Triggers>
</asp:UpdatePanel>


Please reply me as soon as possible...


Thanks & Regards,
Minal Shah.
Posted
Updated 29-Apr-10 20:21pm
v2

1 solution

Step 1 :
Create a CSS class as following
.HeaderFreez
{
position:relative ;
top:expression(this.offsetParent.scrollTop);
z-index: 10;
}

Step 2:
Set Gridview’s HeaderStyle CssClass as follows CssClass="HeaderFreez"
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900