WebListbox ScrollTo Incorrect With Variable Height Rows

Targets Web
1

See attached sample project.

When using a WebListBoxCellRenderer to add multi-line data into a WebListBox, the WebListBox Class’ built-in ScrollTo method doesn’t scroll to the passed row.

It seems to be using the default row height and scrolling to (Default Row Height) * # of rows.

What’s the correct way to scroll to the requested row when the row height varies from row to row?

listboxScroll.xojo_binary_project.zip (10.4 KB)

Edit: This is with Xojo 2024 r2.1 on MacOS. Testing with Safari, Firefox, and Edge browsers.

2

I don’t think there is a built way to do this.

You may want to create an Issue for a Feature Request and see what @Ricardo_Cruz can do.

1 Like
3

@AlbertoD - Thanks for the quick reply ( per usual :slight_smile: )

Feature request: https://tracker.xojo.com/xojoinc/xojo/-/issues/77216

Any thoughts or experience on working around this by getting the actual row heights using JS?

4

No experience, sorry.
From what I understand, Xojo Web uses the row height to do some internal calculations, changing the height outside of what is offered ‘works’ (to display multi line) but breaks other things like, in this case, ScrollTo.
May break the size of the scrollbar indicator too.

1 Like
5

Your help is always appreciated @AlbertoD

@Ricardo_Cruz is there a way to get the actual position of the of a WebListBox and scroll the WebListBox to it when the listbox rows have variable heights?

It seems counterintuitive to have a WebListBoxCellRenderer which allows you to do things like put variable height text in a list, but then it breaks something basic like ScrollTo.

At the very least, a documentation change warning ScrollTo doesn’t work with a WebListBox control if it has rows of differing heights seems warranted?

6

Xojo WebListbox is based in Datatables.net and I can’t find a post/code that makes it handle different row heights, only same row height.

So it looks like we are asking Ricardo to deliver something that is not available for datatables.

7

I have provided a workaround on the feedback case.

1 Like
8

@Anthony_G_Cyphers - thanks so much for looking into this. I’ll test your solution as soon as I have a chance.

Once I’ve confirmed it’s working, I’ll mark your post as the solution.

Cheers,
Anthony

1 Like
9

So it appears, every time the listbox is reloaded, the row numbers increment.

This makes the row number passed only work for the initial set of row numbers (after the first load). See sample attached project.

In my actual project, I’m keeping track of the number of rows loaded and appending this to the index (e.g. go to row 65 to go to the fifth visible row of a 20 row list box which has been reloaded three times)

This works but…

  1. it’s clunky

  2. it requires the call to the ‘ScrollIntoView’ extends method to be done from a WebTimer with a long enough period that the “dom has caught up”.

I appreciate all you’ve done already @Anthony_G_Cyphers , and I have a “fix”.

You’re much more familiar with JS in general and Xojo’s web framework use of it specifically than I am.

If there’s an easy way to “peak into the DOM” and figure out the first row number after the listbox reloads, that would be neat.

Otherwise, thanks for the assist and maybe @Ricardo_Cruz will be able to do something more definitively in a future Xojo update. :slight_smile:

Example of changed row #

image
image1636×538 180 KB

Updated project showing the “issue”

listboxScrollChangingIDs.xojo_binary_project.zip (11.4 KB)

10

Replace the content of the ScrollIntoView method with the following:

var exec() as String
exec.Add( "(function() {" )
exec.Add( "  let dataTable = $('#" + l.ControlID + "_table')?.DataTable()," )
exec.Add( "      row = dataTable?.row(" + Integer(rowIndex - 1).ToString( "#" ) + ")," )
exec.Add( "      node = row?.node();" )
exec.Add( "  node?.scrollIntoView();" )
exec.Add( "})();" )
l.ExecuteJavaScript( String.FromArray( exec, "" ) )
3 Likes
11

Nice. I’ll give it a whirl as soon as I get a chance. Thanks again!

12

I can confirm the second JS snippet from @Anthony_G_Cyphers is working.

Thanks again to you, Anthony. :slight_smile:

Anthony

1 Like
13

Happy to help.

2 Likes
14

Sadly, the underlying library doesn’t support variable row height, at the moment.

You may encounter issues when displaying a large amount of rows, as the scroller depends on having the same height on every row for its calculations.

2 Likes
15

@Ricardo_Cruz - Thanks for the reply :slight_smile:

With @Anthony_G_Cyphers help, I was able to make a working subclass of WebListBox which (at least of my use case) handles variable-height rows fine.

The JS and Xojo code are entirely contained within the subclass, so nothing else is needed.

The WebListBox subclass exposes one public method, ‘ScrollTo_JS’, which scrolls using the java script code Anthony provided.

If there are potential pitfalls or ways to improve this class, I’d love to know about them.

Sample project below.

Best regards,
Anthony

listboxScrollChangingIDs.xojo_binary_project.zip (11.4 KB)

1 Like