ScrollToRow not working

I have a Retool DB query that after updating a table, runs a script as a success handler. The script captures the primary key (user_id) of the currently selected row, then refreshes the table to display the updated data. After refresh, I need the same row to remain selected, so I use the table.selectRow() function with the previously captured primary key to select the desired row.

This is all working. Unfortunately though, the selected row is no longer in view, so I've tried various methods to force it into view, with no success. I've tried:

studentTable.scrollToRow({ mode: 'key', key: selectedUserId });

and

studentTable.scrollToRow({mode:'index', indexType:'display', index:studentTable.selectedDataIndex});

I've found a couple other posts with similar issues, which have helped me at least get to this point, but still no success:

[Table: Scroll selected row into view]
[Unable to dynamically select a table row using selectRow]
[Scroll table to a selected row]

Am I missing something?

Welcome to the forum!
Saying the row is no longer in view, are you paginating the table on the front end? Are you storing the row id or some other value like index in a temp variable?
Is the table growing in size? Is it sorted alphabetically?

Hi. @ScottR, thanks for responding! On the front-end, my table is not paginated, just scrolling. I'm not using any temp variable, although now that you mention it, that's probably the better way to go here. I'm resetting the filter as part of the success handler, which is making the table grow in size. It's sorted alphabetically.

Ok so try setting the value in the variable to what was selected -1 when you’re setting the value before the update

It's working! Your questions and insights led me to the solution, so thank you!

What finally made it work was separating the selectRow and scrollToRow in a separate JS query and trigger the query from the success handler. I'm not sure why that was the trick, but I'm assuming it has to do with the timing of when everything is triggered.

I ended up not needing the variable at all in this case, but it proved useful in another task I was stumped on, so I'm glad you suggested it.

Here's the code that's working for me for any others with this issue:

Success Handler Script
studentTable.refresh();
enrollStatusFilter.setValue('n');
studentTable.setFilterStack({ filters:[{ columnId:'enroll_status', operator: 'contains', value: 'n' }] });
scrollToRow.trigger();

scrollToRow JS Query
studentTable.selectRow({ mode: 'key', key: studentTable.selectedRow.user_id });
studentTable.scrollToRow({ mode: 'id', indexType: 'display', index: studentTable.selectedDataIndex });


2 Likes