Static Grid Header

• Download source code - 21.7 KB

Introduction

This article provides a simple solution for creating a grid control (DataGrid/GridView) with static headers and scrollable rows. 

It aims at creating a grid control with the following scrollbars:

• A horizontal scrollbar with the ability to scroll both header and row portion of the grid.
• A vertical scrollbar with the ability to scroll only the row portion of the grid.

Background

The reason for posting this article is that when I got this requirement (static grid header + scrollable rows) and browsed I found out most of the solutions were complex with some scripting involved. So I decided to construct a simple way of achieving this requirement.

Using the code  

Below is a step by step guiding process for creating a grid with a static (fixed) header.

(Since I used the ASP.NET DataGrid control, the terms I mention will be based on that.) 

• After creating the required stylesheets for the DataGrid, add 'position: absolute' to the Headerstyle class.
• Now nest the datagrid in a panel or a div with the below properties.
XML

<asp:Panel ID="Paneltreaty" runat="server" 
  Height="100px" Width="400px" ScrollBars="Auto"> 

• The point is the Panel should be of fixed dimensions.

Note: The width of the grid should be equal to that of the panel so that the panel does not produce an extra horizontal scrollbar. The reason behind this is I decided that the panel should only produce the vertical scrollbar.  

This panel now controls the rows of the DataGrid but the header of the grid has the CSS property position: absolute so it is untouched by it.

Till this part is enough for small grids, i.e., grids with a small number of columns. But if your grid is really long then it will produce a horizontal scrollbar in your browser automatically (because the panel and grid are of same size.) Apply the below solution for that.

• Nest the Panel in a div tag where the div contains the following properties:
XML

<div id="divTreaty" style="overflow-x: scroll; width: 300px; height: 120px; position: absolute;"

• Now the idea behind this is, the div is also of CSS type position:absolute so it can control the header of the DataGrid which is of the same CSS type. And because it has a greater height than the Panel it will not produce a 'vertical' scrollbar but will produce a horizontal scrollbar if the grid is lengthy (in my example I have purposefully done so, so that it will be easy to understand) thus removing the browser's horizontal scrollbar.

Points of Interest

Now you may be wondering as to why there are two containers for the Grid, a Div and a Panel. 

Simply put, the structure is as follows:

<div style="position: absolute;">
   <Panel> (normal)
      <DataGrid Header style="position: absolute;" />
      <Datagrid Row (Row + Alternating Row + Footer) /> (normal)
   </Panel>
</div>

By default a control's rendering method is 'static' (position: static). Controls with 'position: absolute' are handled separately, and absolute controls get aligned based on a similar control and their rendering won't be affected by normal controls. 

• In this scenario I use the div to control the DataGrid header, both of them are absolute types.
• And I use the Panel to control the DataGrid rows since they are of normal type. 
• The div will only produce the horizontal scrollbar.
• The Panel will only produce the vertical scrollbar.  

Browser compatibility: This was tested only in major browsers and even if some minor fitting mistakes occur between the grid header and rows section it can be adjusted by adjusting the height of tableFiller in the example provided.

The tested browsers are:

• Internet Explorer 8
• Google Chrome Version 27.0.1453.94 m
• Firefox 21.0

Reference

• http://www.w3schools.com/cssref/pr_class_position.asp
• http://www.w3schools.com/cssref/playit.asp?filename=playcss_position&preval=absolute

History

• Initial version: June 05, 2013.