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

Really long list of items on the left side of a page and a short message on the right.

P: n/a
UJ
I have a long list of items that the user will be able to select from. When
they select an item, I'd like to have more detailed information appear on
the right side of the screen. I've already got a datagrid set up with the
clicking working correctly. Problem is, I'd like to have the list be
scrollable but leave the info on the right alone. What can I put around the
datagrid so that the entire thing becomes scrollable?

TIA - Jeff.
May 2 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
I have a very similar setup in a webpage I'm working on... A flipping great
big tree on the left and PDFs on the right. I tried several different
methods of doing what you want, and ended up with two workable solutions.

Easiest is to use two frames. One on the left for the datagrid, one on the
right for the content. The only problem with this setup is that your
datagrid and details are on two different pages.

Hardest is to use a table with two cells, left and right. In the left cell
where your datagrid goes, you have to put a <div/> element with overflow set
to auto. You then have to create javascript functions that handle the
browser window's onResize and onLoad events that sizes the div to a specific
size. You cannot use percentages for the scroll div size, otherwise the
scroll div will just expand the table. Here's the javascript functions I use
to control size (you may have to change them slightly for your application):
// helper that gets an element by name
function getElement(elementName){return document.all ?
document.all[elementName] : document.getElementById(elementName);}
// scales the table cell holding my navigation treeview
// the webpage has a header (div id=outerdiv), then a controls table below
(table id=icantdothiswithcss), then a table with the treeview on the left in
a cell (td id=navCell) with a div (id = scrollDiv style="overflow:auto;") and
the contents in a cell on the right. The table is width:100% height:100%,
and the navCell width=30%
function scaleNav(){var div, header, controls;div =
getElement('scrollDiv');navcell = getElement('navCell');header =
getElement('outerDiv');controls = getElement('icantdothiswithcss');if (div
&& header && controls && navcell){div.style.height = getWindowHeight() -
header.offsetHeight - controls.offsetHeight - 8;div.style.width =
navcell.offsetWidth;}}

"UJ" wrote:
I have a long list of items that the user will be able to select from. When
they select an item, I'd like to have more detailed information appear on
the right side of the screen. I've already got a datagrid set up with the
clicking working correctly. Problem is, I'd like to have the list be
scrollable but leave the info on the right alone. What can I put around the
datagrid so that the entire thing becomes scrollable?

TIA - Jeff.

May 2 '06 #2

P: n/a
UJ
When you do frames, can you load .aspx pages? I thought I read somewhere it
had to be .html pages.

Could you post your code?

TIA - Jeff.
"William Sullivan" <Wi*************@discussions.microsoft.com> wrote in
message news:C7**********************************@microsof t.com...
I have a very similar setup in a webpage I'm working on... A flipping
great
big tree on the left and PDFs on the right. I tried several different
methods of doing what you want, and ended up with two workable solutions.

Easiest is to use two frames. One on the left for the datagrid, one on
the
right for the content. The only problem with this setup is that your
datagrid and details are on two different pages.

Hardest is to use a table with two cells, left and right. In the left
cell
where your datagrid goes, you have to put a <div/> element with overflow
set
to auto. You then have to create javascript functions that handle the
browser window's onResize and onLoad events that sizes the div to a
specific
size. You cannot use percentages for the scroll div size, otherwise the
scroll div will just expand the table. Here's the javascript functions I
use
to control size (you may have to change them slightly for your
application):
// helper that gets an element by name
function getElement(elementName){return document.all ?
document.all[elementName] : document.getElementById(elementName);}
// scales the table cell holding my navigation treeview
// the webpage has a header (div id=outerdiv), then a controls table below
(table id=icantdothiswithcss), then a table with the treeview on the left
in
a cell (td id=navCell) with a div (id = scrollDiv style="overflow:auto;")
and
the contents in a cell on the right. The table is width:100% height:100%,
and the navCell width=30%
function scaleNav(){var div, header, controls;div =
getElement('scrollDiv');navcell = getElement('navCell');header =
getElement('outerDiv');controls = getElement('icantdothiswithcss');if
(div
&& header && controls && navcell){div.style.height = getWindowHeight() -
header.offsetHeight - controls.offsetHeight - 8;div.style.width =
navcell.offsetWidth;}}

"UJ" wrote:
I have a long list of items that the user will be able to select from.
When
they select an item, I'd like to have more detailed information appear on
the right side of the screen. I've already got a datagrid set up with the
clicking working correctly. Problem is, I'd like to have the list be
scrollable but leave the info on the right alone. What can I put around
the
datagrid so that the entire thing becomes scrollable?

TIA - Jeff.

May 2 '06 #3

P: n/a
UJ
Thanks that worked fine.

"UJ" <fr**@nowhere.com> wrote in message
news:ea**************@TK2MSFTNGP03.phx.gbl...
When you do frames, can you load .aspx pages? I thought I read somewhere
it had to be .html pages.

Could you post your code?

TIA - Jeff.
"William Sullivan" <Wi*************@discussions.microsoft.com> wrote in
message news:C7**********************************@microsof t.com...
I have a very similar setup in a webpage I'm working on... A flipping
great
big tree on the left and PDFs on the right. I tried several different
methods of doing what you want, and ended up with two workable solutions.

Easiest is to use two frames. One on the left for the datagrid, one on
the
right for the content. The only problem with this setup is that your
datagrid and details are on two different pages.

Hardest is to use a table with two cells, left and right. In the left
cell
where your datagrid goes, you have to put a <div/> element with overflow
set
to auto. You then have to create javascript functions that handle the
browser window's onResize and onLoad events that sizes the div to a
specific
size. You cannot use percentages for the scroll div size, otherwise the
scroll div will just expand the table. Here's the javascript functions I
use
to control size (you may have to change them slightly for your
application):
// helper that gets an element by name
function getElement(elementName){return document.all ?
document.all[elementName] : document.getElementById(elementName);}
// scales the table cell holding my navigation treeview
// the webpage has a header (div id=outerdiv), then a controls table
below
(table id=icantdothiswithcss), then a table with the treeview on the left
in
a cell (td id=navCell) with a div (id = scrollDiv style="overflow:auto;")
and
the contents in a cell on the right. The table is width:100%
height:100%,
and the navCell width=30%
function scaleNav(){var div, header, controls;div =
getElement('scrollDiv');navcell = getElement('navCell');header =
getElement('outerDiv');controls = getElement('icantdothiswithcss');if
(div
&& header && controls && navcell){div.style.height = getWindowHeight() -
header.offsetHeight - controls.offsetHeight - 8;div.style.width =
navcell.offsetWidth;}}

"UJ" wrote:
I have a long list of items that the user will be able to select from.
When
they select an item, I'd like to have more detailed information appear
on
the right side of the screen. I've already got a datagrid set up with
the
clicking working correctly. Problem is, I'd like to have the list be
scrollable but leave the info on the right alone. What can I put around
the
datagrid so that the entire thing becomes scrollable?

TIA - Jeff.


May 2 '06 #4

P: n/a
UJ wrote:
When you do frames, can you load .aspx pages? I thought I read somewhere it
had to be .html pages.


If you really read that somewhere; the one who wrote it doesn't know
what he/she is talking about.
May 2 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.