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.
"Sumit" <> wrote in message
news:00f701c3ab50$2280ddf0$...
> Hi,
> I want to make a datagrid to be scrollable instead of
> paging in it. So i have out that datagrid html tags inside
> <div></div> tags and made that div scrollable.
> Due to this if i scroll down the datagrid,,header also
> gets off the view because that header is also considered
> as a row in datagrid!!
> I want datagrid to be scrollable but header of the
> datagrid should always be there.
> Please suggest,
> Thanks
Similar Threads
