1

I am trying to display a scene with a TableView where a user can click to select teams, which are then stored in an ObservableList. The selected teams should be highlighted and clicking a selected team should unselect them. Selecting multiple teams should not require holding down ctrl etc. The problem that I'm having is actually displaying the selected teams. I'm very confused with JavaFX's SelectionModel and FocusModel. I'd also need a functionality where if the user opens the view again to make changes to the selection, the selected teams should appear highlighted again.

Here's a sample of the code I've been working with. So far the selection works but the UI doesn't reflect the actual selection. In the image [1] is shown what I'm trying to achieve, the selection has been done holding ctrl and clicking the items. Again that doesn't reflect the actual selection and having to hold down keys to select multiple items is not viable in this case.

//for the sake of simplicity the Team objects are set here as a placeholder instead of fetching from the database
private Team[] teams = new Team[] {new Team("team1", 0), new Team("team2", 1), new Team("team3", 2), new Team("team4", 3)

private ObservableList<Team> selectedTeams = FXCollections.observableArrayList();

@FXML
private TableView<Team> teamsTableView; 
@FXML
private TableColumn<Team, String> teamNameColumn; 
@FXML
private TableColumn<Team, Integer> teamIdColumn; 

@Override
public void initialize(URL arg0, ResourceBundle arg1) {

    teamNameColumn.setCellValueFactory(new PropertyValueFactory<Team, String>("teamName"));     
    teamIdColumn.setCellValueFactory(new PropertyValueFactory<Team, Integer>("id")); 

    teamsTableView.setItems(teams);

    teamsTableView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
    
    teamsTableView.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<Team>() {

        @Override
        public void changed(ObservableValue<? extends Team> observable, Team oldValue, Team newValue) {
            if(selectedTeams.contains(newValue)) {
                selectedTeams.remove(newValue);
            } else {
                selectedTeams.add(newValue);                    
            }
        }
    });
}

What approach should I try to take? Could the SelectionModel reference an ObservableList somehow?

I've been working on this for over two weeks now and I'm completely stumped. This is clearly beyond my abilities and some hand-holding might be necessary.

TeamPickerView with teams in a TableView

griffith97
  • 53
  • 4
  • Note you don't necessarily need a separate observable list as `MultipleSelectionModel` has a `selectedItems` observable list, which will track which items are selected for you. As for not needed to hold down e.g., CTRL, my first thought was to add an on-clicked or an on-pressed handler to each row (via the row factory) which selected and deselected the row (using the selection model). I couldn't get that to quite work (either other functionality was broken, or the row was immediately deselected). – Slaw Mar 16 '22 at 21:44
  • [mcve] please.. – kleopatra Mar 16 '22 at 23:10

0 Answers0