Click here to Skip to main content
Click here to Skip to main content

Tagged as

Gridview with Fixed Header

, 15 Sep 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
Gridview with Fixed Header


I have seen many articles on GridView control of scrolling headers. I tried several forums and websites, but didn’t come up with a good solution that works well enough. Some work with the browser compatibility and some don’t work.

In this article, I am trying to solve the problem of scrolling headers in ASP.NET GridView control.

This article will fulfill the following requirements:

  • GridView will have fixed header.
  • GridView can be scrolled vertically.

Initially view of GridView when loaded


Final view of GridView when scrolls down



GridView doesn’t have the ability to scroll. But if the GridView contains the larger number of rows or columns (say more than 100 rows and 15 columns), we want it to have scrollbars.

Since, the Div control has the ability to scroll horizontally and vertically, therefore, to achieve scrolling in GridView, we have to wrap the GridView in the Div control. It is the Div that actually scrolls, but it looks like the GridView is scrolling.

Using the Code

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv='X-UA-Compatible' content='IE=7' />
    <link rel='stylesheet' type='text/css' href='Styles/StaticHeader.css' />

    <script type='text/javascript' src='Styles/x.js'></script>

    <script type='text/javascript' src='Styles/xtableheaderfixed.js'></script>

    <script type='text/javascript'>
        xAddEventListener(window, 'load',
            function() { new xTableHeaderFixed
		('gvTheGrid', 'table-container', 0); }, false);

<div id='table-container'>
        <asp:GridView ID="gvTheGrid" runat="server" 
		GridLines="Both" CellPadding="3" AutoGenerateColumns="false"
            BackColor="WhiteSmoke" AlternatingRowStyle-BackColor="Silver" 
            OnPreRender="gvTheGrid_PreRender" CssClass="gvTheGrid">
                <asp:BoundField DataField="ID" HeaderText="ID" 
			HeaderStyle-Width="60" ItemStyle-Width="60" />
                <asp:BoundField DataField="Name" HeaderText="Name" 
			HeaderStyle-Width="60" ItemStyle-Width="60" />
                <asp:BoundField DataField="Price" HeaderText="Price" 
			HeaderStyle-Width="60" ItemStyle-Width="60" />
                <asp:BoundField DataField="Description" HeaderText="Description" 
                    ItemStyle-Width="200" />


The main reference I have taken to fix the issue is from this site:


  • 6th September, 2011: Initial version
  • 15th September, 2011: Code with paging added


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


About the Author

Software Developer
India India
I am Dorababu, working as a Software engineer. Web development in Asp.Net with C#, WinForms and MS sql server are the experience tools that I have had for the past 3 years. Yet to work on WCF, WPF, Silverlight and other latest ones.
Follow on   Twitter   Google+

Comments and Discussions

QuestionNeed help PinmemberMember 1110048722-Sep-14 3:47 
AnswerRe: Need help Pinmembermgh1472229-Dec-14 20:27 
QuestionVery tanks PinmemberMember 816385722-Dec-12 21:48 
AnswerRe: Very tanks PinmemberDorababu74327-Dec-12 1:13 
GeneralRe: Very tanks PinmemberMember 816385729-Dec-12 1:28 
GeneralMy vote of 4 PinmemberMember 84554365-Sep-12 3:50 
BugDoesn't work at all - throws runtime errors PinmemberPaulTownsend10-May-12 9:36 
GeneralRe: Doesn't work at all - throws runtime errors Pinmember@shok kumar mishra28-Oct-14 2:59 
GeneralGood One PinmemberMember 48613919-Mar-12 6:39 
GeneralRe: Good One PinmemberDorababu74319-Mar-12 6:44 
QuestionFixed column alignment is off Pinmemberdesertfoxaz19-Sep-11 12:23 
QuestionNice but after Sorting & Paging, its not working PinmemberMember 395260514-Sep-11 20:57 
AnswerRe: Nice but after Sorting & Paging, its not working PinmemberDorababu74315-Sep-11 2:31 
GeneralRe: Nice but after Sorting & Paging, its not working PinmemberShailesh vora25-Feb-13 1:16 
GeneralRe: Nice but after Sorting & Paging, its not working PinmemberDorababu74315-Sep-11 5:30 
QuestionWill it work with ListView Pinmemberdavid4life12-Sep-11 11:05 
SuggestionRe: Will it work with ListView PinmemberDorababu74313-Sep-11 2:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150327.1 | Last Updated 15 Sep 2011
Article Copyright 2011 by demouser743
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid