JavaFX - RadioButtons in TableCell with Add Data Button

Question

I'm currently working on an application where I use a TableView including RadioButtons in one TableCell. For that I created an own RadioButtonCell class. I also have a "Add new Row"-Button to let the user add some additional rows. After clicking the "Add" button a third time, I get more RadioButtonCells than rows. I don't find the mistake in my code.

Here a screenshot after clicking the Button a third time:

RadioButtonCell:

import java.util.EnumSet;

import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Pos;
import javafx.scene.control.RadioButton;
import javafx.scene.control.TableCell;
import javafx.scene.control.Toggle;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.HBox;

public class RadioButtonCell> extends TableCell{

    private EnumSet enumeration;

    public RadioButtonCell(EnumSet enumeration) {
        this.enumeration = enumeration;
    }

    @Override
    protected void updateItem(T item, boolean empty)
    {
        super.updateItem(item, empty);
        if (!empty) 
        {
            // GUI
            HBox hb = new HBox(7);
            hb.setAlignment(Pos.CENTER);
            final ToggleGroup group = new ToggleGroup();

            // create a radio button for each 'element' of the enumeration
            for (Enum enumElement : enumeration) {
                RadioButton radioButton = new RadioButton(enumElement.toString());
                radioButton.setUserData(enumElement);
                radioButton.setToggleGroup(group);
                hb.getChildren().add(radioButton);
                if (enumElement.equals(item)) {
                    radioButton.setSelected(true);
                }
            }

            // issue events on change of the selected radio button
            group.selectedToggleProperty().addListener(new ChangeListener() {

                @SuppressWarnings("unchecked")
                @Override
                public void changed(ObservableValue observable,
                        Toggle oldValue, Toggle newValue) {
                    getTableView().edit(getIndex(), getTableColumn());
                    RadioButtonCell.this.commitEdit((T) newValue.getUserData());
                }
            });
            setGraphic(hb);
        } 
    }
}

Model:

public class Points {

    private final SimpleObjectProperty participation = new SimpleObjectProperty(); // radio buttons


    public static enum Participation {
        NONE, HALO, BORDER;

        public String toString() {
            return super.toString().toLowerCase();
        };
    }

    /**
     * Constructor.
     * @param 
     */
    public Points(Participation p) {

        this.participation.setValue(p);

    public void setParticipation(Participation p){
        participation.set(p);
    }

    public Participation getParticipation(){
        return participation.get();
    }

    public SimpleObjectProperty ParticipationProperty() {
        return participation;
    }
}

FXML:

Controller:

    public class DataOverviewController {
        @FXML
        private TableView pointsDataTable;

        @FXML
        private TableColumn pointsBackgroundColumn;

        @FXML
        private Button pointsButtonAdd;

        public DataOverviewController() {
        }

        @FXML
        private void initialize() {
            // select multipe rows, make rows editable
            pointsDataTable.setEditable(true);
            pointsDataTable.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
            linesDataTable.setEditable(true);

             pointsBackgroundColumn.setCellFactory((param) -> new RadioButtonCell(EnumSet.allOf(Participation.class)));
             pointsBackgroundColumn.setCellValueFactory(new PropertyValueFactory("Participation"));
             pointsBackgroundColumn.setOnEditCommit(
                        new EventHandler>() {
                            @Override
                            public void handle(CellEditEvent t) {
                                ((Points) t.getTableView().getItems().get(
                                    t.getTablePosition().getRow())
                                    ).setParticipation(t.getNewValue());
                            }
                        }
                    );

        public void setMainConfig(MainConfig mainConfig) {
            // Add observable list data to the table
            pointsDataTable.setItems(mainConfig.getTableDataPoints());
        }

        @FXML
        private void handleAddPoints() {
            // create new record and add it to the tableview
            Points dataPoints = new Points(0, "Points", "TabFileName.tab",Participation.NONE, false, false, 18, "new");
            pointsDataTable.getItems().add(dataPoints);
        }
    }
}

I reduced my code to the important parts. Maybe someone can help? Thanks.

fabian · Accepted Answer

Items can be added as well as removed from TableCells. This means you need to handle the case where the TableCell becomes empty by undoing any changes done to the cell when a item was added. Otherwise there may be TableCells that look as if they contain a item although they are actually empty.

A updateItem method should look like this:

@Override
protected void updateItem(T item, boolean empty) {
    super.updateItem(item, empty);

    if (empty) {
        // modifications to restore the empty state
    } else {
        // customized way of displaying the item
    }
}

Furthermore I do not recommend recreating the Nodes for displaying the item in the cell every time the item is changed, since this means you'll have a lot of unnecessary node creations which is the thing TableView is trying to avoid by reusing cells. Store them in fields and keep them for later use instead.

JavaFX - RadioButtons in TableCell with Add Data Button

Answers (1)

Related Questions