Fixing a Header in Datagrid

Introduction

This article describes how to fix a header in Datagrid.

Background

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">
<Columns>
<asp:TemplateColumn HeaderText="Column 1">
<ItemTemplate>
<asp:Label ID="lblCol1Data" Width="130px" runat="server" 
Text='<%# DataBinder.Eval(Container.DataItem,"Col1Data") %>' ></asp:Label>
</ItemTemplate>
<HeaderStyle Width="150px" />
<ItemStyle Width="150px" />
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Column 2">
<ItemTemplate>
<asp:Label ID="lblCol2Data" Width="170px" runat="server" 
Text='<%# DataBinder.Eval(Container.DataItem,"Col2Data") %>' ></asp:Label>
</ItemTemplate>
<HeaderStyle Width="180px" />
<ItemStyle Width="180px" />
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Column 3">
<ItemTemplate>
<asp:Label ID="lblCol3Data" Width="70px" runat="server" 
Text='<%# DataBinder.Eval(Container.DataItem,"Col3Data") %>' ></asp:Label>
</ItemTemplate>
<HeaderStyle Width="80px" />
<ItemStyle Width="80px" />
</asp:TemplateColumn>
</Columns> 
<AlternatingItemStyle BackColor="White" />
<ItemStyle BackColor="#EFF3FB" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" Height="25px" 
Font-Size="15px" ForeColor="White" HorizontalAlign="Center" Wrap="false" />
</asp:DataGrid>
</div>

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];        
            }
            else
            {
                HeaderRow = HeaderCells[0].parentNode;        
            }            
            
            var DivsTopPosition = parseInt(divObj.scrollTop);
            
            if(DivsTopPosition>0)
            {
                HeaderRow.style.position = 'absolute';
                HeaderRow.style.top = (parseInt(DivsTopPosition)).toString() + 'px';
                HeaderRow.style.width = datagrid.style.width;                
                HeaderRow.style.zIndex='1000';
            }
            else
            {
                divObj.scrollTop = 0;
                HeaderRow.style.position = 'relative';
                HeaderRow.style.top = '0';
                HeaderRow.style.bottom='0';
                HeaderRow.style.zIndex='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.