Click here to Skip to main content
11,484,752 members (68,619 online)
Click here to Skip to main content

Tagged as

Gridview with Fixed Header

, 15 Sep 2011 CPOL 83.3K 9.6K 30
Rate this:
Please Sign up or sign in to vote.
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

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

Share

About the Author

demouser743
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 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
Dorababu74327-Dec-12 1:13
memberDorababu74327-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
Dorababu74319-Mar-12 6:44
memberDorababu74319-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
Dorababu74315-Sep-11 2:31
memberDorababu74315-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
Dorababu74315-Sep-11 5:30
memberDorababu74315-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
Dorababu74313-Sep-11 2:54
memberDorababu74313-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.150520.1 | Last Updated 15 Sep 2011
Article Copyright 2011 by demouser743
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid