GXT Grid Anchor Cell

In previous post, I wrote about my solution to render image & link in grid cell.
This is the generic class to handle it.

import java.util.HashSet;
import java.util.Set;

import com.google.gwt.cell.client.AbstractCell;
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.SafeHtmlBuilder;
import com.google.gwt.safehtml.shared.SafeHtmlUtils;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.sencha.gxt.core.client.ValueProvider;

public class AnchorLinkCell<T> extends AbstractCell<T> {

    String imgURL = "";
    String styleClass = "";
    AsyncCallback<T> callback;
    ValueProvider<T, String> vp;

    public AnchorLinkCell(String imgURL, ValueProvider<T, String> vp, String styleClass, AsyncCallback<T> callback) {
        this.imgURL = imgURL;
        this.callback = callback;
        this.styleClass = styleClass;
        this.vp = vp;
    }

    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context, T value, SafeHtmlBuilder sb) {
        sb.appendHtmlConstant("<div class=\"" + this.styleClass + "\" style='cursor: pointer'/>");
        if (imgURL != "") {
            sb.appendHtmlConstant("<img src='" + imgURL + "' style='cursor: pointer'/> ");
        }
        sb.append(SafeHtmlUtils.fromTrustedString(this.vp.getValue(value)));
        sb.appendHtmlConstant("</div>");
    }

    @Override
    public Set<String> getConsumedEvents() {
        Set<String> events = new HashSet<String>();
        events.add("click");
        return events;
    }

    @Override
    public void onBrowserEvent(com.google.gwt.cell.client.Cell.Context context, Element parent, T value, NativeEvent event, ValueUpdater<T> valueUpdater) {
        // TODO Auto-generated method stub
        super.onBrowserEvent(context, parent, value, event, valueUpdater);
        if (parent.getFirstChildElement().isOrHasChild(Element.as(event.getEventTarget()))) {
            this.callback.onSuccess(value);
        }
    }
}

Steps :

1. Declare column config with bean parameters and set the value as the identity of the bean.

ColumnConfig<PremiseBean, PremiseBean> prm_companyColumn = new ColumnConfig<PremiseBean, PremiseBean>(props.identity(), 150,"Company Name");
        

2. This can be done by adding an identity value provider in the property access interface.

IdentityValueProvider<PremiseBean> identity();

3. Declare the AnchorLinkCell and set the column cell.

AnchorLinkCell<PremiseBean> acLink=new AnchorLinkCell<PremiseBeanHelper.PremiseBean>("images/icons/add.png",props.prm_name(), "myLinkStyleNameinCSS", new AsyncCallback<PremiseBean>() {

    @Override
    public void onFailure(Throwable caught) {
        Application.handleException(caught);                
    }

    @Override
    public void onSuccess(PremiseBean result) {
        Info.display("AnchorLinkCall Test", result.getPk());                                
    }
});

prm_companyColumn.setCell(acLink);

4. Do the rest steps for the grid

GXT3 Grid Cell with clickable Image and hyperlink

Reference:

1. http://stackoverflow.com/questions/18951897/gwt-imagecell-change-image-dynamically-in-a-datagrid-or-celltable
2. http://stackoverflow.com/questions/4691801/how-can-i-render-a-clickabletextcell-as-an-anchor-in-a-gwt-celltable
3. http://www.gwtproject.org/doc/latest/DevGuideUiCustomCells.html#cell-onBrowserEvent

I want to make the cell table in a grid to show icon and link in a column.
I tried to use anchor but unsuccessful. The cell grid only render text & image but not the event.
I found a solution using ImageCell.
Steps :

1. Set columnconfig
2. Declare ImageCell object
3. override render subroutine
4. Override getConsumedEvents - to expose click event
5.Override onBrowserEvent to handle the event

In this example, it's only handle the first child element, so I just group the image & link in a div.

ColumnConfig<PremiseBean, String> prm_nameColumn = new ColumnConfig<PremiseBean, String>(props.prm_name(), 150, "Name");
        
ImageCell ic = new ImageCell() {

    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context, String value, SafeHtmlBuilder sb) {
        sb.appendHtmlConstant("<div class=\"myClickableCellTestStyle\" style='cursor: pointer'/>");
        sb.appendHtmlConstant("<img src='images/icons/add.png' style='cursor: pointer'/> ");
        sb.append(SafeHtmlUtils.fromTrustedString(value));
        sb.appendHtmlConstant("</div>");
    }

    @Override
    public Set<String> getConsumedEvents() {
        Set<String> events = new HashSet<String>();
        events.add("click");
        return events;
    }

    @Override
    public void onBrowserEvent(com.google.gwt.cell.client.Cell.Context context, Element parent, String value, NativeEvent event, ValueUpdater<String> valueUpdater) {
        super.onBrowserEvent(context, parent, value, event, valueUpdater);
        if (parent.getFirstChildElement().isOrHasChild(Element.as(event.getEventTarget()))) {
            Console.writeLine("OnEvent");
            Info.display("Test", value);
        }
    }
};
prm_nameColumn.setCell(ic);

add style to css.

.myClickableCellTestStyle{
    text-decoration:underline;
}