GWT CellTable focus on selected row
When I select a row in the CellTable that contains multiple columns, the entire row turns yellow. It doesn't matter which area of the row I click on (which column of the row).
What I am trying to do is keep the selected row colored yellow until no other row of this very table is selected. At the moment, as soon as I click elsewhere in the browser, the string returns the original color.
I tried to use the selection model but it didn't change anything. Do you have any guidelines or is this just not possible since focus is controlled by the browser? The behavior is the same in google showcase for CellTable ...
source to share
The selection model really does what you want to do: it draws a blue line, and the line doesn't change color if you click elsewhere on the page. (Only when selecting another line)
There are two selection models: One, which allows you to select only one row, and the other, which allows you to select multiple rows.
MultiSelectionModel<Row> selectionModel = new MultiSelectionModel<Row>();
table.setSelectionModel(selectionModel);
SingleSelectionModel<Row> selectionModel = new SingleSelectionModel<Row>();
table.setSelectionModel(selectionModel);
source to share
User905374's solution did work. I mentioned in my first post that I already tried the solution with selectionModel
and that it doesn't work. This was partly true. It works, but only if the table does NOT contain CheckboxCell
.
After a working and non-working example. I think this might be a bug, but I'm not sure if I missed 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 concatenate multiple cells and add them to the table (eg, LinkActionCell
etc.). Not yet CheckboxCell
, the blue choice SingleSelectionModel
works like a charm. Does anyone see what I am doing wrong with this CheckboxCell
or is there a bug?
UPDATE
It was just a use error. The problem was that I set handlesSelection
in true
(second constructor parameter CheckboxCell
) even thought I was not handling anything. Installing it on false
solves the problem.
Bottom line: Use a selection model (for example SingleSelectionModel
) and don't set the parameter handlesSelection
in the true
constructor CheckboxCell
to true unless you handle the selection yourself.
source to share
You should see a Showcase demo again. This time, check the box in the left column on the left. On selection the row turns blue
indicating row selection. This is when you created the SelectionModel. Click on the page somewhere outside the CellTable / DataGrid . selection is not changed
Now, instead of selecting a row using a checkbox from the first column, you click on a row in any other column. The line turns yellow. Click on the page somewhere outside the CellTable / DataGrid focus/yellow is lost
.
" colored yellow " indicates that the line is in focus and editable and not selected.
Note. you can force a row to be selected using cell click events.
source to share
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 want to highlight more than one line.
source to share
Save the selected row index. When the user selects a row, change the row style to some "selected style" appropriate for your case (defined in your css file) and remove the selected style from the previously selected row. Also don't forget to update the selected row index.
If you have provided some code from the original release, I will gladly help you with some code.
source to share