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.
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 w
ith 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
'position: absolute' to the
- 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
Div and a
Simply put, the structure is as follows:
<div style="position: absolute;">
<DataGrid Header style="position: absolute;" />
<Datagrid Row (Row + Alternating Row + Footer) /> (normal)
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.
div will only produce the horizontal scrollbar.
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
- Initial version: June 05, 2013.