adding a check box to a Table

[sdever98]

Hi,

I have added a CheckBox widget to the table by implementing a custom SetRender for that Column. The ClickListener event for the CheckBox does not get fired.

Does anybody have any other ideas how to add a CheckBox to a Table and have access to the click event?

List<TableColumn> columns = new ArrayList<TableColumn>();
TableColumn col = new TableColumn("", 20);
col.setRenderer(new CellRenderer() {
public String render(final String property, final Object value) {
final CheckBox cb = new CheckBox();
cb.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
if (isEnabled())
selectedValues.add((Long)value);
else
selectedValues.remove((Long)value);
}
});
return cb.toString();
}
});
columns.add(col);

col = new TableColumn("Name", .20f);
columns.add(col);

TableColumnModel cm = new TableColumnModel(columns);
Table table = new Table(cm);
table.setWidth("100%");
table.setHeight("300px");
table.setHorizontalScroll(false);

Thanks!

Scott.

[darrellmeyer]

First, please wrap your code in tags as it is very hard to read the code.

The problem with your approach is that the check boxes will not get attached and therefore, will not receive events. Table's support widgets within there cells. You can pass them into the TableItem constructor.

[alex.d]

Dealing with the same problem here. It's easy to use TableItem constructor to add Widgets to a cell, but what if that's a paging table and the data is beeing added by the BasePagingLoader? How to add a Widget/CheckBox then?

[mstguy01]

I'm having a similar problem. I want to add an image to each row.

As far as I could find the best way to do this was to extend TableBinder as follows



private class MyTableBinder<M extends ModelData> extends TableBinder<M> {

public MyTableBinder(final Table table, ListStore<M> store) {
super(table, store);
}

protected TableItem createItem(M model) {
ModelData data = model;
TableItem item = new TableItem(new Object[getTable()
.getColumnCount()]);
setModel(item, data);
int cols = getTable().getColumnCount();
for (int j = 0; j < cols; j++) {
String id = getColumnId(j);
Object val;
if (id.equals("delete")) {
val = deletePrototype.createImage();
} else {
val = getTextValue(model, id);
if (val == null) {
val = model.get(id);
}
}
item.setValue(j, val);
}

return item;
}
}

so that when the "delete" column comes up I can insert an Image widget. However when I run the code the table does not render and I do not see an error. If I change the code to return a String instead of an Image then the Table will render.

I also tried adding a CheckBox in the same manner and got the same result. Is there something special that we have to do to add a Widget to the table?

[alex.d]

Actually there are several ways to do this. This is my first one using custom CellRenderer:



TableColumn col = new TableColumn("image", "Image", 70);
col.setSortable(false);
col.setRenderer(new CellRenderer<TableItem>()
{
public String render(TableItem item, String property, Object value) {
String imageUrl = (String) value;
return "<img src="imageUrl " />";
}
}
});
The problem is - what you have isn't a gwt-widget but just an image :-? Works fine if you don't have to click on it(or other interaction stuff) but just show it.

I used another way to put a checkbox in a row because i needed it to react to a click:


TableColumn col = new TableColumn("check", "", 20);
col.setRenderer(new CellRenderer<TableItem>() {
public String render(TableItem item, String property, Object value)
{
CheckBox chb = new CheckBox();
chb.addClickListener(new ClickListener() {
public void onClick(Widget sender)
{
// some code here
}
});
item.setWidget(0, chb);
return "";
}
});

// don't forget to disable the BulkRenderer
table.setBulkRender(false);

Not the best way probably, but it works.;)

[mstguy01]

I do need this to be an Image widget as I need the users to click on it. This worked fine in the final version of MyGWT.