JavaFX TableColumn Graphic not Hiding

Question

I'm creating a custom header for my TableColumns that is the label of the column plus a TextField that will allow users to perform searches. I'm setting the column headers like so:

getColumns().addListener(new ListChangeListener<TableColumn<S, ?>>() {
        @Override
        public void onChanged(final ListChangeListener.Change<? extends TableColumn<S, ?>> change) {
            while (change.next()) {
                Label label;
                TextField search;
                VBox graphic;
                for (TableColumn<S, ?> column : change.getAddedSubList()) {
                    label = new Label(column.getText());
                    search = new TextField();
                    graphic = new VBox();
                    graphic.getStyleClass().add("k-column-graphic");
                    graphic.getChildren().addAll(label, search);
                    column.setGraphic(graphic);
                }
            }
        }
    });

So the column's graphic is what is displayed. I'm using the following CSS (the graphic itself has a "k-column-graphic" CSS class, while the TableView has a "k-table-view" CSS class)

/** Hide default text label in KTableView */
.k-table-view .column-header > .label  {
    -fx-content-display: graphic-only;
}

.k-column-graphic {
    -fx-alignment: center-left;
    -fx-spacing: 5;
    -fx-padding: 2;
}

This works great, but I'm also allowing the columns to be hidden by enabling the TableView.setTableMenuButtonVisible(true); property, which adds a button to easily hide columns.

Whenever I try to hide a column, it hides successfully, but the graphic (the Label/TextField) remain. Both seem to have a width of 0 or 1, and are very small, but you can still see them.

How, either through CSS or somewhere in my code, do I make it to where the graphic Node for the TableColumn will hide as well?

Answer 1

When you toggle the CheckMenuItem to show/hide the column, your customized controls won't automatically change their values of VisibleProperty . So what you need to do is simply bind the VisibleProperty of your own controls to the TableColumn 's VisibleProperty .

Following sample is based on your code. Hoping it can help.

    getColumns().addListener(new ListChangeListener<TableColumn<S, ?>>() {
        @Override
        public void onChanged(final ListChangeListener.Change<? extends TableColumn<S, ?>> change) {
            while (change.next()) {
                Label label;
                TextField search;
                VBox graphic;
                for (TableColumn<S, ?> column : change.getAddedSubList()) {
                    label = new Label(column.getText());
                    search = new TextField();
                    graphic = new VBox();
                    graphic.getStyleClass().add("k-column-graphic");
                    graphic.getChildren().addAll(label, search);
                    column.setGraphic(graphic);

                    /* ======= add the following two lines ============== */
                    label.visibleProperty().bind(column.visibleProperty());
                    search.visibleProperty().bind(column.visibleProperty());
                }
            }
        }
    });