GWT CellTable-Need to have two buttons in last single cell of each row

Question

I am using CellTable to add columns to it. It works fine when I add rows and single data on each cell.

It has header like Name ,Age, Address with rows below it which contains the values

I now want to have a Actions cloumn in the last with two buttons (Edit and Delete Button) in single cell in on the rows below this column and to capture the button click events acordingly.

Name Age Address   Actions
A    15    123    Edit Delete
B    20    578    Edit Delete    
C

Could you please let me know how to do it.

Thanks

Answer 1

There are two ways to achieve that:

1. Subclass AbstractCell and implement the render method to create two buttons and handle its events (see here for more details).
2. Use a CompositeCell to add two ActionCells

Second approach is easier and cleaner. Here is the code for that:

public void onModuleLoad() {
    CellTable<Person> table = new CellTable<Person>();

    List<HasCell<Person, ?>> cells = new LinkedList<HasCell<Person, ?>>();
    cells.add(new ActionHasCell("Edit", new Delegate<Person>() {

        @Override
        public void execute(Person object) {
           // EDIT CODE
        }
    }));
    cells.add(new ActionHasCell("Delete", new Delegate<Person>() {

        @Override
        public void execute(Person object) {
            // DELETE CODE
        }
    }));

    CompositeCell<Person> cell = new CompositeCell<Person>(cells);
    table.addColumn(new TextColumn<Person>() {

        @Override
        public String getValue(Person object) {
            return object.getName()
        }
    }, "Name");

    // ADD Cells for Age and Address

    table.addColumn(new Column<Person, Person>(cell) {

        @Override
        public Person getValue(Person object) {
            return object;
        }
    }, "Actions");


}

private class ActionHasCell implements HasCell<Person, Person> {
    private ActionCell<Person> cell;

    public ActionHasCell(String text, Delegate<Person> delegate) {
        cell = new ActionCell<Person>(text, delegate);
    }

    @Override
    public Cell<Person> getCell() {
        return cell;
    }

    @Override
    public FieldUpdater<Person, Person> getFieldUpdater() {
        return null;
    }

    @Override
    public Person getValue(Person object) {
        return object;
    }
}

Answer 2

The solution above is perfect!THX. In addition: If you liked to design the buttons in the ActionCell, then you could do this -> In the constructon of the class you can build a html input and in "class" attribute, you can add a css style, which will be used.:

public ActionHasCell(String text, Delegate<Person> delegate) {
        cell = new ActionCell<Person>(text, delegate) {

        public void render(Context context, Person person, SafeHtmlBuilder sb)
        {
            SafeHtml html = SafeHtmlUtils.fromTrustedString("<input type=\"button\" value=\"anynameyouwant\" class=\"cssstylename\" />");
            sb.append(html);
        }

    };
}

This time you don't need the String, but you can pass parameters and use them to build the button.