Gridview with Fixed Header

• Download source - 48.21 KB

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

Final view of GridView when scrolls down

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:

• http://cross-browser.com/x/examples/xthf-demo.php?s=sep&n=3 

History

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