Click here to Skip to main content
11,492,523 members (62,321 online)
Click here to Skip to main content

Static Grid Header

, 5 Jun 2013 CPOL 6.4K 138 4
Rate this:
Please Sign up or sign in to vote.
Static grid header (horizontally scrollable) with scrollable rows (horizontally and vertically scrollable).

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.
  • <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:
  • <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

History

  • Initial version: June 05, 2013.

License

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

Share

About the Author

BharatRamV
Software Developer (Senior) iInterChange Systems P. Ltd
India India
No Biography provided

Comments and Discussions

 
GeneralThis is not a duplicate Tip Pin
BharatRamV5-Jun-13 21:39
memberBharatRamV5-Jun-13 21:39 

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
Web01 | 2.8.150520.1 | Last Updated 5 Jun 2013
Article Copyright 2013 by BharatRamV
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid