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