JSF: Need advice on acheiving specific funcationality

[Gregg Bolinger]

I have a page that dispays a table with about 7 columns of data. Each row is a single Issue. There is quite a bit more information available about the issue that I need to give the users access to. Originally I was just going to navigate to a view page. But I want something fancier given the component model of JSF.

What I would like to do is to be able to click on a show/hide link for each row that would then render an existing panel just below that row with the remaining data. Showing and hiding components is easy but what is baffling me is how to handle the logic of which panel to show and hide. I don't want to necessarily generate a boolean render for every single row because I won't know how many rows are there.

Does anyone have any suggestions? If this is not clear, let me know and I will see what else I can explain.
[ December 17, 2004: Message edited by: Gregg Bolinger ]

[Nimchi Yung]

I do not know how to do it with JSF. But I did something similar
using DHTML. Is that a viable solution for you?

--Nimchi

[Gregg Bolinger]

Originally posted by Nimchi Yung:
I do not know how to do it with JSF. But I did something similar
using DHTML. Is that a viable solution for you?

--Nimchi

I don't see why not. Thanks.

[Varun Khanna]

I would like to know if you are using h ataTable or something else for tabular display?

I have implemented something pretty similar, but with h atatable. User clicks on any row of the table and the details of that row are displayed at the bottom of the table.

[Gregg Bolinger]

Originally posted by K Varun:
I would like to know if you are using h ataTable or something else for tabular display?

I have implemented something pretty similar, but with h atatable. User clicks on any row of the table and the details of that row are displayed at the bottom of the table.

Yes, I am using the dataTable. Can you give me some direction?

[Varun Khanna]

I thought you are displying just below the row, [I am showing at the "bottom of the table"]

1.I have wrote a listener for the row.
1.a. Listener is in backing bean.

2.Backing bean has a member variable "selectedRow".
2.a."selectedRow" objects Represents a row of datatable.
(i.e. if you showing records of 5 Emloyees in datatable, selectedRow will be of Type "Employee")

3.In the listener method, I sets this object as
selectedRow = (Employee)(dataTable.getRowData());
3.a. dataTable object is binded to the h atatable

4. Now in front end, I display the fields with the value from selectedRow.
4.a To show an employee Id:
<h utputText .... blah blah ... value="#{backingBean.selectedRow.employeeId}"/>

[Varun Khanna]

Just to add employeeId is the member variable of the class "Employee.java"

[Varun Khanna]

Originally posted by Gregg Bolinger:
Showing and hiding components is easy but what is baffling me is how to handle the logic of which panel to show and hide. I don't want to necessarily generate a boolean render for every single row because I won't know how many rows are there.

Even with your approach, you can put your panels in a div tag. give some id to each div. Now when you click the row, just pass that corresponding div id to javascript function and set the style of div as visible. Rest all divs will be hidden.

[Gregg Bolinger]

Alright, I'll give these ideas a shot. Thanks.

[S Mishra]

I also have faced the same problem.. I think this will surely solve your problem.

You have to do these things:

Maintain 2 nested datatables - one to show Items. Other to display the details of the item.

<h ataTable id="Outer Table" value="#{OuterBean.itemList}"
binding="#{OuterBean.table}" var="outerRow">
<h:column>
<h:commandLink actionListener="#{OuterBean.selectRow}">
<h utputText value="#{outerRow.name}">
</h:commandLink>
<h ataTable rendered="#{OuterBean.renderMap[outerRow.itemID]}"
value="#{outerRow}">
<h:column>
<h utputText value="#{outerRow.details}"
</h:column>
</h ataTable>
</h:column>
<h ataTable>

-------------------------------------------------------------

You have 2 beans -

OuterBean-

private ArrayList itemList; // list of InnerBean Data
private HtmlDataTable table;
private Map renderMap;
public void selectRow(ActionEvent event) {
// get the row selected.
InnerBean selectedBean = (InnerBean) table.getRowData();
renderMap = new Hashmap();
renderMap.put(selectedBean.getItemID(), true);
}

InnerBean -----------------------

private int itemID;
private String name;
private String details;

Just add the selected rows Id in the hash map it will work for you...
I hope this will resolve your problem