Bootstrap: Scroll to Bottom of List

[ljwilson]

I had the opportunity to work on an InDe Bootstrap app I did a few years ago. One of the forms has a query panel on top, and a results panel below. The results panel is always 100 records, and is built from a MS SQL Stored Procedure that returns a result set.

The result set goes into a record set, I total up the columns by looping through the result set, and add a final row to the result set for totals. I then convert the result set to a collection and set the results panel to the collection.

All that works fine, but to see the totals at the bottom, the user would scroll down using the mouse. Since bootstrap caches the first 30 rows, and then when you select the 30th row it brings in another 30, you hit the 60th row it brings in another 30 for 90, then finally on the 90th row it brings in the rest. It works, but a bit cumbersome for the user.

I wanted a button to jump to the last row with the totals, just like you can with the navigation buttons present on lists using non-bootstrap themes like Seattle or Zen. I saw on the Italian forum a technique for scrolling to the bottom of a Book using JavaScript, and tried to implement something similar, but didn't have any success.

What did work for me I demonstrate in the attached example project. When the user selects the "Scroll to Bottom" button:

1. A client side timer is enabled. The timer is set to 250 milliseconds to give the framework enough time to adjust. 50 is too low, 250 worked for me for all cases I tested.
2. We set the number of ticks based on how many invocations of the "Scroll to Bottom" procedure need to be called to reach the bottom of the list.
3. Now once you reach the bottom, you can click the Scroll to Top button and it instantly goes to the top. Clicking Scroll to Bottom again instantly goes to the bottom, since at this point all 100 records are cached.
4. Click the reset button which closes/opens the form again, clearing the cache so you can test again.
5. I set the MAXROWS to 100 in the initialize event, since this example database has 20,000 records in it.
6. For fun, while at the bottom (row 100), switch to form view, and click the navigation button to go to the last record. It will jump to 200. You can then switch back to List view, and click the Scroll to Bottom button again. It will now take you to the 200th row.
7. Row Number is a transient property in the class for reference to see where you are when you are "jumping" to the bottom.

Obviously this technique is limited to a relatively small set of records. Doing this with 20,000 records would take about 200 seconds!

Bootstrap Scroll to Bottom Express.zip

InDe 22.0 r18b Express

(992.24 KiB) Downloaded 149 times

...jack