GWT CellTable or similar

Question

Working on a GWT app that needs something like a CellTable to display and edit data. The extra requirements I have that I have not seen covered in CellTable examples:

Multiple header rows. I don't really need a header row as such, but every few rows (4-10) of data I'd like something like a header (basically explains how the next 'n' items are related)
Based on some data (current date and dates specified in an object), some of the fields should be non editable. I've found examples on how to make a column non editable, but how do I map that back through to actual data from the custom renderer? (i.e. the data object corresponding to the row - should be easy, but I'm missing something...)

Can I do this with the CellTable? Is there a better Widget I should be looking at? I know I could do it all in a Grid, but the CellTable looks much better!

Thanks.

Answer

Expanding on Thomas Broyer's answer below I've managed to get the non editable stuff going. I never really expected the "header rows" to be easy, so the editing was the main part.

As I commented below, I didn't find any simple, easy to follow example that showed me the whole picture. I managed to piece it together from a few different sources.

If anyone has any comments or I've missed something obvious: let me know!

// Step 1: Create a cell (in this case based on text)
class MyEditTextCell extends EditTextCell {
    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context,
            String value, SafeHtmlBuilder sb) 
    {
        bool editable = true;
        // TODO: What goes here?

        if (!editable) {
        sb.appendHtmlConstant("<div contentEditable='false' unselectable='true'>" + value + "</div>");
    }
    else {
            super.render(context, value, sb);
        }
    }
}

// It gets used to add a column to the table like this
final MyEditTextCell myCell = new MyTextCell();
Column<RowType, String> nmyCol = new Column<RowType, String>(myCell) {
    @Override
    public String getValue(RowType o) {
        return o.someMethod(); // This gets the particular row out of your column.
    }
};
table.addColumn(myCol, "Heading");

So all of that worked fairly easily, but I still couldn't figure out the TODO of using the row. It all cam together with another example that dealt with KeyProviders. The KeyProvider provides a link from the Context you get in the render() method of the cell and the row that the cell belongs to. It does this via an index (which is just an Object).

So you end up with:

// Step 2: Cell can get the row and use it to decide how to draw.
class MyEditTextCell extends EditTextCell {
    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context,
            String value, SafeHtmlBuilder sb) 
    {
        Object key = context.getKey();
        // What the key is is uo to you: if could be an Integer that indexes into
        // a collection of objects, it could be a key for a hashmap. I'm guessing
        // it could even be the real object itself (but I haven't tried that...)
        // e.g.
        boolean editable = true;
        int index = ((Integer)key).intValue();
        RowType row = myRowCollection.get(index);
        if (row != null) {
            if (/*some condition on the row*/) {
                editable = false;
            }
        }
        if (!editable) {
        sb.appendHtmlConstant("<div contentEditable='false' unselectable='true'>" + value + "</div>");
    }
    else {
            super.render(context, value, sb);
        }
    }
}

// Key provider links gets a unique id from the rows - I just used an in.
// This gets provided to the CellTable on creation
// e.g. CellTable tab = new CellTable(LEY_PROVIDER);
//
private static final ProvidesKey<RowType> KEY_PROVIDER = new ProvidesKey<RowType>() {
    public Object getKey(RowType item) {
        return Integer.valueOf(item.getId());
    }
};

Thomas Broyer Thomas Broyer · Accepted Answer · 2012-06-04T02:24:35

Multiple header rows. I don't really need a header row as such, but every few rows (4-10) of data I'd like something like a header (basically explains how the next 'n' items are related)

(aka grouping rows)
GWT 2.5 (to be released in a month or so) will add CellTableBuilder which lets you change how CellTable builds its view from its model.
You can see an example in action here (not the same use-case as yours though: adds child rows rather than grouping rows): http://showcase2.jlabanca-testing.appspot.com/#!CwCustomDataGrid
In your case, the tricky part is to detect when to insert a grouping row.

Based on some data (current date and dates specified in an object), some of the fields should be non editable. I've found examples on how to make a column non editable, but how do I map that back through to actual data from the custom renderer? (i.e. the data object corresponding to the row - should be easy, but I'm missing something...)

Your best bet is to use a custom Cell that takes a row object value (so it can decide whether the cell should be editable) but only displays/edits a field/property of that object.
You should be able to defer the rendering and event handling to either a TextInputCell or EditTextCell if the value is editable, and a TextCell otherwise.

The tricky part is if the condition to make the column editable depends on properties that are themselves editable. In that case, you'd have to trigger a refresh of the table (at least the modified row) so the conditionally editable column is refreshed.
In that case, I think you'd have better chances by using a custom Cell that always renders the same initially but can switch to editable mode (similar to EditTextCell); and do the is that value editable computation when handling the event, and conditionally refuse to switch to edit mode.
You should be able to copy/paste a lot from EditTextCell here.

GWT CellTable or similar

Answer

1 Answers