Want to Implement 'Mark as Read' feature in GWT Cell List

Question

I want to implement this example of celllist with one modification. I want to make each row to a grey color once its clicked by someone. It should persist there, and not change as the user clicks on another row. It's okay if its gone once a new server call is made. I'm doing this to mark it as a 'read message' for the user. Any clues?

I overrided (updated) the css style of cellList as below but when I inspect I dont see the 'myCss' style being applied .

CellListStyles.css

@external .dataView-cellListWidget;
@external .dataView-cellListEvenItem;
@external .dataView-cellListOddItem;
@external .dataView-cellListKeyboardSelectedItem;
@external .dataView-cellListSelectedItem;

.dataView-cellListWidget{}
.dataView-cellListEvenItem{}
.dataView-cellListOddItem{}
.dataView-cellListKeyboardSelectedItem{}
.dataView-cellListSelectedItem{} 


.dataView-cellListWidget {

}

@external .dataView-cellListEvenItem .myCss{
    background-color: aqua;
}

@external .dataView-cellListOddItem .myCss{
    background-color: aqua;
}

.dataView-cellListEvenItem,.dataView-cellListOddItem {
    cursor: pointer;
    padding: 2px 5px;
    zoom: 1;
}

@external .dataView-cellListKeyboardSelectedItem .myCss{
    background-color: red;
}
.dataView-cellListKeyboardSelectedItem {
    background: #ffc;
}

.dataView-cellListSelectedItem {
    background-color: #FFCBC1;
    color: #121212;
    height: auto;
    overflow: visible;
}

Answer 1

One way to do it will be add a class to the selected object and apply css. you might have to override cellList resource css. to override cellList resource css have a look here.

selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {
  public void onSelectionChange(SelectionChangeEvent event) {
    contactForm.setContact(selectionModel.getSelectedObject());

    /** for setting it selected**/        

    add a class to the selected object here instead of setting background. And set background as grey using css. 
  }
});

Edit :

A tried my own suggestion and it works. you need to override the resource.

Some sample code.

Apply resources to celllist :

i have created 2 interfaces in 2 separate classes

public interface DataViewCellListResources extends CellList.Resources
{
@Import(value = {DataViewCellListStyles.class})
@Source("sortListStyle.css")
DataViewCellListStyles cellListStyle();
} 


@ImportedWithPrefix("dataView")
public interface DataViewCellListStyles extends CellList.Style
{
}

        final CellList<Contact> cellList = new CellList<Contact>(new ContactCell(),
            (Resources) GWT.create(DataViewCellListResources.class), keyProvider);

use this in sortListStyle.css

@external .dataView-cellListWidget;
@external .dataView-cellListEvenItem;
@external .dataView-cellListOddItem;
@external .dataView-cellListKeyboardSelectedItem;
@external .dataView-cellListSelectedItem;

.dataView-cellListWidget{}
.dataView-cellListEvenItem{}
.dataView-cellListOddItem{}
.dataView-cellListKeyboardSelectedItem{}
.dataView-cellListSelectedItem{} 

declare above css in your application css files P.S. added 2 new classes for showing visited

.dataView-cellListWidget {

}

.dataView-cellListEvenItem.myCss{
    background-color: aqua;
}

.dataView-cellListOddItem.myCss{
    background-color: aqua;
}

.dataView-cellListEvenItem,.dataView-cellListOddItem {
    cursor: pointer;
    padding: 2px 5px;
    zoom: 1;
}

.dataView-cellListKeyboardSelectedItem .myClass{
    background-color: red;
}
.dataView-cellListKeyboardSelectedItem {
    background: #ffc;
}

.dataView-cellListSelectedItem {
    background-color: #FFCBC1;
    color: #121212;
    height: auto;
    overflow: visible;
}

Render a hidden field to indicate selected

    private static class ContactCell extends AbstractCell<Contact>
{

    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context, final Contact value, SafeHtmlBuilder sb)
    {
        if (value != null)
        {
            sb.appendEscaped(value.name);
            sb.append(new SafeHtml()
            {

                @Override
                public String asString()
                {
                    return "<input type=\"hidden\" id=\"" + value.isSlected + "\"/>";
                }
            });
        }
    }
}

Selection Model :

        selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler()
    {

        @Override
        public void onSelectionChange(SelectionChangeEvent event)
        {

            Contact selectedObject = selectionModel.getSelectedObject();
            selectedObject.isSlected = true;


            Element element = cellList.getElement();
            NodeList<com.google.gwt.dom.client.Element> elementsByTagName = element.getElementsByTagName("input");
            for (int i = 0; i < elementsByTagName.getLength(); i++)
            {
                com.google.gwt.dom.client.Element item = elementsByTagName.getItem(i);
                if (item.getId().equals("true")) item.getParentElement().addClassName("myCss");
            }
        }
    });

Answer 2

You mean something like this:

Did you use a MultiselectionModel ?

private final MultiSelectionModel<MyDTO> serlectionModel = new MultiSelectionModel<MyDTO>(keyProvider);
cellList.setSelectionModel(selectionModel, DefaultSelectionEventManager
                .<MyDTO>createDefaultManager());