Skip to main content

I want to display scroll bar beside a table.

14 replies [Last post]
k_nak
Offline
Joined: 2008-02-24
Points: 0

Hello.
I want to display a lot of data on Yahoo datatabrle at a time.
Therefore, I want to display scroll bar beside a table, but I cannot understand how I should do.
Would you teach it ?

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
carlavmott
Offline
Joined: 2005-02-10
Points: 0

I fixed the bug I filed so now you can set scrollable to true in the Yahoo table and get the desired affect. You can set scrollable to true by passing that through the args attribute. The tag looks like:

value="{columns : [
{ label : 'Title', id : 'title'},
{ label :'Author', id : 'author'},
{ label : 'ISBN', id : 'isbn'},
{ label : 'Description', id : 'description'}
],
rows : [
{ title : 'Book Title 1', author : 'Author 1', isbn: '4412', description : 'A Some long description'},
{ title : 'Book Title 1', author : 'Author 1', isbn: '4412', description : 'A Some long description'},
{ title : 'Book Title 1', author : 'Author 1', isbn: '4412', description : 'A Some long description'},
{ title : 'Book Title 1', author : 'Author 1', isbn: '4412', description : 'A Some long description'},
{ title : 'Book Title 1', author : 'Author 1', isbn: '4412', description : 'A Some long description'},
{ title : 'Book Title 1', author : 'Author 1', isbn: '4412', description : 'A Some long description'},
{ id : 'bar', title : 'Book Title 2', author : 'Author 2', isbn : '4412', description : 'A Some long description'}
]
}" />

k_nak
Offline
Joined: 2008-02-24
Points: 0

I think what I do when I want to use the optional functions which each UI originally had before it was rolled up in jMaki ( as well as the scroll bar of the data table ).
Is there the method to set optional functions in direct jMaki Widget?
This method can be applied for various UI.
If I want such a method, do I roll up UI by myself?
I am sorry that I ask the question many times.

carlavmott
Offline
Joined: 2005-02-10
Points: 0

Hi k_nak,

I opened a bug for this (see issue 323). We just didn't have time to fix this for the release we are trying to get out later today. The fix will be available for the next release which we hope to do next month. I'll post when the fix is available.

The args attribute is used to pass in widget or toolkit specific options. We need to improve the support we currently have.

Carla

k_nak
Offline
Joined: 2008-02-24
Points: 0

Thank you very much.
I look forward to the next release.

carlavmott
Offline
Joined: 2005-02-10
Points: 0

Hi,

The fix is in the 1.1 developer release.

carla

k_nak
Offline
Joined: 2008-02-24
Points: 0

The following addresses are official commentaries of the scroll of the yahoo datatable.

http://developer.yahoo.com/yui/examples/datatable/dt_fixedscroll.html

I want to carry out "Y scrolling" published by this page.

carlavmott
Offline
Joined: 2005-02-10
Points: 0

Hi k_nak,


I just saw this reply from Greg on the feedback alias. Have you tried something like this?


From Greg's email reply:


What you are trying to do can be done pretty easy using a CSS trick where you set the size of the area you want to work with (in this case the height) to a fixed size and allow for overflow to be handled by a scrollbar.


Here is an example:

<div id="scrollable" style="height:150px;overflow-x:auto">


value="{columns : [
{ label : 'Title', id : 'title'},
{ label :'Author', id : 'author'},
{ label : 'ISBN', id : 'isbn'},
{ label : 'Description', id : 'description'}
],
rows : [
{ title : 'Book Title 1', author : 'Author 1', isbn: '4412', description : 'A Some long description'},
{ id : 'bar', title : 'Book Title 2', author : 'Author 2', isbn : '4412', description : 'A Some long description'},
{ title : 'Book Title 3', author : 'Author 3', isbn: '4412', description : 'A Some long description'},
{ id : 'bar2', title : 'Book Title 4', author : 'Author 4', isbn : '4412', description : 'A Some long description'},
{ title : 'Book Title 5', author : 'Author 5', isbn: '4412', description : 'A Some long description'},
{ id : 'bar3', title : 'Book Title 6', author : 'Author 6', isbn : '4412', description : 'A Some long description'} ]
}" />


</div>



In this case the yahoo.dataTable is wrapped with a div that has a style where the overflow-y is set to auto. This is what allows for the scrolling to happen. Now all you need to do is customize the height to fit in what you want.


Let me know if this doesn't work for you.


Carla

k_nak
Offline
Joined: 2008-02-24
Points: 0

Carla, nice to meet you.
Thank you for your giving me the instruction answering my question.
I tried your suggestion. (I changed overflow-x in overflow-y on trying it.)
Unfortunately, the table-header has been scrolled with the table-body.
[id = "scrollabel"] does not seem to show an effect.(I use IE6.)
I did not understand what I made a mistake in.

I want to set a property for widget directly. Can I do it ?

We encode as follows to set scroll bar in Yahoo UI.

[i]this.myDataTableY = new YAHOO.widget.DataTable("yscrolling", myColumnDefsY,
this.myDataSource, {scrollable:true, height:"10em"});[/i]

I want to do setting such as the above in jMaki.

bakarirum
Offline
Joined: 2005-07-07
Points: 0

I have tried this suggestion and the scrolling region partly works. Notice how the Heading line is static and does not scroll away. Can this be fixed? Below is a copy of my test page. Please check this code out. My browser is IE 6

<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %>
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

"http://www.w3.org/TR/html4/loose.dtd">



JSP Page

JSP Page

value="{columns : [
{ label : 'Title', id : 'title'},
{ label :'Author', id : 'author'},
{ label : 'ISBN', id : 'isbn'},
{ label : 'Description', id : 'description'}
],
rows : [
{ title : 'Book Title 1', author : 'Author 1', isbn: '4412', description : 'A Some long description'},
{ id : 'bar', title : 'Book Title 2', author : 'Author 2', isbn : '4412', description : 'A Some long description'},
{ id : 'bar', title : 'Book Title 3', author : 'Author 3', isbn : '4413', description : 'A Some long description'},
{ id : 'bar', title : 'Book Title 4', author : 'Author 4', isbn : '4414', description : 'A Some long description'},
{ id : 'bar', title : 'Book Title 5', author : 'Author 5', isbn : '4415', description : 'A Some long description'},
{ id : 'bar', title : 'Book Title 6', author : 'Author 6', isbn : '4416', description : 'A Some long description'},
{ id : 'bar', title : 'Book Title 7', author : 'Author 7', isbn : '4417', description : 'A Some long description'},
{ id : 'bar', title : 'Book Title 8', author : 'Author 8', isbn : '4418', description : 'A Some long description'},
{ id : 'bar', title : 'Book Title 9', author : 'Author 9', isbn : '4419', description : 'A Some long description'},
{ id : 'bar', title : 'Book Title 10', author : 'Author 10', isbn : '4420', description : 'A Some long description'},
{ id : 'bar', title : 'Book Title 11', author : 'Author 11', isbn : '4421', description : 'A Some long description'},
{ id : 'bar', title : 'Book Title 12', author : 'Author 12', isbn : '4422', description : 'A Some long description'},
{ id : 'bar', title : 'Book Title 13', author : 'Author 13', isbn : '4423', description : 'A Some long description'}
]
}" />


]]>

k_nak
Offline
Joined: 2008-02-24
Points: 0

Really thank you for your answer.
I copied your cord in its entirety and carried it out.
However, the following phenomenon undesirably occurred:
"The heading" remains, but the scrolled description overlapped "the heading".
The scrolled description must move independent from "the heading".
And the letter of the header moves to the outside of the table (above the table) at a moment when I click the letter of the header after I scrolled a table.
(The phenomenon resembles a bug by the position appointment of css.)

Environment:Eclipse Europa and Tomcat6.0
Making method:Dynamic Web Project (jMaki Ajax checked) jMaki Wizards

I am sorry that I was not able to make use of your advice.

sloanb
Offline
Joined: 2003-09-14
Points: 0

Are you waning to do this within the grid itself or within a container that contains the grid? Let me know and I will provide you with some examples.

k_nak
Offline
Joined: 2008-02-24
Points: 0

Thank you for your answer.
However, I was not able to understand your meaning of the question well. I am sorry.
Therefore, I intend to give an explanation about my situation.

I use Struts. And I wrote the following codes in jsp.


Data from 0 to 200 are handed to "tableValue".
I confirmed that these data were displayed on yahoo datatable.
However, the datatable becomes very long lengthwise.
I want to display a short datatable more in the lengthwise direction.
Therefore, I want to arrange scroll bar beside the "whole datatable" except the header.
I do not want to display a scroll bar beside an individual grid.

manasjena
Offline
Joined: 2008-02-26
Points: 0

try this code it will work

k_nak
Offline
Joined: 2008-02-24
Points: 0

Thank you.

However, I couldn't understand where I should write this cord when I use jMaki.