Articles → ASP .NET GRIDVIEW → Freeze gridview header in asp.net

Freeze gridview header in asp.net







Picture showing the design mode of the sample table

Click to Enlarge



-- Script for inserting 1000 records
declare @i as int 
Set 
  @i = 1 while @i < 1000 begin Insert into Task 
Values 
  (
    'Task ' + cast(
      @i as varchar(10)
    ), 
    Getdate() + @i, 
    'Person ' + cast(
      @i as varchar(10)
    )
  ) 
set 
  @i = @i + 1 end



Add controls in the page




<asp:GridView ID="gvTest" runat="server" DataSourceID="source" AutoGenerateColumns="false">
	<Columns>
		<asp:TemplateField HeaderText="Title">
			<ItemTemplate>
				<asp:Label ID="lblTitle" runat="server" Text='<%#Eval("Title")%>'>
				</asp:Label>
			</ItemTemplate>
		</asp:TemplateField>
		<asp:TemplateField HeaderText="Deadline">
			<ItemTemplate>
				<asp:Label ID="lblDeadLine" runat="server" Text='<%#Eval("Deadline")%>'>
				</asp:Label>
			</ItemTemplate>
		</asp:TemplateField>
		<asp:TemplateField HeaderText="Assigned To">
			<ItemTemplate>
				<asp:Label ID="lblAssignedTo" runat="server" Text='<%#Eval("AssignedTo")%>'>
				</asp:Label>
			</ItemTemplate>
		</asp:TemplateField>
	</Columns>
</asp:GridView>
<asp:SqlDataSource ID="source" runat="server" ConnectionString="conn_string"
        SelectCommand="Select * from Task"></asp:SqlDataSource>





Put gridview inside a div




<div style="height: 400px; overflow: scroll;">
	<!—GRID VIEW -->
</div>






.HeaderStyle {
	position: absolute;
}



Giving a final touch




<style type="text/css">
       .HeaderStyle {
	position: absolute;
	margin-top: -1px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}
</style>
<div style="height: 400px; overflow: scroll;">
	<asp:GridView ID="gvTest" runat="server" DataSourceID="source" AutoGenerateColumns="false"
            OnRowDataBound="gvTest_RDB" HeaderStyle-CssClass="HeaderStyle">
		<Columns>
			<asp:TemplateField HeaderText="Title" HeaderStyle-Width="200px" ItemStyle-Width="200px"
                    HeaderStyle-HorizontalAlign="Left" ItemStyle-VerticalAlign="Bottom" ItemStyle-CssClass="ItemStyle"
                    HeaderStyle-BackColor="Aqua">
				<ItemTemplate>
					<asp:Label ID="lblTitle" runat="server" Text='<%#Eval("Title")%>'>
					</asp:Label>
				</ItemTemplate>
			</asp:TemplateField>
			<asp:TemplateField HeaderText="Deadline" ItemStyle-VerticalAlign="Bottom" ItemStyle-CssClass="ItemStyle"
                    HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="129px" ItemStyle-Width="120px"
                    HeaderStyle-BackColor="Aqua">
				<ItemTemplate>
					<asp:Label ID="lblDeadLine" runat="server" Text='<%#Eval("Deadline")%>'>
					</asp:Label>
				</ItemTemplate>
			</asp:TemplateField>
			<asp:TemplateField HeaderText="Assigned To" HeaderStyle-Width="117px" ItemStyle-Width="120px"
                    HeaderStyle-HorizontalAlign="Left" ItemStyle-VerticalAlign="Bottom" ItemStyle-CssClass="ItemStyle"
                    HeaderStyle-BackColor="Aqua">
				<ItemTemplate>
					<asp:Label ID="lblAssignedTo" runat="server" Text='<%#Eval("AssignedTo")%>'>
					</asp:Label>
				</ItemTemplate>
			</asp:TemplateField>
		</Columns>
	</asp:GridView>
</div>
<asp:SqlDataSource ID="source" runat="server" ConnectionString="conn_string"
        SelectCommand="Select * from Task"></asp:SqlDataSource>




protected void gvTest_RDB(object sender, GridViewRowEventArgs e) {
	if (e.Row.RowType == DataControlRowType.DataRow) {
		if (e.Row.RowIndex == 0) {
			e.Row.Style.Add("height", "70px");
		}
	}
}



Output


Picture showing the output of the Freeze gridview header in asp.net

Click to Enlarge

Picture showing the output of the Freeze gridview header in asp.net

Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Saturday, January 10, 2015

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250