Articles → ASP .NET GRIDVIEW → Freeze Gridview Header In Asp.Net

Freeze Gridview Header In Asp.Net

In this article I will explain how to freeze gridview header. Let’s do some preparation before doing actual work.

First of all create a new asp.net web application with C# as code behind language (you can use any .net supported code behind language). Once you have created the project, create a table ‘Task’ and add rows in it.

Picture showing the design mode of the sample table

Click to Enlarge

As you can see in the figure above the ‘Task’ table contains three columns i.e. ‘Title’, ‘Deadline’ and ‘AssignedTo’. In this table I am inserting almost 1000 records so that we can scroll the web page to see all records. I have used following script to insert sample data

-- 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

Once the project and table is created let’s add a gridview control onto the page and bind it with ‘Task’ table. For binding you could use C# code, but here I am using SQLDataSource to bind gridview. See the sample code below.

<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>

It is important to note that I have set AutoGenerateColumn property to false.

Put Gridview Inside A Div

Now add the gridview which we have created above inside a div. So the code will be

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

See the style attribute which is added in div. Here I have added 2 styles i.e. height and overflow. It means that the maximum height of div would be 400 pixels and if the content inside the div is greater than 400 pixels then show scroll bar.

Now fix the header which we can do using CSS. So we have set the position of header as absolute. It means that even if we scroll the contents of the div then also I could see gridview header at the same position. So the CSS would be

.HeaderStyle {
	position: absolute;
}

Giving A Final Touch

Now we are done with the logic and the part which is left is setting the width and height of columns and headers so that we can give professional touch to grid view. So final code would be

<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>

C# Code

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

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Saturday, January 10, 2015

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**