GWT CellTable keep focus on selected row

Question

When I select a row in a CellTable which contains several columns, the whole row gets colored in yellow. It does not depend on which area of the row I click (which column of the row).

What I try to do is to keep the selected row colored in yellow as long as no other row of this very table is selected. At the moment, as soon as I click somewhere else in the browser, the row gets back its original color.

I tried to use a selection model, but this changed nothing. Do you have any advise or is this simply not possible, since the focus is managed by the browser? The behavior is the same in the Google showcase for the CellTable...

Answer 1

The selection model actually does what you want to do: it paints a row blue and the row does not change color if you click elsewhere in the page. (Only when another row is selected)

There are 2 selection models: One that lets you select only one row, and another one that lets you select multiple rows.

MultiSelectionModel<Row> selectionModel = new MultiSelectionModel<Row>();
table.setSelectionModel(selectionModel);

SingleSelectionModel<Row> selectionModel = new SingleSelectionModel<Row>();
table.setSelectionModel(selectionModel);

Answer 2

The solution of user905374 did actually work. I mentioned in my first post that I already tried the solution with a selectionModel and that it did not work. This was partially true. It does work, but only if the table does NOT contain a CheckboxCell.

Following a working and the not working example. I think this might be a bug, but I am not sure if I miss something.

    final CellTable<LicenceDto> licenseTable = new CellTable<LicenceDto>();
    final SingleSelectionModel<LicenceDto> selectionModel = new SingleSelectionModel<LicenceDto>();
    licenseTable.setSelectionModel(selectionModel);

    //--- If I add this column, the selection does work.
    Column<LicenceDto, String> workingColumn = new Column<LicenceDto, String>(new TextCell()) {

        @Override
        public String getValue(LicenceDto object) {
            return "Works";
        }
    };
    workingColumn.setFieldUpdater(new FieldUpdater<LicenceDto, String>() {

        @Override
        public void update(int index, LicenceDto object, String value) {
            ;
        }
    });
    licenseTable.addColumn(workingColumn);


    //--- If I add this column, the selection does NOT work anymore.
    Column<LicenceDto, Boolean> notWorkingColumn = new Column<LicenceDto, Boolean>(new CheckboxCell(true, true)) {

        @Override
        public Boolean getValue(LicenceDto object) {
            return object.getEnabled();
        }
    };
    notWorkingColumn.setFieldUpdater(new FieldUpdater<LicenceDto, Boolean>() {

        @Override
        public void update(int index, LicenceDto object, Boolean value) {
            presenter.enableLicense(object, value);
        }
    });
    licenseTable.addColumn(notWorkingColumn);

You can even combine multiple cells and add them to the table (e.g. LinkActionCell etc). As long as there is no CheckboxCell, the blue selection with the SingleSelectionModel does work like a charm. Does anyone see what I do wrong with this CheckboxCell or is there a bug?

---

UPDATE

It was simply a usage error of me. The problem was that I set handlesSelection to true (second parameter of the CheckboxCell constructor) even thought I don't handle anything. Setting it to false solves the problem.

Bottomline: Use a selection model (e.g. SingleSelectionModel) and do not set the handlesSelection parameter to true of the CheckboxCell constructor to true, if you don't handle the selection by yourself.

Answer 3

You should observe the Showcase demo again. This time use the checkbox on the left most column i.e the first column. On selection the row turns blue indicating the row selection is made. This is when you have SelectionModel set up. Click on the page anywhere outside the CellTable/DataGrid the selection is not changed.

Now, instead of choosing the row via checkbox from first column, you click on a row in any other column. The row turns yellow. Click on the page anywhere outside the CellTable/DataGrid the focus/yellow is lost.

"colored in yellow" indicates row is under focus and being edited and not selected.

Note - you can force row selection by using click events per cell.

Answer 4

Try something like this:

CellTable table;
YourDataObject object = new YourDataObject(...);
SingleSelectionModel<YourDataObject> selectionModel = 
                                     new SingleSelectionModel<YourDataObject>();
table.setSelectionModel(selectionModel);
...
table.setSelected(object, true);

Use MultiSelectionModel if you wish more than one line to be highlighted.

Answer 5

Store the selected row's index. When user selects row, change row's style to some "selected-style" appropriate for your case (defined in your css file) and remove selected style from the previously selected row. Also don't forget to update selected row's index.

If you provide some code from the original version I help you out with some code with pleasure.