JavaFX Apply css to TableRows only if they are :enabled

Question

Assuming that JavaFX CSS doesn't support the :enabled based on JavaFX 8 Oracle CSS Reference how i can do the below?

A TableView exists where i am applying some kind of css :

.table-row-cell:hover {
    -fx-background-color:orange;
}

.table-row-cell:focused {
    -fx-background-color:purple;
}

I want the above to be done ( only ) when the TableRow is enabled.

So i modified the code including :enabled pseudo element but nothing works now:

.table-row-cell:hover:enabled {
    -fx-background-color:orange;
}

.table-row-cell:focused:enabled {
    -fx-background-color:purple;
}

Finally some small questions:

1)How i can combine :hover with :disabled or :enabled?

->[ apply **:hover** only if the `Table-Row|Cell` is enabled. ]

2)Does JavaFX css supports :enabled?

Last but not least:

After doing several tests on the code above i came to youtu.be/l7Pbz2l2wjE?t=138 this result.

Can you put the code of your table ? I will try to help you ! — Bo Halim, Dec 12 '16 at 13:15
@Bo Halim The code is working fine . Imagine that it is the same code from JavaFX Oracle tutorial. The css is the problem. The first part is working well but when i try to use `:enabled` pseudo class is not working . Maybe cause it is not supported . But i dont know how to do what i am asking on the title... — GOXR3PLUS, Dec 12 '16 at 13:30
@Bo Halim You can use the code from the answer here where you have some rows disabled and some enabled http://stackoverflow.com/questions/26607144/javafx-how-to-disable-a-row-in-a-tableview — GOXR3PLUS, Dec 12 '16 at 13:33
@GOXR3PLUS I'm really sleepy so my mind doesn't really work but isn't this the default behavior? I ran a sample code using your css and when a row is disabled, hovering and selection don't change its background color. Am I making a mistake and should really go to sleep? — Omid, Dec 15 '16 at 01:55
@omid xaxaxa Yeah it doesn't work at all . Even when the rows are enabled...Of course i am talking about the `:enabled` . As about the `first part of code` sometimes it changes the background sometimes not , if you do a little bit more testing. Finally if you are really sleepy this will wake you up ( https://youtu.be/l7Pbz2l2wjE?t=138 ) — GOXR3PLUS, Dec 15 '16 at 03:50
video was perfect :)) But I tested my code(http://pastebin.com/VNZLKhZ3) again with your first css and it works as you expect. Css only gets applied when row is enabled, I don't know why it doesn't work for you, confusing! Anyway maybe this helps: http://stackoverflow.com/questions/20350099/programmatically-change-the-tableview-row-appearance — Omid, Dec 15 '16 at 11:52
If the row is disabled, why will it even have focus or hover event in the first place? Isn't this contradicts with disable property? — Harshita Sethi, Dec 16 '16 at 11:46
@Harshita Sethi Unfortunately it doesn't work like this . I have an answer showing this. — GOXR3PLUS, Dec 17 '16 at 23:04

score 2 · Answer 1 · answered Dec 12 '16 at 14:45

I reversed your idea, instead of trying to find who is enabled , why not look for the opposite (which is disabled) and apply a fixed style, so that it does not change when the cursor enters the boundaries :

     .table-row-cell{

     -fx-background-color:red;

     }

     .table-row-cell:disabled{

     -fx-background-color:red; //Here you can define a fixed style 
                               //  or similar to the normal state

     }

     .table-row-cell:focused:disabled .text{

       -fx-fill: red; // Here you define the color of the text

     }

     .table-row-cell:hover{

     -fx-background-color:blue;

     }

Hope this will help you, and sorry if I misunderstood!!

Thanks for the try but what i want is : Imagine this code here `.table-row-cell:focused { -fx-background-color:purple; }` i want this to be applied only and only if the `TableRow` is not disabled . The code you have given doesn't or it maybe helps but i have to write double amount of code to achieve it :) , but i appreciate the effort. I have edited the question to be more simple... — GOXR3PLUS, Dec 13 '16 at 08:12

score 2 · Answer 2 · answered Dec 20 '16 at 10:14

You can use javafx.css.PseudoClass to change the styling of particular rows. Following is an example on how to use PseudoClass.

JavaFx code

PseudoClass enableRowClass = PseudoClass.getPseudoClass("enabled-row");
// A row factory that returns a row that disables itself whenever the
// item it displays has a value less than 5:
table.setRowFactory(tv -> {
    TableRow<Item> row = new TableRow<>();
    row.disableProperty().bind(
            Bindings.selectInteger(row.itemProperty(), "value")
                    .lessThan(5));


    row.itemProperty().addListener(new ChangeListener<Item>() {
        @Override
        public void changed(ObservableValue<? extends Item> observable, Item oldValue, Item newValue) {
            try {
                //Applying pseudoclass to only those rows which are enabled.
                // The condition is the reverse of the condition used to disable a row.
                row.pseudoClassStateChanged(enableRowClass, newValue.getValue() >= 5);
            } catch (NullPointerException e) {
            }
        }
    });
    return row;
});

Css :

.table-row-cell:enabled-row:hover .table-cell {
    -fx-background-color: purple;

}

.table-row-cell:enabled-row:focused .table-cell {
    -fx-background-color: orange;

}

Thanks for the idea i used something similar to create a different kind of solution ;) — GOXR3PLUS, Dec 22 '16 at 10:01
The answer i added is using your idea without a `ChangeListener` . — GOXR3PLUS, Dec 22 '16 at 10:07
You may need the `ChangeListener`, to apply the pseudoclass dynamically, if due to dynamic data change your row is enable/disabled, you wont get the same css style on the newly enabled/disabled row without `ChangeListener.` — Harshita Sethi, Dec 22 '16 at 10:14

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

My final solution using :disabled was the below:

As you can clearly see the row can be focused but no hovered and even selected even if it is :disabled.

Solution number 1 with :disabled(faster):

 /* .table-row-cell */

.table-row-cell:disabled{
    -fx-opacity:0.5;
}

.table-row-cell .text{
    -fx-font-weight:bold;
    -fx-fill: black ;
} 

.table-row-cell:focused .text {
     -fx-fill: white ;
}

.table-row-cell:focused{
    -fx-background-color:purple;
}

.table-row-cell:focused:disabled{ /* focused+disabled */
    -fx-background-color:blue;
}

.table-row-cell:hover{
    -fx-background-color:magenta;
}

Solution number 2 based on the answer of Harshita Sethi using a pseudoclass:

PseudoClass enableRowClass = PseudoClass.getPseudoClass("enabled-row");

setRowFactory(tv -> {
                TableRow<Media> row = new TableRow<>();

                // use EasyBind to access the valueProperty of the itemProperty
                // of the cell:
                row.disableProperty().bind(
                        // start at itemProperty of row
                        EasyBind.select(row.itemProperty())
                                // map to fileExistsProperty[a boolean] of item, if item
                                // non-null
                                .selectObject(Media::fileExistsProperty)
                                // map to BooleanBinding checking if false
                                .map(x -> x.booleanValue() == false)
                                // value to use if item was null
                                .orElse(false));

  //This line of code is the idea of the `Harshita Sethi` modified a little bit to not use a changelistener
  row.pseudoClassStateChanged(enableRowClass, !row.disabledProperty().get());

    return row;
 });

And of course the .css(mention that it doesn't produce the exact as the solution 1 cause it is missing some lines ;) :

.table-row-cell:enabled-row:hover .table-cell {
    -fx-background-color: purple;

}

.table-row-cell:enabled-row:focused .table-cell {
    -fx-background-color: orange;

}

JavaFX Apply css to TableRows only if they are :enabled

3 Answers3