Hi javafx folks,
Today I will show how to make your multi table view bind with a single ScrollBar. JavaFX is becoming more and more powerful and nowadays people are using this javafx for comaparing the data between tables and it’s pretty much helpful for scrolling the tables with a single Scrollbar.
To make this things happen ; Firstly I have dived to check if there is any api for making scroll binding in both tables but I didn’t find them. I then went to see if there is any manual scroll of the tableview finally i found them scrollTo(int) which is really helpful for the programmer to scroll the tableview manually.
Lets first see how we are going to make this happen.
Table Vertical Scrolling Binding
As you can see in the above picture I’ve stated how to make two tableview vertical Scroll bind with a single External ScrollBar.
Firstly You need to hide your vertical scrollbar. Please add styleclass “mytableview” for both of the table view to make this css to take effect.
Hiding Vertical Scrollbar of TableView from CSS
|
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 |
/* The main scrollbar **track** CSS class */ .mytableview .scroll-bar:vertical .track{ -fx-padding:0px; -fx-background-color:transparent; -fx-border-color:transparent; -fx-background-radius: 0em; -fx-border-radius:2em; } /* The increment and decrement button CSS class of scrollbar */ .mytableview .scroll-bar:vertical .increment-button , .mytableview .scroll-bar:vertical .decrement-button { -fx-background-color:transparent; -fx-background-radius: 0em; -fx-padding:0 0 0 0; } .mytableview .scroll-bar:vertical .increment-arrow, .mytableview .scroll-bar:vertical .decrement-arrow { -fx-shape: " "; -fx-padding:0; } /* The main scrollbar **thumb** CSS class which we drag every time (movable) */ .mytableview .scroll-bar:vertical .thumb { -fx-background-color:transparent; -fx-background-insets: 0, 0, 0; -fx-background-radius: 2em; -fx-padding:0px; } |
As I’ve already stated here i’ve used “mytableview” class which is the TableView class.
Now Just create Two TableView and one ScrollBar Let’s suppose “table1”, “table2” and “scroller”.
Let’s see how it works
Scroll TableView with ScrollBar value
|
1 2 3 4 5 6 7 8 9 10 11 12 |
scroll.setMax(100); //make sure the max is equal to the size of the table row data. scroll.setMin(0); scroll.valueProperty().addListener(new ChangeListener(){ @Override public void changed(ObservableValue ov, Number t, Number t1) { //Scroll your tableview according to the table row index table1.scrollTo(t1.intValue()); table2.scrollTo(t1.intValue()); } }); |
Now you have sucessfully made multi-tableview scroll from a single ScrollBar.
Only this much for today.
Have a 🙂 good day. Keep on coding with technique.
Demo
I’m getting this trying to see the demo:
Plug-in 10.9.2.05
JRE 1.7.0_09-b05 Java HotSpot(TM) 64-Bit Server VM
java.security.AccessControlException: access denied (“java.lang.RuntimePermission” “accessDeclaredMembers”)
at java.security.AccessControlContext.checkPermission(AccessControlContext.java:366)
at java.security.AccessController.checkPermission(AccessController.java:560)
at java.lang.SecurityManager.checkPermission(SecurityManager.java:549)
at java.lang.SecurityManager.checkMemberAccess(SecurityManager.java:1679)
at java.lang.Class.checkMemberAccess(Class.java:2174)
at java.lang.Class.getDeclaredFields(Class.java:1759)
at javafx.fxml.FXMLLoader.getControllerFields(FXMLLoader.java:2543)
at javafx.fxml.FXMLLoader.access$1400(FXMLLoader.java:68)
at javafx.fxml.FXMLLoader$ValueElement.processValue(FXMLLoader.java:655)
at javafx.fxml.FXMLLoader$ValueElement.processStartElement(FXMLLoader.java:572)
at javafx.fxml.FXMLLoader.processStartElement(FXMLLoader.java:2314)
at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2131)
at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2028)
at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2742)
at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2721)
at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2707)
at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2694)
at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2683)
at javafxapplication2.JavaFXApplication2.start(JavaFXApplication2.java:22)
Everyone loves what you guys are up too. This type
of clever work and exposure! Keep up the amazing works guys
I’ve incorporated you guys to our blogroll.
Thanks …
But i have some question .
is There a way to access the rows viewed in current view of table view
with out using scroll to method
i need to get number of row that is showing .
Thanks
Please Help me with this Demo example, i need the source code…
[email protected]
Hi Danny,
The main source is already inside the blog.
Thanks
Thank you, works great.
Is it possible to scroll down the left and right parts of a vertically split window in Vim?