• Post Reply Bookmark Topic Watch Topic
  • New Topic

Expandable/Collapsible Subtable with h: or t: Datatable

 
Augustine Chelliah
Greenhorn
Posts: 28
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hello friends.

I have a datatable with some rows.. Each row will have a '[+]' link. On click of that link, I need to display some details concerning that row. The details are again a datatable. How do I implement this?

I need something like what is below...

Before expanding, the table should look like this...

XXXXX Col1Head Col2Head Col3Head Col4Head
------------------------------------------------------------------
[+] Row1Val1 Row1Val2 Row1Val3 Row1Val4

[+] Row2Val1 Row2Val2 Row2Val3 Row2Val4

[+] Row3Val1 Row3Val2 Row3Val3 Row3Val4

[+] Row4Val1 Row4Val2 Row4Val3 Row4Val4


After expanding (by clicking the [+] link) the table should look like this

XXXXX Col1Head Col2Head Col3Head Col4Head
------------------------------------------------------------------
[+] Row1Val1 Row1Val2 Row1Val3 Row1Val4

[-] Row2Val1 Row2Val2 Row2Val3 Row2Val4

SubCol1Head SubCol2Head SubCol3Head

SubRow1Val1 SubRow1Val2 SubRow1Val3

SubRow2Val1 SubRow2Val2 SubRow2Val3

SubRow3Val1 SubRow3Val2 SubRow3Val3

[+] Row3Val1 Row3Val2 Row3Val3 Row3Val4

[+] Row4Val1 Row4Val2 Row4Val3 Row4Val4


Also let me know if this is possible without using Javascript and just by JSF tags

Thank you in advance
 
Tim Holloway
Bartender
Posts: 18418
60
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The base HTML datatable can't do that, and I don't think the Tomahawk dataTable can either. However some of the more advanced third-party addon tagsets can do it. I think RichFaces and/or IceFaces can. They use JavaScript and that often includes AJAX, but they handle all that stuff automatically, so you don't have to write any JavaScript code yourself.
 
Augustine Chelliah
Greenhorn
Posts: 28
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks Tim..
My project does not allow rich faces or icefaces to be added. So cannot use them.

I just tried using plain html table tags and iterated over 2 <t:datalist> tags... It worked fine... Just got struck with an ajax call where the selected row Index is not correctly set when the action listner is called. Am checking it and will let you know if I was successful in implementing the same.

Thanks again for your reply.
 
Jennifer Bells
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Simple expandable table with RichFaces

<h:form>
<rich:dataTable value="#{wonderBean.wonders}" var="wonder">
<rich:column colspan="3">
<f:facet name="header">Wonder</f:facet>
<h:outputText value="#{wonder.name}" />
<a4j:commandLink id="link" value="#{!wonderBean.show?'[+]':'[-]'}"
reRender="link">
<a4j:actionparam name="val" value="#{!wonderBean.show}"
assignTo="#{wonderBean.show}" />
</a4j:commandLink>
</rich:column>
<rich:columnGroup>
<rich:column>
<a4j:outputPanel ajaxRendered="true">
<rich:dataTable value="#{wonder.details}" var="detail"
rendered="#{wonderBean.show}" style="border: 0px">
<rich:column>
<f:facet name="header">Location</f:facet>
<h:outputText value="#{detail.location}" />
</rich:column>
<rich:column>
<f:facet name="header">Image</f:facet>
<h:graphicImage value="#{detail.imageUrl}" />
</rich:column>
</rich:dataTable>
</a4j:outputPanel>
</rich:column>
</rich:columnGroup>
</rich:dataTable>
</h:form>


WonderBean class
public class WonderBean {
private WonderService service;
private Boolean show;

public Boolean getShow() {
return show;}
public void setShow(Boolean show) {
this.show = show;
}
public WonderService getService() {
return service;
}
public void setService(WonderService service) {
this.service = service;
}
public WonderBean() {
super();
}
public ArrayList<Wonder> getWonders() {
return service.getList();
}
}
WonderService class:

public class WonderService {

private ArrayList <Wonder> list;

public ArrayList<Wonder> getList() {
return list;
}
@PostConstruct
public void init () {
list = new ArrayList <Wonder>();
list.add(new Wonder("Chichen Itza", "Mexico", "http://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Chichen-Itza-Castillo-Seen-From-East.JPG/90px-Chichen-Itza-Castillo-Seen-From-East.JPG"));
list.add(new Wonder("Christ the Redeemer", "Brazil", "http://upload.wikimedia.org/wikipedia/commons/thumb/5/50/CorcovadofotoRJ.jpg/90px-CorcovadofotoRJ.jpg"));
list.add(new Wonder("Colosseum", "Italy", "http://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Colosseum_in_Rome%2C_Italy_-_April_2007.jpg/90px-Colosseum_in_Rome%2C_Italy_-_April_2007.jpg"));
list.add(new Wonder("Great Wall of China", "China", "http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/GreatWallNearBeijingWinter.jpg/90px-GreatWallNearBeijingWinter.jpg"));
list.add(new Wonder("Machu Picchu", "Peru", "http://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Before_Machu_Picchu.jpg/90px-Before_Machu_Picchu.jpg"));
list.add(new Wonder("Petra", "Jordan", "http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/PetraMonastery.JPG/90px-PetraMonastery.JPG"));
list.add(new Wonder("Taj Mahal", "India", "http://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Taj_Mahal_in_March_2004.jpg/90px-Taj_Mahal_in_March_2004.jpg"));
}

public WonderService() {
}
}

Wonder class:


public class Wonder implements java.io.Serializable{

private String name;
private Details details;

public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Wonder(String name, String location, String imageUrl) {
super();
this.name = name;
this.details = new Details (location, imageUrl);
}
public Details getDetails() {
return details;
}
}


JSF configuration file

<managed-bean>
<managed-bean-name>wonderBean</managed-bean-name>
<managed-bean-class>data.WonderBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<managed-property>
<property-name>service</property-name>
<property-class>data.WonderService</property-class>
<value>#{service}</value>
</managed-property>
</managed-bean>
<managed-bean>
<managed-bean-name>service</managed-bean-name>
<managed-bean-class>data.WonderService</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
Filename: 1.bmp
Description:
File size: 270 Kbytes
[Download 1.bmp] Download Attachment
 
Augustine Chelliah
Greenhorn
Posts: 28
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thank you Jennifer. As I said, my project does not allow to use rich faces. Also the requirements are changed now and so probably will not have this scenario. But Even if this scenario arises, I'll get back to the "html table tags iterated over a datalist" solution. Also will be using a4j for the expand collapse operation.
 
It is sorta covered in the JavaRanch Style Guide.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!