Why can't I use GWT Button in a CellTable and how to combine cell buttons with cell text

Question

I want to put some text and severals Buttons in a CellTable. I can display the text and buttons, but when I click on a button, nothing happens.

final SafeHtmlCell detailsCell = new SafeHtmlCell();
    Column<UIRow, SafeHtml> detailsColumn = new Column<UIRow, SafeHtml>(
            detailsCell) {
        @Override
        public SafeHtml getValue(UIRow object) {
            String details = "some informations xxx <br/>";

            Button addButton = new Button("Add value", new ClickHandler() {
                public void onClick(ClickEvent event) {
                  Window.alert("hello");
                }
            });
            details += addButton;

    SafeHtmlBuilder sb = new SafeHtmlBuilder();
            sb.appendHtmlConstant(details);

            return sb.toSafeHtml();
        }
    };
    detailsColumn.setCellStyleNames(CSS_DETAILS_TD);
    table.setColumnWidth(detailsColumn, "10%");
table.addColumn(detailsColumn, new SafeHtmlHeader(SafeHtmlUtils.fromSafeConstant("details")));

But, if I put a Button per Cell, it's working, onClick method is called:

        final ButtonCell btnCell = new ButtonCell() {
            @Override
            public void render(
                    final Context context,
                    final SafeHtml data,
                    final SafeHtmlBuilder sb) {
                sb.appendHtmlConstant("<button type=\"button\" style=\"height: 25px\" title=\"submit\" class=\"btn btn-success btn-small\" tabindex=\"-1\">");
                if (data != null) {
                    sb.append(data);
                }
                sb.appendHtmlConstant("</button>");
            }
        };

        Column<UIRow, String> btnColumn = new Column<UIRow, String>(btnCell) {
            @Override
            public String getValue(UIRow object) {
                return "";
            }
        };
        btnColumn.setCellStyleNames("td-actions");
        table.addColumn(btnColumn, "");
        table.setColumnWidth(btnColumn, "5%");

        btnColumn.setFieldUpdater(new FieldUpdater<UIRow, String>() {
            public void update(int index, UIRow object, String value) {

               ...

                service.submit(object, false, new AsyncCallback<String>() {

                    @Override
                    public void onFailure(Throwable caught) {
                        Window.alert(caught.getMessage());
                    }

                    @Override
                    public void onSuccess(String result) {
                        Window.alert(result);
                    }

                });

            }
        });
    }

I want to display Html text and Buttons in one Col/Cell, is it possible ?

Thanks

Answer 1

Cell widgets (CellTable, DataGrid, etc) are not designed to embed regular GWT widgets like Button.

For buttons you can use ButtonCell

Take a look at official example: http://samples.gwtproject.org/samples/Showcase/Showcase.html#!CwCellSampler

Update:

As for the second part of the question regarding how to combine cells, there is a few options:

• Check out CompositeCell where you can combine multiple cells (eg ButtonCell and TextCell).

• Another option is to use custom CellTableBuilder where you can customize all aspects of table rendering like colspans, column/row decorations, etc