How to prevent table from scrolling to the top when a row is selected?

Ask the community
,
1

Hi,

I have created a fairly simple data collection containing about 1500 rows and connected a table element to it on my website. The table shows about 20 rows at a time (not paginated).
I have it coded so that when a user double clicks on any row in the table, certain information in one of the columns in that row is displayed in a pop-up (using a Lightbox).

However my problem is that as soon as the user clicks on a row, the table instantly scrolls to the top.
So, for example, if the user scrolls to row 800 and clicks on it, the table immediately scrolls to the top. The “rowSelect” and “onDblClick” functions still work fine, it’s just the automatic scrolling to the top that is annoying. I would like the table view to remain where it is.
How do I prevent this from happening?
I tried using the table selectRow() method to try to automatically scroll back to the user selected row, but I get the following error:
Wix code SDK error: The value of rowIndex parameter that is passed to the selectRow method cannot be set to the value “241”. It must be between 0 and 199.
It looks like it can onlya accept between 0 and 199 as input? Why would the limit be so low?

My rowSelect function is pasted below.

Any help would be appreciated!
Thanks in advance!

export function table1_rowSelect(event) {
    // Get the row index of the row selected by the user in table1
    table1RowIndex = event.rowIndex; 
    // Extract the song title and lyrics from the selected row
    userSelectedTitle = event.rowData.title;                            
    userSelectedLyrics = event.rowData.body;
    // Trigger filtering of table2 (Singers table)
    filter2(singerName); 
    // Ensure the row selected by the user is still highlighted
    $w("#table1").selectRow(table1RowIndex);
}
2

You might try using event.preventDefault()

3

Thanks for your reply, David.
I added the following line at the top of my function:
$w(‘#table1’).onRowSelect(() => { event.preventDefault(); });

But I get the error:
TypeError: event.preventDefault is not a function

I also simply added event.preventDefault(); but see the same error.

4

Well you have to declare event as your callback variable in the first place, or else event won’t exist/be undefined:

$w('#table1').onRowSelect(event => { event.preventDefault(); });

If this doesn’t work and your table has no overflow, you might also try getting the current Y scroll using wixWindow.getBoundingRect and returning to it immediately instead.

5

I have exactly the same problem. Is the above code complete or do I have to add something? Thanl you

6

Is there a solution to avoid the table connected to a dataset to scroll top when a row is selected ?

7

Hi David, I’m running into this same problem. I have tried using event.preventDefault() as described above, but I get the error “Property ‘preventDefault’ does not exist on type ‘TableRowEvent’.”

I also tried to figure out how to use your alternative solution with wixWindow.getBoundingRect but I don’t see any info about how to get the current y position of the table, just the y position of the page as a whole.

Lastly, I tried the following but on the scrollTo line I got the error “Expected 0 arguments, but got 1.”

$w("#table1").onRowSelect( (event) => {
        let rowIndex = event.rowIndex;
        $w('#table1').scrollTo(rowIndex);
} );

Any help would be greatly appreciated!

8

Did anyone come up with a solution to this problem?

9

seems like wix is really fucked up sometimes and nobody cares

10

Hi Guys,
Think I found the answer. Set the dataset rows greater than the # of rows in the collection.

11

Hi, I had the exat same problem and your solution fixed it. I would still consider it a bug, but at least we have a workaround. Thank you very much!