Marking TableView's row by mouse click

Question

I am trying to create editable panel for a day schedule. I created TableView with 24 rows, which representing hours. Now i would like to mark each hours by mouse click and i stuck with that.

Please describe your current approach and what exactly your problem is (getting the mouse interaction right, choosing a suitable class to use as item or...). Also how do you "mark" a cell? Set the backgound color, check a checkbox / set a different text in the table cell? The question is currently a bit too broad and there should be more than enough Q&A for working with `TableView` on this site. — fabian, Mar 14 '16 at 14:32
[jfxtras](http://jfxtras.org) has an agenda control, perhaps you would be better off using that than creating your own. — jewelsea, Mar 15 '16 at 19:23

score 1 · Accepted Answer · edited May 23 '17 at 12:07

I'm not sure, whether I understood your question, but if you want to let a TableRow react on MouseClicks you could do it this way:

(You could possibly also add a listener to the TableViews selectionModel, this is just one approach of many)

@Override
public void start(Stage primaryStage) throws Exception {
    TableView<String> table = new TableView<String>();
    // Add rows
    for (int hour = 1; hour <= 24; hour++) {
        table.getItems().add(String.valueOf(hour));
    }
    TableColumn<String, String> tableColumn = new TableColumn<String, String>("Hours");
    // We only show Text
    tableColumn.setCellValueFactory(data -> new SimpleStringProperty(data.getValue()));
    table.getColumns().add(tableColumn);
    // Stretch column to tableViews width
    table.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
    // We create our own TableRows and listen on Clicks. You could also add
    // a listener to the tableViews selectionModel, but I like this way
    // more.
    table.setRowFactory(tableView -> {
        TableRow<String> row = new TableRow<String>();
        // If a row of our table is clicked...
        row.setOnMouseClicked(new EventHandler<MouseEvent>() {

            @Override
            public void handle(MouseEvent mouseEvent) {
                // If not already applied we add a css-class defined 
                // in style.css.
                if (!row.getStyleClass().contains("marked")) {
                    row.getStyleClass().add("marked");
                }
                // ... 
            }
        });
        return row;
    });
    // The uninteresting stuff...
    Scene scene = new Scene(table, 50, 600);
    scene.getStylesheets()
            .add(getClass().getResource("/com/stackoverflow/marktablerows/style.css").toExternalForm());
    primaryStage.setScene(scene);
    primaryStage.show();
}

And com/stackoverflow/marktablerows/style.css:


    .marked{
        -fx-background-color:linear-gradient(to right, lightblue, blue);
        -fx-background-radius:10px;
        -fx-font-weight:bold;
    }

Image

edit: Take a look at Programmatically change the TableView row appearance

Works perfectly for me. Could you tell me how refer to specific row? I try to do something like that: `tableView.getRow(rowIndex).getStyleClass().add("marked");` — fiman, Mar 16 '16 at 19:37
You can't get the reference of a specific row from a TableView by row-index without hacks. You could store the TableRow you create inside a List and then use :List.get(rowIndex). This will work for rows, that are (or were) already created. — Manuel Seiche, Mar 16 '16 at 22:56

Marking TableView's row by mouse click

1 Answers1