Editing h:dataTable - jsf

Question

The functionality I need is as follows:
I have a datatable with 4 columns(already works well, for the purpose of explanation I provided just one column "Price") and in the last column I have a "modify" icon. When I click on "modify" icon I would like inputText to pop-up where I can do my modifications for each column in the row.
From technical perspective I'm doing it:
In JSF:
<h:dataTable value="#{item.getItemList()}" var="c"
styleClass="order-table"
headerClass="order-table-header"
rowClasses="order-table-odd-row,order-table-even-row">
<h:column>
<f:facet name="header"> Price </f:facet>
<h:inputText value="#{c.price}" size="5" rendered="#{c.editable}" />
<h:outputText value="#{c.price}" rendered="#{not c.editable}" />
</h:column>
<h:column>
<f:facet name="header"> Operation </f:facet>
<h:form>
<h:commandLink action="#{item.editAction(c)}">
<h:graphicImage library="images"
name="modifyIcon.png"
width="20"
rendered="#{not c.editable}"/>
</h:commandLink>
</h:form>
<h:form>
<h:commandLink action="#{item.removeItem(c)}">
<h:graphicImage value="resources/images/deleteIcon.png" width="20" />
</h:commandLink>
</h:form>
</h:column>
</h:dataTable>
In bean:
public String editAction(Item item) {
item.setEditable(true);
return null;
}
and in Item class:
public boolean isEditable() {
return this.editable;
}
public void setEditable(boolean editable) {
this.editable = editable;
}
Then when I click on modifyIcon.png nothing happends. I would expect input fields from the other columns to show up, but they don't. Do you have any idea where I could made a mistake?

Answer 1

since you don't show us where and how you load the list of items, we cannot give you one absolute answer. but here is a working example:
import java.io.Serializable;
public class TestItem implements Serializable{
private static final long serialVersionUID = -2725423502616632442L;
private int id;
private double price;
private boolean editable;
public TestItem(int id, double price, boolean editable) {
super();
this.id = id;
this.price = price;
this.editable = editable;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
public boolean isEditable() {
return editable;
}
public void setEditable(boolean editable) {
this.editable = editable;
}
}
Controller:
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
#ManagedBean(name="testBean")
#SessionScoped
public class Test implements Serializable{
private static final long serialVersionUID = 2010307013874058143L;
private List<TestItem> items;
public Test(){
}
#PostConstruct
public void init(){
items = new ArrayList<TestItem>();
items.add(new TestItem(0,20.99,false));
items.add(new TestItem(1,30.90,false));
items.add(new TestItem(2,23.00,false));
items.add(new TestItem(3,15.50,false));
}
public final String setEditable(TestItem selectedItem){
selectedItem.setEditable(true);
return null;// null or your view-id
}
public final String save(){
for(TestItem i: this.getItems()){
System.out.println(i.getPrice());
i.setEditable(false);
}
return null;// null or your view-id
}
public List<TestItem> getItems() {
return items;
}
public void setItems(List<TestItem> items) {
this.items = items;
}
}
xhtml:
<h:form>
<h:dataTable id="DATA-TABLE" var="c" value="#{testBean.items}">
<h:column>
<f:facet name="header"> Name </f:facet>
<h:inputText value="#{c.price}" size="5" rendered="#{c.editable}" />
<h:outputText value="#{c.price}" rendered="#{not c.editable}" />
</h:column>
<h:column>
<f:facet name="header"> Operation </f:facet>
<h:commandButton action="#{testBean.setEditable(c)}" value="EDIT"
rendered="#{not c.editable}">
</h:commandButton>
<h:commandButton action="#{testBean.save}" value="SAVE"
rendered="#{c.editable}">
</h:commandButton>
</h:column>
</h:dataTable>
</h:form>