Click here to Skip to main content
Click here to Skip to main content

Fixing a Header in Datagrid

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

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.

History

  • 26th June, 2009: Initial post

License

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

Share

About the Authors

S.Rajeshwar
Web Developer
India India
No Biography provided

raj8696
Web Developer
India India
No Biography provided

Comments and Discussions

 
GeneralNot Working In Mozilla Pinmemberdp.mscit11-Jan-11 23:07 
Questionwhat is the problem which this should fix? Pinmemberernest_elias30-Jun-09 23:47 
We develop web applications for IE and Mozilla mainly. In spite of that we try to have HTML compatible with most browsers. However I am not aware of a problem you want to fix. Should you describe the problem, which this fix solves? I don't know if our applications need this.
Do you know if that problem has a GridView too?
Thank you
 
-ernest

AnswerRe: what is the problem which this should fix? Pinmemberraj869610-Jul-09 23:32 
GeneralRe: what is the problem which this should fix? Pinmemberernest_elias13-Jul-09 12:52 
GeneralRe: what is the problem which this should fix? Pinmemberamithashneoy22-Mar-10 4:34 
GeneralRe: what is the problem which this should fix? Pinmemberraj869628-Jun-10 20:19 
GeneralRe: what is the problem which this should fix? Pinmemberdp.mscit11-Jan-11 23:20 
GeneralGreat Job PinmemberShahPalak30-Jun-09 20:41 
GeneralRe: Great Job [modified] Pinmemberraj869610-Jul-09 23:14 

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
Web03 | 2.8.141216.1 | Last Updated 26 Jun 2009
Article Copyright 2009 by S.Rajeshwar, raj8696
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid