Hello everyone,
I have a table right now that contains a button in each row called “Edit”. When I call that it makes the whole table editable. How would I go about making only one row editable depending on which button you pressed?
Another similar question… How can I make only certain properties editable in the table? Meaning, how can I have text fields appear only for certain properties?
Thank you,
Andy Eskridge
Hi,
You can achieve both results with a customized TableFieldFactory set for the table. If you return null in createField method, the cell will be displayed like in non-editable table. I just refined the javadocs a bit as it was not that well emphasized there.
cheers,
matti
I’m trying to do that. I figured the answer would come from TableFieldFactory. Here’s a little bit of code that gets called whenever an Edit button is pressed. It gets called via a listener because the button is inside of the bean that the table is made out of.
clientTable.setEditable(true);
System.out.println("editTable()");
clientTable.setTableFieldFactory(new TableFieldFactory() {
@Override
public Field createField(Container container, Object itemId, Object propertyId, Component uiContext) {
System.out.println(container.toString() + itemId.toString() + propertyId.toString() + uiContext.toString());
return null;
}
});So this should have made the whole table uneditable because I returned null every time. But every cell still had a textfield and it doesn’t look like it was ever called because the println’s never printed out.
So I’m still a little bit lost. Thank you for your patience because I’m sure I’m missing something very obvious. Haha.
I have discovered the problem. All I needed to do was set the TableFieldFactory before I set the table editable. Ugh.
Here is my tablefieldfactory if anyone else wants to do something similar.
@Override
public void editTable(final Button.ClickEvent ce) {
System.out.println("editTable()");
clientTable.setTableFieldFactory(new TableFieldFactory() {
@Override
public Field createField(Container container, Object itemId, Object propertyId, Component uiContext) {
Client currentClient = (Client) itemId;
if (ce.getButton() == currentClient.editButton) {
if (propertyId.toString().equals("expDir")) {
return new TextField();
}
if (propertyId.toString().equals("participant")) {
return new TextField();
}
}
return null;
}
});
clientTable.setEditable(true);
}About the readonly issue. I think that the information if a prop is readonly or not should come from the property itself. If your properties handle that info correct then you dont have to hack the FieldFactory at all because Fields will be editable or not based on their propertydatasource.
For the other question. I had a similar problem. i just wanted to make a single table row editable when a user clicks on it. I think theres no standard widget but you can workarround it with a generated column a customcomponent as inline editor and a click listener wich activates the clicked row and deactivates all others.
greets
stefan
That works great…
But when the text field appears in the table cell it doesn’t automatically expand the column to adjust it. The column does resize after you refresh the page. Is there a work around for that?
Cheers
Nabeel
hi
I too want to achieve same thing however can you explain what :
Client currentClient = itemId;
if (ce.getButton() == currentClient.editButton)
Signifies.
Actually i need to know condition to have that only current row is editable.
Also please explain if I edit a field in table how to save changed data in database .can you provide some guidance.
Can somebody write code for edition row on double clicking? Pls, help.
Thanks for pointing that out. Notice however the
version for Vaadin 7
, although it’s almost identical.
There seems to be a bug however - the generated column is not updated when the values are edited.
I am beginner, this is my code (vaadin 7.5.7)
// ===== Product.java ============================
import java.util.Date;
public class Product {
private String id;
private String name;
private Date createdDate;
public Product(String id, String name, Date createdDate) {
super();
this.id = id;
this.name = name;
this.createdDate = createdDate;
}
… getter and setter
}
// ===== MainUI.java ============================
@Override
protected void init(VaadinRequest request) {
BeanItemContainer container = new BeanItemContainer<>(Product.class);
container.addBean(new Product(“001”, “P001”, new Date()));
container.addBean(new Product(“002”, “P002”, new Date()));
container.addBean(new Product(“003”, “P003”, new Date()));
Table table = new Table();
table.setContainerDataSource(container);
table.addGeneratedColumn("edit", new ColumnGenerator() {
@Override
public Object generateCell(Table source, Object rowId, Object columnId) {
Button editButton = new Button(FontAwesome.PENCIL);
editButton.addClickListener(new ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
Product currentProduct = (Product)rowId;
table.setTableFieldFactory(new TableFieldFactory() {
@Override
public Field<?> createField(Container container, Object itemId, Object propertyId, Component uiContext) {
Product product = (Product)itemId;
if(currentProduct.getId().equals(product.getId())) {
if(propertyId.equals("name")) {
return new TextField();
}
if(propertyId.equals("createdDate")) {
return new DateField();
}
}
return null;
}
}); //end of set table field factory
table.setEditable(true);
} //end of button click
});
return editButton;
} //end of generate cell
});
table.setSizeFull();
setContent(table);
}
// =================================
thanks