create link in table cell and open float popup by click from it

Question

I have a CellTable and need a column with hyper links and onclick handlers inside cells. 1st question, what am doing wrong if I have:

Column<MyObject, Anchor> linkColumn = new Column<MyObject, Anchor>(
    new AnchorCell()) {
    @Override
    public Anchor getValue(final obj) {
    Anchor link = new Anchor("link");
    link.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
        Window.alert("clicked ");
        }
    });
    return link;
    }
};
cellTable.addColumn(linkColumn, "link column");

...

public class AnchorCell extends AbstractCell<Anchor> {
@Override
public void render(Context context, Anchor h, SafeHtmlBuilder sb) {
    sb.append(SafeHtmlUtils.fromTrustedString(h.toString()));
}
}

-but clicking to link - happens nothing

and 2nd question: what's better way to open float (based on div or so, not separated browser window) pupup with text contents from that ClickHandler?

Jampacked

Answer 1

In a CellTable, you aren't adding the Anchor widget to the table. You're just adding some HTML. None of the widget's functions will work as they normally would, because the widget is not actually in the table.

You can override onBrowserEvent to get events like clicking on the cells. These events still happen because they are native to the browser and don't need the widget framework to propagate. I think this is the best way to achieve the effect you want.

Loch

I need just handle click event from the link, which is in the table cell. In plain html/js I'd have <a ... onclick="alert(..)"/>. How can I get it with GWT - adding Anchor widget to the table or coding onBrowserEvent? – Jampacked

You can always just add your plain html from the renderer - you don't need a widget. sb.append(SafeHtmlUtils.fromTrustedString("<a onclick=\"alert(..)\"/>")); – Loch

I see, thanks. But it's a way back to html/js programming what GWT is opposed to... so I'm puzzled: if there really no standard way in GWT to do just <td><a... onclick="alert();return false;"></td> ? – Jampacked

They left the normal GWT patterns out of the CellTable widgets to speed them up. If you want all of the GWT patterns back, you might as well make a normal Grid of anchors. You might find an intermediate solution - you can call a GWT function from javascript ( code.google.com/support/bin/answer.py?hl=en&answer=75695 ), so write the code in Java you want and then just use the little snippet of native JS to call it. All browsers have the same syntax for calling a function~ – Loch

Answer 2

I have a similar setup as you. A CellTable (now a DataGrid) with hyperlinks in it, but I want to popup an editor widget when the user clicks in the cell but not on the link-y bit. If he clicks on the link, I want the normal HTML behaviour.

Create your column using the ClickableTextCell class. What's stored in the cell? A string ID into my database of user records, which includes the name and email of the user. When I create the column, I override the render method so that the information is rendered as a email link:

Column<RowType, ColumnType> emailColumn = new Column<RowType, ColumnType>(new ClickableTextCell()){

    @Override
    public void render(Context context, T object, SafeHtmlBuilder sb) {
    /* Code that pulls the value in this column at this row, uses 
     * it to look up the name and the email, then does sb.appendX 
     * to build up the "<a href='emaillink'>name</a>" SafeHtml
     * construction.
     */
    }

 };

Actually, I have a subclass of Column, but you get the idea.

Voila, an active HTML link on your page, but a clickable text cell underneath. I found this a lot easier than dealing with browser events.

I use the same structure for many of my cells. ClickableTextCells underneath, and type-specific rendering code to present it to the user in the format expected. In particular, we have a dynamic picklist type of field -- that is, the picklist is not known until the click occurs. The standard selectionCell requires the list of picks to be established once at construction time, which is what got me to this solution. So instead of a standard SelectionCell dropdown, which wouldn't work anyway without some serious work**, I use this technique. When the ClickableTextCell fires, I have set the FieldUpdater to construct a popup with a DataGrid in it, this DataGrid listing the current set of legal values for this selection (as determined by the current state of the database). When the user makes his selection and hits the Save button, the popup closes, the middleware is called to update his choice, the updated row data is returned via that RPC call, the data returned being used to update the internal client-side database, which triggers an update of all the ListDataProviders driving the DataGrids, which automatically updates the main DataGrid (and any other DataGrid potentially visible on the screen).

Actually, my solution has extended the ClickableTextCell into a DoubleClickableTextCell so that you need to double-click to activate the editor. Not required, of course, but it allows for the user to idly click around the grid without popups exploding in front of him.

** Besides the dynamic aspect, this dynamic selections can be very long lists, so a dropdown is a poor choice. Better to present a DataGrid that the user can scroll through, search, filter, and so on.

Strobila

thanks, just wonder if there is an OOP way to code <td><a... onclick="alert();return false;">link</a></td> with GWT but w/o coding javascript inside java Strings... – Jampacked