How to add clickhandler on ImageCell in GWT CellTable? - gwt

Question

I have tried this but didn't work
Column<ContactInfo, String> imageColumn = new Column<ContactInfo, String>(new ImageCell()) {
#Override
public String getValue(ContactInfo object) {
return "contact.jpg";
}
};
imageColumn.setFieldUpdater(new FieldUpdater<ContactInfo, String>() {
#Override
public void update(int index, ContactInfo object, String value) {
Window.alert("You clicked " + object.firstName);
}
});
cellTable.addColumn(imageColumn, SafeHtmlUtils.fromSafeConstant("<br/>"));

Answer 1

public class ButtonImageCell extends ButtonCell{
#Override
public void render(com.google.gwt.cell.client.Cell.Context context,
String value, SafeHtmlBuilder sb) {
SafeHtml html = SafeHtmlUtils.fromTrustedString(new Image(value).toString());
sb.append(html);
}
}
in use:
final Column<ReportDTOProxy, String> buttonImageCellTest = new Column<ProxyObject, String>(new ButtonImageCell()) {
#Override
public String getValue(ProxyObject row) {
//url to image
return row.getImageUrl();
}
};

Answer 2

You can extend ImageCell class and override 2 it's methods - getConsumedEvents and onBrowserEvent. Example:
private class MyImageCell extends ImageCell{
#Override
public Set<String> getConsumedEvents() {
Set<String> consumedEvents = new HashSet<String>();
consumedEvents.add("dblclick");
return consumedEvents;
}
#Override
public void onBrowserEvent(Context context, Element parent,
String value, NativeEvent event,
ValueUpdater<String> valueUpdater) {
switch (DOM.eventGetType((Event)event)) {
case Event.ONDBLCLICK:
// TODO
break;
default:
break;
}
}
}

Answer 3

I did something similar mixing a Button cell with the renderer from an ImageCell....
ButtonCell bc = new ButtonCell() {
#Override
public void render(Context context, SafeHtml data, SafeHtmlBuilder sb) {
if (data != null) {
ImageResource icon = Icons.BUNDLE.pieChart();
SafeHtml html = SafeHtmlUtils.fromTrustedString(AbstractImagePrototype.create(icon).getHTML());
sb.append(html);
}
}
};
You get the idea. The only problem is that it does not display the "hand" icon when you hover over it.... likely it can be fixed by setting the CSS.

Answer 4

You can try this rather than using ButtonCell or ImageCell. This will work for sure. As I have implemented for my requirement. Let me know how does it goes..
ClickableTextCell imageCell = new ClickableTextCell() {
#Override
public void render(Context context, SafeHtml data, SafeHtmlBuilder sb) {
if (data != null) {
String imagePath = "icon.png";
sb.append(imagePath);
}
}
};
Column<ContactInfo, String> imageColumn = new Column<ContactInfo, String>(imageCell) {
#Override
public String getValue(ContactInfo object) {
return "";
}
};
imageColumn.setFieldUpdater(new FieldUpdater<ContactInfo, String>() {
#Override
public void update(int index, ContactInfo object, String value) {
Window.alert("You clicked " + object.firstName);
}
});
cellTable.addColumn(imageColumn, SafeHtmlUtils.fromSafeConstant("<br/>"));

Answer 5

A good solution for this issue, if you use ActionCell that is able to handle clicking. The use of it is a bit complicatied, but for me it worked pretty well.
First you need to initialize ActionCell with a delegate, in the constructor, write new ActionCell.Delegate<your class>. In this override the method execute and in that write your code that handle the clicking event.
The other thing you need to do is building up a html from the image. The SafeHtmlUtils class gives you a very easy way to do that. It's fromTrustedString method helps you building up the html:
SafeHtmlUtils.fromTrustedString(AbstractImagePrototype.create ("Your image from a resource class").getHTML());
This way the SafeHtml field can be initalized and if you give the ActionCell's contructor the SafeHtml and the Delegate, that it will do the work for you.
In this example a button will be initialized with the image from the bundle file in it. You can make it without the button if you override the render method of the ActionCell and append the SafeHtmlBuilder in the method with the same SafeHtml variable as above.
My code looks like the following:
IdentityColumn<Type> imageCell = new IdentityColumn<Type>(new ActionCell<Type>("AnyString",
new ActionCell.Delegate<Type>() {
#Override
public void execute(final Type item) {
"your code"
}
}) {
#Override
public void render(Context context, Type value, SafeHtmlBuilder sb) {
if (value != null) {
SafeHtml html = SafeHtmlUtils.fromTrustedString(AbstractImagePrototype.create(resource.image).getHTML());
sb.append(html);
}
}
});
You'd rather override the method in an another class but I didn't want to split them for this post. It worked for me very well, I hope it will help other's too.

Answer 6

I got all the above and added them in my app. Thanks to all. stackoverflow rocks!
ButtonCell bc = new ButtonCell() {
#Override
public void render(Context context, SafeHtml data, SafeHtmlBuilder sb) {
if (data != null) {
ImageResource icon = Connector.imageResources.minus();
Image image = new Image(icon);
//fix the mouse pointer
image.getElement().getStyle().setCursor(Cursor.POINTER);
//Do something with the DATA
image.setTitle("Delete " + data.asString());
SafeHtml html = SafeHtmlUtils.fromTrustedString(image.toString());
sb.append(html);
}
}
};
Column<InstanceProperty, String> imageColumn = new Column<InstanceProperty, String>(bc) {
#Override
public String getValue(InstanceProperty object) {
//return the DATA
return object.getKey();
}
};
imageColumn.setFieldUpdater(new FieldUpdater<InstanceProperty, String>() {
#Override
public void update(int index, InstanceProperty property,
String value) {
//you can also use the DATA to do something
InstancePropertiesTable.this.dataProvider.getList().remove(index);
}
});
addColumn(imageColumn, "");

Answer 7

This worked for me:
public class ButtonImageCell extends ButtonCell{
#Override
public void render(com.google.gwt.cell.client.Cell.Context context,
String renderedHtmlStr, SafeHtmlBuilder sb) {
sb.appendHtmlConstant(renderedHtmlStr);
}
}
In a class containing CellTable table:
TableResources resources = GWT.create(TableResources.class);
ImageResourceRenderer imageRenderer = new ImageResourceRenderer();
...
Column<MyRecord, String> buttonCol = new Column<MyRecord, String>(new ButtonImageCell()) {
#Override
public String getValue(MyRecord record) {
if(record.isOn())
return imageRenderer.render(resources.getOnImg()).asString();
else
return imageRenderer.render(resources.getOffImg()).asString();
}
};
buttonCol.setFieldUpdater(new FieldUpdater<MyRecord, String>() {
public void update(int index, MyRecordobject, String value) {
if (Window.confirm("Do stuff?")) {
//todo: stuff
}
}
});
...
table.addColumn(buttonCol, "");
Where the ImageResource comes from (resources):
public interface TableResources extends CellTable.Resources {
interface TableStyle extends CellTable.Style {
}
#Source("/images/on.png")
ImageResource getOnImg();
#Source("/images/off.png")
ImageResource getOffImg();
}

Answer 8

You need to sinkEvents() with appropriate bits.
Refer to answer of Question Adding ClickHandler to div which contains many other widget.