By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,885 Members | 1,474 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,885 IT Pros & Developers. It's quick & easy.

Grid headers in a div

P: n/a
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?

--
John Wilson
Nov 19 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a
http://www.societopia.net/samples/dataGrid_5c.aspx
--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"John Wilson" wrote:
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?

--
John Wilson

Nov 19 '05 #2

P: n/a
Phillip Williams wrote:
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.
Nov 19 '05 #3

P: n/a
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.

"Phillip Williams" <Ph**************@webswapp.com> wrote in message
news:55**********************************@microsof t.com...
http://www.societopia.net/samples/dataGrid_5c.aspx
--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"John Wilson" wrote:
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?

--
John Wilson

Nov 19 '05 #4

P: n/a
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
--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"christof" wrote:
Phillip Williams wrote:
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.

Nov 19 '05 #5

P: n/a
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:
<Societopia:PageHeader runat="server"
id="PageHeader1"></Societopia:PageHeader>

--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"Chris Botha" wrote:
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.

"Phillip Williams" <Ph**************@webswapp.com> wrote in message
news:55**********************************@microsof t.com...
http://www.societopia.net/samples/dataGrid_5c.aspx
--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"John Wilson" wrote:
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?

--
John Wilson


Nov 19 '05 #6

P: n/a
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?

"Phillip Williams" <Ph**************@webswapp.com> wrote in message
news:37**********************************@microsof t.com...
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:
<Societopia:PageHeader runat="server"
id="PageHeader1"></Societopia:PageHeader>

--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"Chris Botha" wrote:
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.

"Phillip Williams" <Ph**************@webswapp.com> wrote in message
news:55**********************************@microsof t.com...
> http://www.societopia.net/samples/dataGrid_5c.aspx
> --
> HTH,
> Phillip Williams
> http://www.societopia.net
> http://www.webswapp.com
>
>
> "John Wilson" wrote:
>
>> 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?
>>
>> --
>> John Wilson
>>
>>
>>


Nov 19 '05 #7

P: n/a
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("DataGridContai ner").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.
--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"Chris Botha" wrote:
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?

"Phillip Williams" <Ph**************@webswapp.com> wrote in message
news:37**********************************@microsof t.com...
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:
<Societopia:PageHeader runat="server"
id="PageHeader1"></Societopia:PageHeader>

--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"Chris Botha" wrote:
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.

"Phillip Williams" <Ph**************@webswapp.com> wrote in message
news:55**********************************@microsof t.com...
> http://www.societopia.net/samples/dataGrid_5c.aspx
> --
> HTH,
> Phillip Williams
> http://www.societopia.net
> http://www.webswapp.com
>
>
> "John Wilson" wrote:
>
>> 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?
>>
>> --
>> John Wilson
>>
>>
>>


Nov 19 '05 #8

P: n/a
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.

"Phillip Williams" <Ph**************@webswapp.com> wrote in message
news:26**********************************@microsof t.com...
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("DataGridContai ner").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.
--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"Chris Botha" wrote:
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?

"Phillip Williams" <Ph**************@webswapp.com> wrote in message
news:37**********************************@microsof t.com...
> 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:
> <Societopia:PageHeader runat="server"
> id="PageHeader1"></Societopia:PageHeader>
>
> --
> HTH,
> Phillip Williams
> http://www.societopia.net
> http://www.webswapp.com
>
>
> "Chris Botha" wrote:
>
>> 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.
>>
>> "Phillip Williams" <Ph**************@webswapp.com> wrote in message
>> news:55**********************************@microsof t.com...
>> > http://www.societopia.net/samples/dataGrid_5c.aspx
>> > --
>> > HTH,
>> > Phillip Williams
>> > http://www.societopia.net
>> > http://www.webswapp.com
>> >
>> >
>> > "John Wilson" wrote:
>> >
>> >> 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?
>> >>
>> >> --
>> >> John Wilson
>> >>
>> >>
>> >>
>>
>>
>>


Nov 19 '05 #9

P: n/a
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.

--
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"Chris Botha" wrote:
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.

"Phillip Williams" <Ph**************@webswapp.com> wrote in message
news:26**********************************@microsof t.com...
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("DataGridContai ner").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.
--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"Chris Botha" wrote:
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?

"Phillip Williams" <Ph**************@webswapp.com> wrote in message
news:37**********************************@microsof t.com...
> 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:
> <Societopia:PageHeader runat="server"
> id="PageHeader1"></Societopia:PageHeader>
>
> --
> HTH,
> Phillip Williams
> http://www.societopia.net
> http://www.webswapp.com
>
>
> "Chris Botha" wrote:
>
>> 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.
>>
>> "Phillip Williams" <Ph**************@webswapp.com> wrote in message
>> news:55**********************************@microsof t.com...
>> > http://www.societopia.net/samples/dataGrid_5c.aspx
>> > --
>> > HTH,
>> > Phillip Williams
>> > http://www.societopia.net
>> > http://www.webswapp.com
>> >
>> >
>> > "John Wilson" wrote:
>> >
>> >> 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?
>> >>
>> >> --
>> >> John Wilson
>> >>
>> >>
>> >>
>>
>>
>>


Nov 19 '05 #10

P: n/a
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...D66293610.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.

"Phillip Williams" <Ph**************@webswapp.com> wrote in message
news:16**********************************@microsof t.com...
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.

--
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"Chris Botha" wrote:
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.

"Phillip Williams" <Ph**************@webswapp.com> wrote in message
news:26**********************************@microsof t.com...
> 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("DataGridContai ner").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.
>
>
> --
> HTH,
> Phillip Williams
> http://www.societopia.net
> http://www.webswapp.com
>
>
> "Chris Botha" wrote:
>
>> 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?
>>
>> "Phillip Williams" <Ph**************@webswapp.com> wrote in message
>> news:37**********************************@microsof t.com...
>> > 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:
>> > <Societopia:PageHeader runat="server"
>> > id="PageHeader1"></Societopia:PageHeader>
>> >
>> > --
>> > HTH,
>> > Phillip Williams
>> > http://www.societopia.net
>> > http://www.webswapp.com
>> >
>> >
>> > "Chris Botha" wrote:
>> >
>> >> 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.
>> >>
>> >> "Phillip Williams" <Ph**************@webswapp.com> wrote in message
>> >> news:55**********************************@microsof t.com...
>> >> > http://www.societopia.net/samples/dataGrid_5c.aspx
>> >> > --
>> >> > HTH,
>> >> > Phillip Williams
>> >> > http://www.societopia.net
>> >> > http://www.webswapp.com
>> >> >
>> >> >
>> >> > "John Wilson" wrote:
>> >> >
>> >> >> 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?
>> >> >>
>> >> >> --
>> >> >> John Wilson
>> >> >>
>> >> >>
>> >> >>
>> >>
>> >>
>> >>
>>
>>
>>


Nov 19 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.