Well It has been quiet long time but I found it would be time for me to blog small post about making the table cell selection in JavaFX. Normally TableView has facility to select the cell or row by using Ctrl,Command (Shortcut Key) and Shift button. You can easily select the data using your keyboards. But when it comes for ease to user interaction using mouse is vital. So today we will go through how to create selection of data by mouse. Lets categorize them in two parts.
TableView has the default selection mode set to SelectionMode.SINGLE and we will need to change this mode to multiple by using
|
1 |
tableView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE); |
For making the TableRow selection in sequence we are going to use simple Mouse Press action. Actually the Table Data (Cells,Rows) has the property of mouse like drag,press,click. So to make the selection of data possible we will have to make use of draggable event of TableRow or TableCell. Lets get in with the TableRow selection by mouse.
TableRow Selection
For the demo we are going to use the Person as an Object data with few properties.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
tableView.setRowFactory(new Callback<TableView<Person>, TableRow<Person>>() { @Override public TableRow<Person> call(TableView<Person> p) { final TableRow<Person> row = new TableRow<Person>(); row.setOnDragEntered(new EventHandler<DragEvent>() { @Override public void handle(DragEvent t) { setSelection(row); } }); row.setOnDragDetected(new EventHandler<MouseEvent>() { @Override public void handle(MouseEvent t) { Dragboard db = row.getTableView().startDragAndDrop(TransferMode.COPY); ClipboardContent content = new ClipboardContent(); content.put(dataFormat, "XData"); db.setContent(content); setSelection(row); t.consume(); } }); return row; } }); private void setSelection(Ind+exedCell cell) { if (cell.isSelected()) { System.out.println("False enter"); tableView.getSelectionModel().clearSelection(cell.getIndex()); } else { System.out.println("Select"); tableView.getSelectionModel().select(cell.getIndex()); } } |
By using the rowFactory implementation we can easily make the selection of the Row by simple using only Mouse Movement. Similar to Row selection we can work on the Cell Selection as well.
TableCell Selection
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
genderCol.setCellFactory(new Callback<TableColumn<Person, Gender>, TableCell<Person, Gender>>() { @Override public TableCell<Person, Gender> call(TableColumn<Person, Gender> p) { final TableCell cell = new TableCell() { @Override protected void updateItem(Object t, boolean bln) { super.updateItem(t, bln); } }; cell.setOnDragEntered(new EventHandler<DragEvent>() { @Override public void handle(DragEvent t) { setSelection(cell, genderCol); } }); cell.setOnDragDetected(new EventHandler<MouseEvent>() { @Override public void handle(MouseEvent t) { Dragboard db = cell.getTableView().startDragAndDrop(TransferMode.COPY); ClipboardContent content = new ClipboardContent(); content.put(dataFormat, "XData"); db.setContent(content); setSelection(cell, genderCol); t.consume(); } }); return cell; } }); private void setSelection(IndexedCell cell, TableColumn col) { if (cell.isSelected() ) { System.out.println("False enter"); tableView.getSelectionModel().clearSelection(cell.getIndex(), col); } else { System.out.println("Select"); tableView.getSelectionModel().select(cell.getIndex(), col); } } |
Regarding this multi-selection we can press the “Ctrl” Key for selecting more rows/cell with existing data selected.
A sample demo is given in the youtube you can check that out : http://youtu.be/lf41ccYPToI
Source Code of the Demo is here : https://github.com/privatejava/javafx-tableview-data-selection
Enjoy Coding. 🙂
Pingback: JavaFX links of the week, February 17 // JavaFX News, Demos and Insight // FX Experience
Nice!
Thank you for the writeup.
Hi, can you help me to load data using a tableview that was created on an fxml file. Please help me, it`s wery important to me.
Hi,
If you like to load data inside the fxml created Tableview firstly you will have to manipulate them in Controller class of that specific FXML. For eg.
And in Controller class create the attribute
and inside initialize() you can populate data by using tbl.setItems(YOUR-DATA-IN-OBSERVABLE-LIST-INSTANCE);
Hi,
This is selecting the cells which is visible in the tableview. Is there a way to auto scroll the table when the selection reaches the last visible row?
Hi Pravin,
well you should probably need to use
table.getSelectionModel().selectFirst();
table.getSelectionModel().select([overloaded params]);
The example works excellent, but if the table has more rows than only the visible rows will get selected, and scrollbar stay put. How can I make the drag to select the rows while scrolling down? Pls le tme know
If you want to do more selection then you can do “Ctrl” key and select the rows
I initiated the selection of the rows by Drag gesture like you mentioned here and i can select all the visible rows, once you reach the end, the table won’t scroll down to select the rest of the rows as you are still draging. How can i achieve that. Thanks for your reply earlier
Pingback: Java desktop links of the week, February 17 – Jonathan Giles