How can I style CellList items on a per-item basis?

Question

I have a CellList in GWT 2.5. Each cell item is a class based on AbstractCell and defined in a UiBinder file.

How can I set different styles for each item? I'd like some to appear in a "disabled" style and others in an "active" style.

This is the content from my .ui.xml file. I've not included the style definitions or UiBinder scaffolding.

<div class="{style.contact}">
    <div>
        <div>
            <img class="{style.photo}" src="{photo}"/>
        </div>
        <div class="{style.names}">
            <div>
                <p><ui:text from="{name}"/></p>
                <p><ui:text from="{jobTitle}"/></p>
                <p><ui:text from="{company}"/></p>
            </div>
        </div>
    </div>
</div>

Answer 1

Use CellList.getRowElement():

cellList.getRowElement(3).addClassName("css-disabled");
cellList.getRowElement(4).addClassName("css-active");

Answer 2

You can achieve adding styles names by overriding the render() method of your cell as follows -

@Override
public void render( com.google.gwt.cell.client.Cell.Context context, T value, SafeHtmlBuilder sb )
{   
    if( disable condition met )
    {
            // Apply disabled style
        sb.appendHtmlConstant( "<div class='css-style-disabled' >"+ value+" </div>" 
    } 
    else
    {
            super.render( context, value, sb );
    } 
}

So, add css-style-disabled class to your css file start styling it.

Answer 3

texasbruce's answer is the solution but if you are using a ListDataProvider then you'll need to modify the timing of any call to addClassName() thus:

new Timer() {
    @Override
    public void run() {
        << call cellList.getRowElement(0).addClassName("css-disabled") here >>;
    }
}.schedule(1);