How to set style for first level child in treetableview

Question

I want to set the top border just for all the first child so that for one child the data looks in one row. but I'm unable to set the id for those rows. I tried the following code but it didn't help.

final PseudoClass firstRowClass = PseudoClass.getPseudoClass("first-child");

devWorkTabBenchtable.setRowFactory(new Callback<TreeTableView<DevWorkTabBench>, TreeTableRow<DevWorkTabBench>>() {

    @Override
    public TreeTableRow<DevWorkTabBench> call(TreeTableView<DevWorkTabBench> param) {
        TreeTableRow<DevWorkTabBench> row = new TreeTableRow<>();
        row.treeItemProperty().addListener(new ChangeListener<TreeItem<DevWorkTabBench>>() {
            int i = 0;

            @Override
            public void changed(ObservableValue<? extends TreeItem<DevWorkTabBench>> observable, TreeItem<DevWorkTabBench> oldValue, TreeItem<DevWorkTabBench> newValue) {
                if (i < param.getRoot().getChildren().size()) {
                    row.pseudoClassStateChanged(firstRowClass, newValue == param.getRoot().getChildren().get(i));
                }
                i++;
            }
        });
        return row;
    }
});

What should I use? please guide me.

when running your project, this generates a page (html/etc). Could you possibly add this in? — jbutler483, May 21 '15 at 11:22
It applies CSS to only one row, and the style keeps moving on expading or collapsing of the tree item. — Harshita Sethi, May 21 '15 at 12:12
@Professor.CSS This is a JavaFX question, not a web application framework question. — James_D, May 21 '15 at 12:14

Uluk Biy · Accepted Answer · 2015-05-22T08:30:07.173

Try this

treeTableView.setRowFactory( new Callback<TreeTableView<DevWorkTabBench>, TreeTableRow<DevWorkTabBench>>()
{
    @Override
    public TreeTableRow<DevWorkTabBench> call( TreeTableView<DevWorkTabBench> param )
    {
        TreeTableRow<DevWorkTabBench> row = new TreeTableRow<>();
        row.treeItemProperty().addListener( new ChangeListener<TreeItem<DevWorkTabBench>>()
        {
            @Override
            public void changed( ObservableValue<? extends TreeItem<DevWorkTabBench>> observable, TreeItem<DevWorkTabBench> oldValue, TreeItem<DevWorkTabBench> newValue )
            {
                row.pseudoClassStateChanged( firstRowClass, param.getRoot().getChildren().contains( newValue ) );
            }
        } );
        return row;
    }
} );

How can I apply multiple pseudo classes for different levels?

You can get the valueProperty of the TreeItem and decide which css class to apply:

DevWorkTabBench bench = newValue.getValue();

row.pseudoClassStateChanged( thirdLevelClass, bench.getLevel() == 3 );
// or
row.pseudoClassStateChanged( MyCSSUtils.getClassByLevel(bench.getLevel()), true );

Hey thanks for your solution. It worked absolutely fine. :) One more thing I wanted to ask, How can I apply multiple pseudo classes for different levels . I tried giving different conditions to choose the level but at a time it just apply the css to one level. — Harshita Sethi, May 22 '15 at 07:51

How to set style for first level child in treetableview

1 Answers1

Linked