How to add click handler to Celltable ImageCell?

Question

How do I add a click handler to an ImageCell? This is what I have:

ImageCell btn= new ImageCell();
Column<Contact,String> column = new Column<Contact,String>(btn) 
{
    @Override
    public String getValue(Contact c) 
    {
        return c.imageLocation;
    }
};
column.setFieldUpdater(new FieldUpdater<Contact,String>()
{
    public void update(int index, Contact c, String value) 
    {   
        Window.alert("clicked");
    }           
});

score 2 · Answer 1 · edited Apr 15 '19 at 11:16

This works as well.

// clickable imageresource cell
public class ClickableImageResourceCell extends AbstractCell<ImageResource> {
    private static ImageResourceRenderer renderer;

    public ClickableImageResourceCell () {
        super(BrowserEvents.CLICK);
        if (renderer == null) {
            renderer = new ImageResourceRenderer();
        }
    }

    @Override
    public void onBrowserEvent(Context context, final Element parent, ImageResource value, NativeEvent event,
            ValueUpdater<ImageResource> valueUpdater) {
        super.onBrowserEvent(context, parent, value, event, valueUpdater);
        if (BrowserEvents.CLICK.equals(event.getType())) {
            onEnterKeyDown(context, parent, value, event, valueUpdater);
        }
    }

    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context,
            ImageResource value, final SafeHtmlBuilder sb) {
          sb.append(renderer.render(value));
    }

    @Override
    protected void onEnterKeyDown(Context context, Element parent, ImageResource value, NativeEvent event,
            ValueUpdater<ImageResource> valueUpdater) {
        if (valueUpdater != null) {
            valueUpdater.update(value);
        }
    }
}

score 1 · Answer 2 · answered Jun 04 '13 at 12:06

addButtonCell("resources/ui/images/download.png", "Download", "download");

private void addButtonCell(final String imageSrc, String columnName, final String action)

{
    ActionCell<AttachmentDTO> imageButtonCell = new ActionCell<AttachmentDTO>("", new Delegate<AttachmentDTO>()
        {
           @Override
           public void execute(final AttachmentDTO object)
           {
               if(action.equalsIgnoreCase("download"))
               {
                   download(object);
               }
               else
               {
                   eventBus.fireEvent(new ImgButtonClickEvent(object));
               }
           }
        })
        {
           @Override
           public void render(Context context, AttachmentDTO value, SafeHtmlBuilder sb)
           {
                 Image icon = new Image(imageSrc);
                 SafeHtmlBuilder builder = new SafeHtmlBuilder();
                 builder.appendHtmlConstant(icon.toString());
                 sb.append(builder.toSafeHtml());
           }
        };
    final Column<AttachmentDTO, AttachmentDTO> column = new Column<AttachmentDTO, AttachmentDTO>(imageButtonCell) 
       {
            @Override
            public AttachmentDTO getValue(AttachmentDTO object) 
            {
                return object;
            }
       };
    cellTable.addColumn(column, columnName); 
    column.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
    cellTable.setColumnWidth(column, "80px");   
}

score 1 · Answer 3 · edited May 23 '17 at 12:19

1

Maybe this helps: Adding clickHandler to row in CellTable in GWT?. It's not a clickhandler on the cell, but on the cell table (or list). which is more efficient.

edited May 23 '17 at 12:19

Community

1
1

answered Jul 15 '11 at 16:47

Hilbrand Bouwkamp

13,509
1
45
52

I resolved this issue by creating my own buttoncell class. I will post answers asap.. Apparently you can't answer your own question within 8 hrs if you have less than 100 pts – sap Jul 15 '11 at 19:09

score 1 · Answer 4 · answered Jul 18 '11 at 13:23

I resolved this issue by creating my own ButtonCell class. Following is my code:

import com.google.gwt.cell.client.AbstractSafeHtmlCell;
import com.google.gwt.cell.client.ValueUpdater;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.NativeEvent;
import com.google.gwt.safehtml.shared.SafeHtml;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.text.shared.SafeHtmlRenderer;
import com.google.gwt.text.shared.SimpleSafeHtmlRenderer;

/**
 * A {@link Cell} used to render a button.
 */
public class ClickImage extends AbstractSafeHtmlCell<String> {

  /**
   * Construct a new ButtonCell that will use a {@link SimpleSafeHtmlRenderer}.
   */
  private String bgImage="";
  public ClickImage() 
  {
    this(SimpleSafeHtmlRenderer.getInstance());
  }
  public ClickImage(String bgImage) 
  {
    this(SimpleSafeHtmlRenderer.getInstance());
    this.bgImage=bgImage;
  }

  public String getBgImage() 
  {
    return bgImage;
  }
  public void setBgImage(String bgImage) 
  {
    this.bgImage = bgImage;
  }
/**
   * Construct a new ButtonCell that will use a given {@link SafeHtmlRenderer}.
   * 
   * @param renderer a {@link SafeHtmlRenderer SafeHtmlRenderer<String>} instance
   */
  public ClickImage(SafeHtmlRenderer<String> renderer) {
    super(renderer, "click", "keydown");
  }

  @Override
  public void onBrowserEvent(Context context, Element parent, String value,
      NativeEvent event, ValueUpdater<String> valueUpdater) {
    super.onBrowserEvent(context, parent, value, event, valueUpdater);
    if ("click".equals(event.getType())) {
      onEnterKeyDown(context, parent, value, event, valueUpdater);
    }
  }

  @Override
  public void render(Context context, SafeHtml data, SafeHtmlBuilder sb) 
  {
    String img=getBgImage();
    String disableButton="";
    if(img.equals("transparentButton"))
    {
        disableButton = "disabled=\"disabled\"";
    }
    sb.appendHtmlConstant("<button class=\""+img+"\" type=\"button\" "+disableButton+" tabindex=\"-1\">");
    if (data != null) {
      sb.append(data);
    }
    sb.appendHtmlConstant("</button>");
  }

  @Override
  protected void onEnterKeyDown(Context context, Element parent, String value,
      NativeEvent event, ValueUpdater<String> valueUpdater) {
    if (valueUpdater != null) {
      valueUpdater.update(value);
    }
  }
}

So I used a button to show the image. I used css to make the background color for the button to be transparent and also, I'm passing the link to the image as a parameter to the constructor when the button is being created, that way I can create different clickable images. This worked for me!

How to add click handler to Celltable ImageCell?

4 Answers4