How to render a GWT widget with a clickhandler GWT with a custom table builder?

Question

I'm trying to use a GWT 2.5rc1 custom tablebuilder to render a subtable for each row in my datagrid. I've followed the example in the 2.5 rc1 showcase (url: http://showcase2.jlabanca-testing.appspot.com/#!CwCustomDataGrid). I'm able to see the newly added sub-rows, but the problem comes when I want to add a clickhandler to a subrow anchor element.. the clickhandler is never invoked, which it seems also quite clear to me since I'm not "registering" the event handler anywhere.

Here the code I'm using now, "relevant part":

private void buildRegRow(Registrazione rowValue,final int absRowIndex, boolean isCommentRow) {
        // Calculate the row styles.
        SelectionModel<? super Registrazione> selectionModel = cellTable.getSelectionModel();
        boolean isSelected =
                (selectionModel == null || rowValue == null) ? false : selectionModel
                        .isSelected(rowValue);
        boolean isEven = absRowIndex % 2 == 0;
        StringBuilder trClasses = new StringBuilder(rowStyle);
        if (isSelected) {
            trClasses.append(selectedRowStyle);
        }

        // Calculate the cell styles.
        String cellStyles = cellStyle;
        if (isSelected) {
            cellStyles += selectedCellStyle;
        }

        if(isCommentRow)
            cellStyles += childCell;

        TableRowBuilder row = startRow();
        row.className(trClasses.toString());

        /*
         * Checkbox column.
         * 
         * This table will uses a checkbox column for selection. Alternatively,
         * you can call dataGrid.setSelectionEnabled(true) to enable mouse
         * selection.
         */
        TableCellBuilder td = row.startTD();
        td.className(cellStyles);
        td.style().outlineStyle(OutlineStyle.NONE).endStyle();
        if (!isCommentRow) {
            renderCell(td, createContext(0), cellTable.getColumn(0), rowValue);
        }
        td.endTD();

        /*
         * View children column.
         * 
         * Displays a link to "show children". When clicked, the list of friends is
         * displayed below the contact.
         */
        td = row.startTD();
        td.className(cellStyles);
        if(!isCommentRow) {
            td.style().outlineStyle(OutlineStyle.NONE).endStyle();
            if(rowValue.hasComments())
                //td.className(CellTableResource.INSTANCE.dataGridStyle().showChildren());
                renderCell(td, createContext(1), cellTable.getColumn(1), rowValue);
        } else {
            td.colSpan(getColumns().size() - 1);

//              // Draw sub-table header
            TableBuilder subTable = td.startTable();
            TableSectionBuilder subTableSection = subTable.startTHead();
            TableRowBuilder tr2 = subTableSection.startTR();
            TableCellBuilder td2 = tr2.startTH();
            td2.text(msgs.date());
            tr2.endTH();
            td2 = tr2.startTH();
            td2.text(msgs.username());
            tr2.endTH();
            td2 = tr2.startTH();
            td2.text(msgs.comment());
            tr2.endTH();
            td2 = tr2.startTH();
            td2.text(msgs.actions());
            tr2.endTH();

            subTableSection.endTR();
            subTable.endTHead();
            subTableSection = subTable.startTBody();
            for(final EntityComment ec : rowValue.getCommentList()) {
                tr2 = subTableSection.startTR();

                // Date
                td2 = tr2.startTD();
                td2.text(DateUtil.getDefaultDateTimeFormat().format(ec.getCreationDate()));
                tr2.endTD();

                // Username
                td2 = tr2.startTD();
                td2.text(ec.getUsername());
                tr2.endTD();

                // Text
                td2 = tr2.startTD();
                td2.text(ec.getText());
                tr2.endTD();

                // Actions
                td2 = tr2.startTD();

                    // Remove
                Anchor removeAnchor = new Anchor("remove");
                removeAnchor.addClickHandler(new ClickHandler() {

                    @Override
                    public void onClick(ClickEvent event) {
                        Window.alert("clicked");
                    }
                });
                td2.html(new SafeHtmlBuilder().appendHtmlConstant(removeAnchor.toString()).toSafeHtml());
                tr2.endTD();

                subTableSection.endTR();
            }
            subTable.endTBody();
            td.endTable();
        }
        td.endTD();

        for(int i = 2; i <= 6; i++) {
            // Recorded, list name, callcenter, msisdn
            td = row.startTD();
            td.className(cellStyles);
            td.style().outlineStyle(OutlineStyle.NONE).endStyle();
            if(!isCommentRow) {
                renderCell(td, createContext(i), cellTable.getColumn(i), rowValue);
            }
            td.endTD();
        }


        row.endTR();
    }

The subtable shows up, with an anchor at the correct position, but the clickhandler is never invoked. I do not know how to write the handler code to the page, like I've done to render the anchor.

Thanks for any help.

Answer 1

I have tried custom tablebuilder and created a grid. You can add any element using the proper structure. Make sure you set the Unique Id to each element you create. Then through code access the element through the following code,

Element e = DOM.getElementById( id );

Cast the element to its proper widget i.e, if you are using text input element you can always cast it to textbox. To cast the element there is one more step which you can google out. Then add the clickhandler or whichever handler you want.