GWT CellList... when item clicked, previously clicked item loses its style

Question

I have GWT CellList and after adding items via a DataProvider I use the following code to add styling to each item.

members... we can styling if a matched item is also in members
matched... passed in as a MetaJsArray<Contact>

CellList<Contact> list = getView().getResults();
for (int i=0; i<matched.length(); i++) {
    if (members.isExistingEntry(matched.get(i))) {
        list.getRowElement(i).addClassName("RED");
    }
}

This code works until... I click items in the list.

onCellPreview() is called for each item clicked, but the previously clicked item loses its "RED" styling.

Do I need to add styling differently? Or how do I stop the loss of "RED"?

Answer 1

My guess its something to do the way GWT generates the javascript. When you manually set the cell on load its all good. When you select it, the javascript changes the object to use the selected CSS and when you un select it, the CSS changes to the default GWT CSS style for the cell.

Only way I can think of is to have a handler on select. When you select an item:

selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {
                public void onSelectionChange(SelectionChangeEvent event) {
                  // get item last selected
                  // check if needs re styling
                  // restyle
                  // do things with the new selected object
                }
              });

Add another check through the cell list and mark the ones that got unmarked. This way might be inefficient, but its one way of avoiding your problem that I can think of. hope it helps.

Answer 2

After trying various approaches the only want that works, without hacks, is to define the style at the point of rendering.

With my own ContactCell extending AbstractCell the render() function can pass in a styling value into the contactcell.ui.xml file.

@Override
public void render(Context context, Contact value, SafeHtmlBuilder sb) {
    if (value == null) {
        return;
    }

    String styling = value.getStyling();
    uiRenderer.render(sb, styling);
}

and then in contactcell.ui.xml file

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
    <ui:with field='styling' type='java.lang.String'/>

    <div class="{styling}"> ... </div>

GWT will mangle the style name so define your own CssResource class to access the class name thru so that the class name is mangled throughout the app.