there's a few solutions, here's one that I devised. As far as I know, no
matter what, you'll essentially need two tables or grids. one for the
header and one for the body. You basically need to hide the header row from
your datagrid, and create a new table/grid with the header information.
Here is my solution which consists of two files. An external .css file and
the .aspx page
In an external .css file (I used GlobalStyles.css):
..divHeader
{
height: 30;
width: 100%;
overflow: hidden;
}
..tblHeader
{
height: 30;
width: 100%;
overflow: hidden;
}
..divBody
{
width: 100%;
height: 590;
overflow: auto;
}
..tblBody
{
width:100%;
}
End of external .css file.
In the <HEAD> section of the .aspx page:
<script>
function GetJSObject(objID)
{
var myObj;
if(document.getElementById)
{
myObj = document.getElementById(objID);
}
else if (document.layers)
{
myObj = document.layers[objID];
}
else if (document.all)
{
myObj = document.all(objID);
}
return(myObj);
}
function Scroll()
{
GetJSObject("divHeader").scrollLeft =
GetJSObject("divBody").scrollLeft;
}
</script>
<LINK href="GlobalStyles.css" type="text/css" rel="stylesheet">
End of <HEAD> section.
In the <BODY> section of the .aspx file:
<div class="divHeader" id="divHeader">
<asp:table id="tblHeader" runat="server"
EnableViewState="False" CssClass="tblHeader"></asp:table>
</div>
<div class="divBody" id="divBody" onscroll="Scroll();">
<asp:table id="tblBody" runat="server" EnableViewState="False"
CssClass="tblBody"></asp:table>
</div>
End of <BODY> section.
That's it. I used Tables, but you could use a grid as well. Populate tblBody
however you like, then populate tblHeader with one row. That row should have
the same number of cells stretching horizontally that a single row in
tblBody has. This solution does require a little bit of javascript, but I
couldn't find a solution simply using divs or any other html tag.
