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

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 PinmemberMember 1110048722-Sep-14 3:47 
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 

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.141220.1 | Last Updated 15 Sep 2011
Article Copyright 2011 by demouser743
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid