Click here to Skip to main content
13,861,366 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


31 bookmarked
Posted 6 Sep 2011
Licenced CPOL

Gridview with Fixed Header

, 15 Sep 2011
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 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.

You may also be interested in...

Comments and Discussions

QuestionGridview with Fixed Header Pin
Mona Payal6-Nov-18 1:36
memberMona Payal6-Nov-18 1:36 
QuestionWorks only in IE7 Pin
Member 1234520822-Feb-16 21:39
memberMember 1234520822-Feb-16 21:39 
QuestionNeed help Pin
Member 1110048722-Sep-14 3:47
memberMember 1110048722-Sep-14 3:47 
AnswerRe: Need help Pin
mgh1472229-Dec-14 20:27
membermgh1472229-Dec-14 20:27 
QuestionVery tanks Pin
Member 816385722-Dec-12 21:48
memberMember 816385722-Dec-12 21:48 
AnswerRe: Very tanks Pin
demouser74327-Dec-12 1:13
memberdemouser74327-Dec-12 1:13 
GeneralRe: Very tanks Pin
Member 816385729-Dec-12 1:28
memberMember 816385729-Dec-12 1:28 
GeneralMy vote of 4 Pin
Member 84554365-Sep-12 3:50
memberMember 84554365-Sep-12 3:50 
BugDoesn't work at all - throws runtime errors Pin
PaulTownsend10-May-12 9:36
memberPaulTownsend10-May-12 9:36 
GeneralRe: Doesn't work at all - throws runtime errors Pin
@shok kumar mishra28-Oct-14 2:59
member@shok kumar mishra28-Oct-14 2:59 
GeneralGood One Pin
Member 48613919-Mar-12 6:39
memberMember 48613919-Mar-12 6:39 
GeneralRe: Good One Pin
demouser74319-Mar-12 6:44
memberdemouser74319-Mar-12 6:44 
QuestionFixed column alignment is off Pin
desertfoxaz19-Sep-11 12:23
memberdesertfoxaz19-Sep-11 12:23 
QuestionNice but after Sorting & Paging, its not working Pin
Member 395260514-Sep-11 20:57
memberMember 395260514-Sep-11 20:57 
AnswerRe: Nice but after Sorting & Paging, its not working Pin
demouser74315-Sep-11 2:31
memberdemouser74315-Sep-11 2:31 
GeneralRe: Nice but after Sorting & Paging, its not working Pin
Shailesh vora25-Feb-13 1:16
memberShailesh vora25-Feb-13 1:16 
GeneralRe: Nice but after Sorting & Paging, its not working Pin
demouser74315-Sep-11 5:30
memberdemouser74315-Sep-11 5:30 
QuestionWill it work with ListView Pin
david4life12-Sep-11 11:05
memberdavid4life12-Sep-11 11:05 
SuggestionRe: Will it work with ListView Pin
demouser74313-Sep-11 2:54
memberdemouser74313-Sep-11 2:54 

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

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

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