Forum:

Datatable with scrollbar in JSF

Ranch Hand

Posts: 30

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi all,
I have created a datatable in JSF. How to insert a scrollbar on the datatable? Please advice on this. Thanks in advance!!! :

JSP code:

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<f:view><html><body>
<h:form>
<br><br><br>
<h:dataTable id="dt1" value="#{TableBean.perInfoAll}" var="item" bgcolor="#F1F1F1" border="10" cellpadding="5" cellspacing="3" first="0" rows="4" width="50%" dir="LTR" frame="hsides" rules="all" summary="This is a JSF code to create dataTable." >

<f:facet name="header">
        <h:outputText value="This is 'dataTable' demo" />
</f:facet>

<h:column>
        <f:facet name="header">
        <h:outputText value="id" />
        </f:facet> 
             <h:outputText value="#{item.id}"></h:outputText>
</h:column>

<h:column>
        <f:facet name="header">
        <h:outputText value="name"/>
        </f:facet> 
             <h:outputText value="#{item.name}"></h:outputText>
</h:column>

<h:column>
        <f:facet name="header">
        <h:outputText value="phone"/>
        </f:facet> 
             <h:outputText value="#{item.phone}"></h:outputText>
</h:column>

<h:column>
        <f:facet name="header">
        <h:outputText value="city"/>
        </f:facet>
             <h:outputText value="#{item.city}"></h:outputText>
</h:column>

<h:column>
        <f:facet name="header">
        <h:outputText value="pin"/>
        </f:facet>
             <h:outputText value="#{item.pin}"></h:outputText>
</h:column>

<f:facet name="footer">
        <h:outputText value="The End" />
</f:facet>

</h:dataTable><br><br>

</h:form>
</body></html></f:view>

TableBean.java

public class TableBean {

private perInfo[] perInfoAll = new perInfo[]{
new perInfo(101, "CHANDAN", "9891444444", "aaa", 11111),
new perInfo(102, "RAVI", "9911666666", "bbb" ,22222),
new perInfo(103, "JOHN", "9313888888", "ccc", 33333),
new perInfo(104, "ANDREW", "9911222222", "ddd" , 44444),
new perInfo(105, "SYMONDS", "9313999999", "eee", 55555),
new perInfo(101, "CHANDAN", "9891444444", "aaa", 11111),
new perInfo(102, "RAVI", "9911666666", "bbb" ,22222),
new perInfo(103, "JOHN", "9313888888", "ccc", 33333),
new perInfo(104, "ANDREW", "9911222222", "ddd" , 44444),
new perInfo(105, "SYMONDS", "9313999999", "eee", 55555),
new perInfo(101, "CHANDAN", "9891444444", "aaa", 11111),
new perInfo(102, "RAVI", "9911666666", "bbb" ,22222),
new perInfo(103, "JOHN", "9313888888", "ccc", 33333),
new perInfo(104, "ANDREW", "9911222222", "ddd" , 44444),
new perInfo(105, "SYMONDS", "9313999999", "eee", 55555),
};

public perInfo[] getperInfoAll() {
return perInfoAll;
}

public class perInfo {
int id;
String name;
String phone;
String city;
int pin;

public perInfo(int id, String name, String phone, String city, int pin) {
this.id = id;
this.name = name;
this.phone = phone;
this.city = city;
this.pin= pin;
}

public int getid() {
return id;
}

public String getname() {
return name;
}

public String getphone() {
return phone;
}

public String getcity() {
return city;
}

public int getpin() {
return pin;
}

}

Tim Holloway

Saloon Keeper

Posts: 28658

211

I like...

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Core JSF doesn't support scrolling. However many third-party add-ons do. Check out MyFaces Tomahawk or JBoss RichFaces, for example.

Experience keeps a dear School, but Fools will learn in no other.
---
Benjamin Franklin - Postal official and Weather observer

Christoph Mayr

Greenhorn

Posts: 2

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I surrounded my dataTable with:

<div style="overflow:auto; width=700px; height=400px;">
<h:dataTable>
.
.
.
</h:dataTable>
</div>

Tim Holloway

Saloon Keeper

Posts: 28658

211

I like...

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I thought you meant record scrolling for large output data sets! Didn't realize you were looking to scroll the table rows themselves up and down.

Experience keeps a dear School, but Fools will learn in no other.
---
Benjamin Franklin - Postal official and Weather observer

selvakumar Thiyagarajan

Ranch Hand

Posts: 30

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Christoph ,
First of all thanks for the idea. If i use the <DIV> tag, the entire page is getting scrolled. I need the table alone to be scrolled dynamically. For example, scroll bar should be there only if the table exceeds 5 rows. I guess this can be done by javascript. Also do we have Height property for the Datatable.?

Please advice on this.

Annu Vinayak

Greenhorn

Posts: 19

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Use:

<div style="overflow: auto; border: 1px solid #ccc; height: 260px">

just around your <rich:dataTable> tag. This would do jsut what you want.

P.S. Replace the height parameter with the desired height of your data table.