JavaFX table view with colorpicker editor

Question

I have a TableView that uses ColorPicker colors to display (display / edit) in a cell. The table displays ColorPicker in the desired field, but the changes do not work.

TableColumn<SeriesPreferences, Color> c2 = new TableColumn<SeriesPreferences, Color>("Color"); c2.setCellValueFactory(new PropertyValueFactory<SeriesPreferences, Color>("color")); c2.setCellFactory(new Callback<TableColumn<SeriesPreferences, Color>, TableCell<SeriesPreferences, Color>>() { @Override public TableCell<SeriesPreferences, Color> call(final TableColumn<SeriesPreferences, Color> param) { TableCell<SeriesPreferences, Color> cell = new TableCell<SeriesPreferences, Color>() { @Override public void updateItem(Color c, boolean empty) { if(c != null) { final ColorPicker cp = new ColorPicker(); cp.setValue(c); setGraphic(cp); cp.setOnAction(new EventHandler<javafx.event.ActionEvent>() { public void handle(javafx.event.ActionEvent t) { getTableView().edit(getTableRow().getIndex(), param); commitEdit(cp.getValue()); } }); } } }; return cell; } }); c2.setOnEditCommit(new EventHandler<CellEditEvent<SeriesPreferences, Color>>() { @Override public void handle(CellEditEvent<SeriesPreferences, Color> t) { ((SeriesPreferences) t.getTableView().getItems().get(t.getTablePosition(). getRow())).setColor(t.getNewValue()); } }); 

The edit event handler is not called when I change the color in the color selection, any ideas?

Answer 1

Well, I did a little research on this topic as I had the same problem. I'm afraid to say that JavaFX is simply unusable.

I looked at how others implemented their cells, and the key was that they all used something represented by a string. Now this is the way it always happens with Java: do it on the Java path or you'll be left alone in the rain. The docs for JavaFX are extremely bad at the moment, so I had to try until it worked.

So: To run editCommit -event, you must call setContentDisplay(ContentDisplay. TEXT_ONLY) in updateItem() . This works well if you want to display your data as a string, but it fails completely in cases where colorpicker just does the job.

Alternatively, it may be possible to trigger the event manually. But how do you get the table? I dont know.

Answer 2

There is no need to access the JavaFX POJO (or JavaFX Bean) directly if its properties are correctly bound to the table, and you do not need to call anything other than commitEdit.

The answer from Max Beikirch is misleading, as it causes a choice of color (and with it color) when the table is not in edit mode. This is a workaround to put the table in edit mode, but bad. So do this before showing the color picker when you click on the button:

Write your cell using the color set as follows:

 public class ColorTableCell<T> extends TableCell<T, Color> { private final ColorPicker colorPicker; public ColorTableCell(TableColumn<T, Color> column) { this.colorPicker = new ColorPicker(); this.colorPicker.editableProperty().bind(column.editableProperty()); this.colorPicker.disableProperty().bind(column.editableProperty().not()); this.colorPicker.setOnShowing(event -> { final TableView<T> tableView = getTableView(); tableView.getSelectionModel().select(getTableRow().getIndex()); tableView.edit(tableView.getSelectionModel().getSelectedIndex(), column); }); this.colorPicker.valueProperty().addListener((observable, oldValue, newValue) -> { if(isEditing()) { commitEdit(newValue); } }); setContentDisplay(ContentDisplay.GRAPHIC_ONLY); } @Override protected void updateItem(Color item, boolean empty) { super.updateItem(item, empty); setText(null); if(empty) { setGraphic(null); } else { this.colorPicker.setValue(item); this.setGraphic(this.colorPicker); } } } 

If you're on Java 7, replace lambdas with anonymous inner classes, but it should work as well. Full blog post here .

Answer 3

I had the same problem for CheckBoxTableCell and DatePickerTableCell and ColorPickerTableCells: - (

I mean the following: in control events, I return POJO objects that are used by " ((Inputs) getTableView (). GetItems (). Get (getTableRow (). GetIndex () ", and I update the similar one as it is done in OnEditCommit method ...

So for me it looks like this (refresh the color):

  ((Inputs) getTableView().getItems().get( getTableRow().getIndex()) ).setColor(cp.getValue()); 

Here is an example with ColorPickerCell

 public class ColorPickerTableCell<Inputs> extends TableCell<Inputs, Color>{ private ColorPicker cp; public ColorPickerTableCell(){ cp = new ColorPicker(); cp.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent event) { commitEdit(cp.getValue()); updateItem(cp.getValue(), isEmpty()); ((Inputs) getTableView().getItems().get( getTableRow().getIndex()) ).setColor(cp.getValue()); } }); setGraphic(cp); setContentDisplay(ContentDisplay.GRAPHIC_ONLY); setEditable(true); } @Override protected void updateItem(Color item, boolean empty) { super.updateItem(item, empty); cp.setVisible(!empty); this.setItem(item); cp.setValue(item); } } 

With this simple JavaFX POJO:

  public ObjectProperty<Color> color = new SimpleObjectProperty<Color>(); this.color = new SimpleObjectProperty(color); public ObjectProperty<Color> colorProperty() { return color; } public void setColor(Color color2) { color.set(color2); } 

I don’t know if this is a good way to achieve this, but it worked for me ... Please note that JavaFX POJO is only available in the "ActionEvent" request (combobox, datepicker, colorpicker, etc.)

Hi,

Answer 4

This is, as Michael Simons said in a comment on OP. You must be in edit mode. When creating your own custom cells, you can start the editing mode manually by calling startEdit(); from inside TableCell.

for example using focusProperty of your control:

  cp.focusedProperty().addListener((observable, oldValue, newValue) -> { if (newValue) { startEdit(); } });