Scroll multiple listbox

asked 2022-11-14 22:53:45 +0800

alexamm gravatar image alexamm
106 4

Hi, I'm trying to move multiple listbox from one, I mean, I have 3 listbox, but i want when i scroll the first listbox, the other listbox scroll too. Is this posible?

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted

answered 2022-11-15 14:49:16 +0800

MDuchemin gravatar image MDuchemin
2298 1 5
ZK Team

Hey there. It is possible, the main question is how you want to do so.

Some background here: the Listbox has a client-side widget (the in-browser JS object) and a server-side component object (the java instance of Listbox). Both of these are able to listen to onScroll events.

If your process require some sort of server-side behavior, then you'd need to register an event listener in java (or zul) on the Listbox component, read the scroll position, and then apply the scroll position to the other(s) listboxes.

This gives you access to all of the ZK server-side APIs, but require a network round-trip (request-response cycle) to execute, so from the user's perspective, the scroll might feel a bit choppy. Plus, if a user scrolls a lot, you'll likely get a lot of requests sent (one for each onScroll), which can be more traffic than you'd want.

Now, if you do listen to the onScroll event at client-side on the widget, you'd be registering a JavaScript event listener. Using a JS event listener, you can immediately update the state of the other listboxes without a server round-trip. I'm assuming that this is more in line with what you are trying to achieve, unless you need the Java server-side APIs during scroll somehow.

PS: this assumes that the listbox all have the same scroll length. You may need to put some checks in places to handle cases like one of the listboxes having more content than the others by scroll to percents of the total length or something. This is dependent on your use case though, some I'm not going to include that in the sample below.

Here's a sample of the JS case: https://zkfiddle.org/sample/qdgcde/8-synchronized-lb-scrolling

A WORD OF WARNING THOUGH Listbox is a pretty complicated component, with a lot of different behaviors and triggers. If you only want to display tabular data, I'd suggest looking if Grid might work for you, since overriding the client-side behaviors should be done on simpler components if possible to avoid unwanted side-effects. Also, if your Listboxes already have a bunch of advanced features like load-on-demand, etc. you may want to double-test if these are working as intended after doing this sort of customization.

Regarding the tech used in this sample: Client-side listeners: https://www.zkoss.org/wiki/ZKClient-sideReference/GeneralControl/EventListening#Client-sideEventListenerFirstthen_Server-side

Widget selectors: https://www.zkoss.org/wiki/ZKClient-sideReference/GeneralControl/Client-sideselectionofelementsandwidgets

link publish delete flag offensive edit


Thanks a lot, works like a charm, it was that I looking for

alexamm ( 2022-11-17 00:46:59 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2022-11-14 22:53:45 +0800

Seen: 6 times

Last updated: Nov 15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More