CODEWITHSUNDEEP
javafxgluongluon-mobile
Javateer
Javateer

Reputation: 65

How do we multi-select from a ListView? I see it working on desktop but not on phone

I found this tip how to expose the SelectionModel for multi-selection when using the CharmListView, but my issue is the same even with the normal ListView.

When I do as shown below, I can select (highlight) multiple list items. Using CTRL or SHIFT on the desktop while mouse clicking, I can choose many items instead of just one at a time. When I test on my phone, only single selection behavior is still what I see as I choose one, then another.

How do we multi-select items on a list when on a mobile device?

@FXML
private CharmListView<Widget, Integer> myWidgetListView;

public void initialize() {

    Platform.runLater(() -> {
        ListView<Widget> innerList = (ListView<Widget>) myWidgetListView.lookup(".list-view");
        innerList.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
    });
}

Upvotes: 1

Views: 507

Answers (1)

Javateer
Javateer

Reputation: 65

I got my multi-select list working. If you click on another list item after already selecting one, both stay highlighted. The 2nd selection does not deselect the 1st. You can select (highlight) the entire list, one list-item selection at a time. For any list-item already selected, to select it again deselects it without changing the selected state of others in the list.

This solution is functional but isn't quite finished. This doesn't yet stop a User from selecting the CharmListView's Header items. Also, when selecting another item, the others that were already selected will flicker. It's more noticeable on desktop than Android. If someone can help tweak what I've done below to stop the flicker, that would help complete this solution.

public class MyPresenter extends GluonPresenter<MyWidgets> {

  @FXML
  private CharmListView<Widget, Integer> charmListView;

  private Set<Integer> selectedIndices = new HashSet<Integer>();

  public void initialize() {

    Platform.runLater(() -> {
      ListView<Widget> innerList = (ListView<Widget>) charmListView.lookup(".list-view");
      innerList.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
      innerList.setOnMouseClicked((event) -> {
          int selectedIndex = innerList.getSelectionModel().getSelectedIndex();
          if(selectedIndices.contains(selectedIndex)) {
            selectedIndices.remove(selectedIndex);        
            innerList.getSelectionModel().clearSelection(selectedIndex);
          }                           
          else {
            selectedIndices.add(selectedIndex);
          }

          for(int index : selectedIndices)
            innerList.getSelectionModel().selectIndices(index);
      });
    });
  }

Upvotes: 0

Related Questions