Scrollable Grid

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

tshad - 05 Sep 2007 07:47 GMT

I was just looking at a site that had scrollable grids and was wondering how
that is done?

It was an aspx page, but I have only seen Datagrids that were
non-scrollable. You can page a grid but I have never seen an option to make
a grid scrollable.

Does anyone know how that is done?

Thanks,

Tom

Reply to this Message

Mark Rae [MVP] - 05 Sep 2007 08:05 GMT

>I was just looking at a site that had scrollable grids and was wondering
>how that is done?
[quoted text clipped - 4 lines]
>
> Does anyone know how that is done?

http://www.google.co.uk/search?sourceid=navclient&hl=en-GB&ie=UTF-8&rlz=1T4GGIH_
en-GBGB220GB220&q=%22ASP%2eNET%22+GridView+scrollable

Signature

Mark Rae
ASP.NET MVP
http://www.markrae.net

Reply to this Message

John Mott - 05 Sep 2007 19:15 GMT

The primary trick is to put the gridview inside a DIV tag that has a height
and an overflow-y:scroll so that it creates a scroll bar, so the gridview
itself doens't do the scrolling. If you want to have the headers in a fixed
position above the scrolling gridview you copy the header row with
javascript. There is a good example here, i've done it before based on this
logic.

http://www.codeproject.com/useritems/ScrollingGridView.asp

john

>I was just looking at a site that had scrollable grids and was wondering
>how that is done?
[quoted text clipped - 8 lines]
>
> Tom

Reply to this Message

tshad - 05 Sep 2007 19:38 GMT

> The primary trick is to put the gridview inside a DIV tag that has a
> height and an overflow-y:scroll so that it creates a scroll bar, so the
[quoted text clipped - 4 lines]
>
> http://www.codeproject.com/useritems/ScrollingGridView.asp

Div was the way to do it. I didn't realize it had an overflow attribute.
I also create a table with just one row to handle the header.

Here is the way I did it:

<table border=1 cellspacing="0" cellpadding="0" width="475px">
<tr class=jay style="background-color:#3ba4bd; color:FFFFFF;">
<td width="82px">Date Posted</td>
<td width="101px">Posted By</td>
<td width="234px">Note</td>
</tr>
</table>
<div style="height:100px; border-bottom:1px solid
#000000;width:475px;overflow: auto;">
<asp:DataGrid
Visible=true
...

This works really well.

Thanks,

Tom

> john
>
[quoted text clipped - 10 lines]
>>
>> Tom

Reply to this Message

Rate this thread:

Scrollable Grid

Free Magazines