Click here to Skip to main content
13,628,175 members
Click here to Skip to main content
Add your own
alternative version


14 bookmarked
Posted 25 Jun 2009
Licenced CPOL

Fixing a Header in Datagrid

, , 25 Jun 2009
Rate this:
Please Sign up or sign in to vote.
A simple way to fix the Datagrid header using JavaScript and CSS


This article describes how to fix a header in Datagrid.


Users should have basic knowledge about CSS, JavaScript Object structures, events of Div.

Using the Code

First let's design the page:

<div id="Div" runat="server" 

style="position:relative; top:0px; left:0px; height:500px; width:250px; overflow:auto">
<asp:DataGrid ID="dgCheckScrollingHeader" runat="server" 

Width="410px" AutoGenerateColumns="False" CellSpacing="1" 

CellPadding="0" ForeColor="#333333" GridLines="vertical">
<asp:TemplateColumn HeaderText="Column 1">
<asp:Label ID="lblCol1Data" Width="130px" runat="server" 

Text='<%# DataBinder.Eval(Container.DataItem,"Col1Data") %>' ></asp:Label>
<HeaderStyle Width="150px" />
<ItemStyle Width="150px" />
<asp:TemplateColumn HeaderText="Column 2">
<asp:Label ID="lblCol2Data" Width="170px" runat="server" 

Text='<%# DataBinder.Eval(Container.DataItem,"Col2Data") %>' ></asp:Label>
<HeaderStyle Width="180px" />
<ItemStyle Width="180px" />
<asp:TemplateColumn HeaderText="Column 3">
<asp:Label ID="lblCol3Data" Width="70px" runat="server" 

Text='<%# DataBinder.Eval(Container.DataItem,"Col3Data") %>' ></asp:Label>
<HeaderStyle Width="80px" />
<ItemStyle Width="80px" />
<AlternatingItemStyle BackColor="White" />
<ItemStyle BackColor="#EFF3FB" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" Height="25px" 

Font-Size="15px" ForeColor="White" HorizontalAlign="Center" Wrap="false" />

The below code is mandatory for the Div tag, you can set height and width of the Div as per your requirement:

style="position:relative; top:0px; left:0px; overflow:auto;" 

HeaderStyle-Width and ItemStyle-Width of Itemtemplates/Columns should be equal to solve the dislocation problem of the header when called across browsers, width of the datagrid should be the sum of all the columns present in the datagrid approach. Cell padding and cell spacing need to be set to 0 and 1 respectively. This eliminates increasing row size of the header once the div is in scrollTop=0px position.

The below code needs to be kept in a script tag with language set to javascript and type set to text/javascript. This function needs to be called whenever div is scrolled to view content of the datagrid. This function expects two parameters, first parameter is Div object and datagrid id that is sent to the client/Browser's Dom.

function setonScroll(divObj,DgID)  
            var datagrid = document.getElementById(DgID);
            var HeaderCells = datagrid.getElementsByTagName('th');
            var HeaderRow;
            if(HeaderCells == null || HeaderCells.length == 0)
                var AllRows = datagrid.getElementsByTagName('tr');
                HeaderRow = AllRows[0];        
                HeaderRow = HeaderCells[0].parentNode;        
            var DivsTopPosition = parseInt(divObj.scrollTop);
       = 'absolute';
       = (parseInt(DivsTopPosition)).toString() + 'px';
                divObj.scrollTop = 0;
       = 'relative';
       = '0';

The below code needs to be added to your code behind file on page load. This will help in raising the onscroll event of the Div and fixing the header of the datagrid:

Div.Attributes.Add("onscroll", "setonScroll
	(this,'" + dgCheckScrollingHeader.ClientID + "');");  

This code is tested and works in the following:

  • Internet Explorer 6 and above
  • Mozilla 2.0 and above
  • Opera 9.6
  • Google Chrome

Points of Interest

The challenge was to find a simple solution for fixing datagrid header without using any third party web control or tools. The most important thing is that this works across the browser provided the browser supports Div's onscroll event and JavaScript.


  • 26th June, 2009: Initial post


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


About the Authors

Web Developer
India India
No Biography provided

Web Developer
India India
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralNot Working In Mozilla Pin
dp.mscit11-Jan-11 22:07
memberdp.mscit11-Jan-11 22:07 
Questionwhat is the problem which this should fix? Pin
ernest_elias30-Jun-09 22:47
memberernest_elias30-Jun-09 22:47 
AnswerRe: what is the problem which this should fix? Pin
raj869610-Jul-09 22:32
memberraj869610-Jul-09 22:32 
GeneralRe: what is the problem which this should fix? Pin
ernest_elias13-Jul-09 11:52
memberernest_elias13-Jul-09 11:52 
GeneralRe: what is the problem which this should fix? Pin
amithashneoy22-Mar-10 3:34
memberamithashneoy22-Mar-10 3:34 
GeneralRe: what is the problem which this should fix? Pin
raj869628-Jun-10 19:19
memberraj869628-Jun-10 19:19 
GeneralRe: what is the problem which this should fix? Pin
dp.mscit11-Jan-11 22:20
memberdp.mscit11-Jan-11 22:20 
GeneralGreat Job Pin
ShahPalak30-Jun-09 19:41
memberShahPalak30-Jun-09 19:41 
GeneralRe: Great Job [modified] Pin
raj869610-Jul-09 22:14
memberraj869610-Jul-09 22:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03-2016 | 2.8.180712.1 | Last Updated 26 Jun 2009
Article Copyright 2009 by raj8696, S.Rajeshwar
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid