Scroll multiple listbox

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

MDuchemin
2560 ● 1 ● 6

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