gwttooltipcelltable

How to add tooltips to ButtonCells in a GWT CellTable?


I have a CellTable in GWT, where the last column is a ButtonCell. I wanted to add tooltips to the buttons, based on an attribute of the object used. The problem is that each object has different values for that attribute, but GWT displays the same tooltip text for all the buttons(taken from the last row of the table). Any tips?

final ButtonCellDefinitionExtended<MyObject> def = new ButtonCellDefinitionExtended<MyObject>() {
            @Override
            public boolean isVisible(MyObject bean) {
                return bean.getAttribute1() != null;
            }
            @Override
            public String getTooltip(MyObject bean) {
                return bean.getAttribute2(); //doesn't work
            }
        };

The class:

public class ButtonCellDefinitionExtended<T> extends CellColumnDefinition<T, String> {
    private String tooltipText;
    private TooltipCellDecorator<String> cellDecorator;
    private ButtonCell buttonCell;

    public ButtonCellDefinitionExtended() {
        buttonCell = new ButtonCell();
        cellDecorator = new TooltipCellDecorator<>(buttonCell);
    }

    @Override
    protected Cell<String> getCell() {
        return cellDecorator;
    }

    @Override
    protected String getValueOf(T bean) {
        //Button
        buttonCell.setEnabled(isEnabled(bean));
        buttonCell.setVisible(isVisible(bean));
        //Tooltip
        if (getTooltip(bean) != null) {
            cellDecorator.setText(getTooltip(bean));
        }
        cellDecorator.setPlacement(Placement.LEFT);
        return getButtonText(bean);
    }

P.S: The visibility of the buttons is correctly set for each of them.


Solution

  • You can use AbstractCell and it's render() method to get (almost) any cell you like.

    Note, that the AbstractCell's constructors takes consumedEvents in parameters and you can handle those events in onBrowserEvent() method.

    And note, that consumedEvents are fired for the whole cell, not only for the rendered buttons.

    The easiest way to hide a button is to render nothing ;)

    Working example code for button with tooltip:

    AbstractCell<String> cell = new AbstractCell<String>(ClickEvent.getType().getName()) {
        @Override
        public void render(Context context, String value, SafeHtmlBuilder sb) {
            Button button = new Button("Button " + value);
            button.setTitle(value);
            sb.append(SafeHtmlUtils.fromTrustedString(button.toString()));
        }
    
        @Override
        public void onBrowserEvent(Context context, Element parent, String value, NativeEvent event, ValueUpdater<String> valueUpdater) {
            if(event.getType() == ClickEvent.getType().getName())
                Window.alert("Clicked: " + value);
        }
    };
    
    table.addColumn(new Column<String, String>(cell) {
        @Override
        public String getValue(String object) {
            return object;
        }
    }, "Buttons");
    
    table.setRowData(Arrays.asList("A", "B", "C"));
    RootPanel.get().add(table);
    

    Result: columns with buttons with tooltips:

    columns with buttons with tooltips