Click here to Skip to main content
15,867,453 members
Articles / Web Development / ASP.NET

Gridview with Fixed Header

Rate me:
Please Sign up or sign in to vote.
4.78/5 (16 votes)
15 Sep 2011CPOL1 min read 183.6K   13.3K   32   19
Gridview with Fixed Header

Introduction

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

image001.jpg

Final view of GridView when scrolls down

image001.jpg

Overview

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

HTML
<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' />
    <title></title>

    <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);
    </script>

<div id='table-container'>
        <asp:GridView ID="gvTheGrid" runat="server" 
		GridLines="Both" CellPadding="3" AutoGenerateColumns="false"
            BackColor="WhiteSmoke" AlternatingRowStyle-BackColor="Silver" 
			HeaderStyle-Font-Size="Medium"
            OnPreRender="gvTheGrid_PreRender" CssClass="gvTheGrid">
            <Columns>
                <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" 
			HeaderStyle-Width="200"
                    ItemStyle-Width="200" />
            </Columns>
        </asp:GridView>
    </div>

Reference

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

History

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

License

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


Written By
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.

Comments and Discussions

 
QuestionGridview with Fixed Header Pin
Mona Payal6-Nov-18 0:36
Mona Payal6-Nov-18 0:36 
QuestionWorks only in IE7 Pin
Member 1234520822-Feb-16 20:39
Member 1234520822-Feb-16 20:39 
QuestionNeed help Pin
Member 1110048722-Sep-14 2:47
Member 1110048722-Sep-14 2:47 
AnswerRe: Need help Pin
mgh1472229-Dec-14 19:27
mgh1472229-Dec-14 19:27 
QuestionVery tanks Pin
Member 816385722-Dec-12 20:48
Member 816385722-Dec-12 20:48 
AnswerRe: Very tanks Pin
demouser74327-Dec-12 0:13
demouser74327-Dec-12 0:13 
Are you using custom paging?
GeneralRe: Very tanks Pin
Member 816385729-Dec-12 0:28
Member 816385729-Dec-12 0:28 
GeneralMy vote of 4 Pin
Member 84554365-Sep-12 2:50
Member 84554365-Sep-12 2:50 
BugDoesn't work at all - throws runtime errors Pin
PaulTownsend10-May-12 8:36
PaulTownsend10-May-12 8:36 
GeneralRe: Doesn't work at all - throws runtime errors Pin
@shok kumar mishra28-Oct-14 1:59
@shok kumar mishra28-Oct-14 1:59 
GeneralGood One Pin
Member 48613919-Mar-12 5:39
Member 48613919-Mar-12 5:39 
GeneralRe: Good One Pin
demouser74319-Mar-12 5:44
demouser74319-Mar-12 5:44 
QuestionFixed column alignment is off Pin
desertfoxaz19-Sep-11 11:23
desertfoxaz19-Sep-11 11:23 
QuestionNice but after Sorting & Paging, its not working Pin
Member 395260514-Sep-11 19:57
Member 395260514-Sep-11 19:57 
AnswerRe: Nice but after Sorting & Paging, its not working Pin
demouser74315-Sep-11 1:31
demouser74315-Sep-11 1:31 
GeneralRe: Nice but after Sorting & Paging, its not working Pin
Shailesh vora25-Feb-13 0:16
Shailesh vora25-Feb-13 0:16 
GeneralRe: Nice but after Sorting & Paging, its not working Pin
demouser74315-Sep-11 4:30
demouser74315-Sep-11 4:30 
QuestionWill it work with ListView Pin
david4life12-Sep-11 10:05
david4life12-Sep-11 10:05 
SuggestionRe: Will it work with ListView Pin
demouser74313-Sep-11 1:54
demouser74313-Sep-11 1: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.