How to add clickhandler on ImageCell in GWT CellTable?

Question

I have tried this but didn\'t work

Column imageColumn = new Column(new ImageCell()) {
       @Override
             


        

Answer 1

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 2

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 3

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 4

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 5

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 6

You need to sinkEvents() with appropriate bits.

Refer to answer of Question Adding ClickHandler to div which contains many other widget.