Grid headers in a div

[John Wilson]

My app produces some long datatables to display in a grid. So I put them in
a div so users can scroll. But the grid headers scroll out of view. I would
like to stop them doing this. Can I fix them in place at the top of the div?

 

[Guest]

http://www.societopia.net/samples/dataGrid_5c.aspx

 

[christof]

http://www.societopia.net/samples/dataGrid_5c.aspx

This feature doesn't work under Firefox, if you wish to use in some
other browser than IE you'll still have to find a better solution.

 

[Chris Botha]

I was looking for something like this as well on and off. On their Web site
it works, and I was going to figure it out so I copied the example code but
it won't work - compile error when the page loads. They do have some nifty
stuff though.

 

[Guest]

I have researched this issue and I do not think that there is a solution for
the datagrid because the datagrid does not emit a <THEAD> tag. If it were,
the css method that I used would have worked on firefox just as fine. I
tried it on this static html copy of the output of the datagrid:
http://www.societopia.net/samples/FixedTableHeader.htm

 

[Guest]

Hi Chris,

If you want to copy the entire code and run it as is, you need to remove the
reference to the header control on top:

<%@ Register TagPrefix="Societopia" tagName="PageHeader"
src="PageHeader.ascx" %>

and within the body of the page:
<SocietopiaageHeader runat="server"
id="PageHeader1"></SocietopiaageHeader>

 

[Chris Botha]

Hi Phillip, so it is your Web site? I did not realize it, as mentioned, you
have some snazzy stuff there.
Well, I finally nailed this baby, I have it working in a Web app now.
One question though, if I set the height of my DataGridContainer to 90%, or
for that matter any percentage, the div area shows blank (grid not visible),
it must have a fixed height. Do you find this is the case with your code as
well, or did I screw something up?

 

[Guest]

Hi Chris,

You are right. It does not work when I used percentages.

I tried something else. I took the html rendered by the aspx page and added
a <THEAD> tag around the first tablerow. I then used the percentage (as 40%
to make sure it is not longer than the length of the table content).
http://www.societopia.net/samples/FixedTableHeader2.htm

I found that while FireFox does not respond at all to “top:
expression(document.getElementById("DataGridContainer").scrollTop-2);†it
responds to another style attribute that IE simply ignores:

table>tbody {
overflow: auto;
height: 265px;
}

The problem is to get the datagrid to emit sections enclosed by the tags
<THEAD> </THEAD> and <TBODY></TBODY>, so that the above table>tbody effect
appears on Firefox. But I do not know how to get the datagrid to do that.
Maybe if someone from Microsoft can help get over this hurdle first, then a
working solution can be found.

 

[Chris Botha]

Hi Phillip, I can get the DIV to resize when the page resizes by processing
the "window.onresize" event in Java script and by setting the DIV's height
to "document.body.clientHeight - fixedValue", works great.

I looked at the part where you say "The problem is to get the datagrid to
emit sections enclosed by the tags".
Let me say that I don't understand the problem here fully (FireFox is low on
my priority list), but if the issue is to dynamically assign a CSS class to
the grid header, then it can be done programmatically. In the code-behind of
the "ItemCreated" event of the grid it can be done like this:
Private Sub DataGrid1_ItemCreated(ByVal sender .....
If e.Item.ItemType = ListItemType.Header Then
e.Item.Attributes.Add("class", "DataGridHeader")
End If
End Sub
If I am on the wrong track here, just ignore the above.

Thanks in any case,

Chris.

 

[Guest]

Hi Chris,

Let me expand a bit on that issue. If one right-mouse clicks on the HTML
produced by any webform containing a datagrid to view the source code, one
would see an html table structure, such as
<TABLE>
<TR><TD>HEADER TEXT</TD></TR>
<TR><TD>BODY TEXT</TD></TR>
</TABLE>

Instead I am hoping to find a way make the datagrid output an HTML TABLE
structure like this:
<TABLE>
<THEAD><TR><TD>Header Text</TD></TR></THEAD>
<TBODY><TR><TD>Body Text</TD></TR></TBODY>
</TABLE>

The latter output would allow me to utilize the style section:
<style>
table>tbody { /* this will be ignored by IE but not FireFox*/
overflow: auto;
height: 265px; /* a length that is smaller than the expanded table
length to allow the scroll bar to appear*/
}
</style>

which will produce the desired effect for FireFox.

 

[Chris Botha]

Hi Phillip, if you create a Web Custom control that derives from a DataGrid,
you will be able to generate the table tags your way, overriding the
"Render".
The problem is to output all styles/attributes and other stuff that goes
with the grid, for example if the user used Auto Format to format the grid,
if sort is specified, etc.
There is not enough info in the docs of the DataGrid on how the grid
renders/should render.
I did find this article though that looks promising when overriding the
Render
http://www.dotnetjunkies.com/Article/FE4B4BFD-3A9A-48CE-A41B-646D66293610.dcik
Well, this is my way, maybe there is something easier.

Thanks in any case, my IE grid is now working perfectly, Auto Format,
sorting, the works, and the header does not scroll.

Chris.