Highlight a table row from a previously selected record

Discussion Ask a question
,
1

Background for the questions:

I have the following table setup that shows the records in a collection. The title column is the link to the dynamic page that shows the record.

994×292 60.1 KB

Whan the “movie title” is clicked, the correct record from a dynamic page is displayed.

I would like to write to a session variable:

  1. Which title was selected.
  2. If there is a previous (.hasPrevious) and a next record in the dataset.

Then when the user returns to this page, I’d like to scroll the table results to the previously selected record and highlight it. Here is a mocked-up example:

994×292 61 KB

Questions:

  1. After a table is populated with records, can a particular row be highlighted with Javascript?
  2. Can the table rows be scrolled to the desired (in this case, the previously selected record) row?

Getting the hasNext and hasPrevious values

I experimented with adding a click event to the table to get these values and write them to session variables.

export function movieList_click(event, $w) {
let itemObj = $w(“#dataset1”).getCurrentItem();
lastRecTitle = itemObj.title;
lastRecID = itemObj._id;
lastRecIndex = $w(“#dataset1”).getCurrentItemIndex();
hasNext = $w(“#dataset1”).hasNext();
hasPrev = $w(“#dataset1”).hasPrevious();
session.setItem(“lastRecIndex”,lastRecIndex);
session.setItem(“lastRecTitle”,lastRecTitle);
session.setItem(“hasNext”,hasNext);
session.setItem(“hasPrev”,hasPrev);

This seemed to work as long as the table was on the first page. The session variables all contained accurate information.


Then if the table was manually scrolled to any other page by clicking on the arrow above to move to page 2, the movieList_click event would record the corresponding record and values from page 1 of the table, thus an incorrect record.

It is interesting that the correct movie does display on the dynamic page, just the wrong values are recorded in the session variables.

Example:
Using the image above the second record on page 1 is: “127 Hours”. If that record is clicked on, the session variables are correct and 127 Hours displays in the dynamic page.

If the user clicks the arrow at the bottom of the table to advance the table to the second page the next set of movies properly displays. The second record on that page is “Avator”. Then if “Avator” is clicked on, the session variables record the corresponding record from that position on page 1 of the table, which in this example is “127 Hours”. Then the correct movie “Avator” is displayed in the dynamic page.

I’m sure it’s something I’m doing incorrectly. Any ideas?

2

Hi Kevin,
Regarding your questions above:

  1. Yes, you can select a row using JS function selectRow() (Table - Velo API Reference - Wix.com).
  2. You are also able to scroll this row using scrollTo() function (https://www.wix.com/code/reference/$w.Table.html#scrollTo).
    In your case I would have selected the desired row, than using $w.TableRowEvent
  • onRowSelected() and in this event, invoke scrollTo() function.

About the second issue you raised, could you please add a link to your site in order to get a bit more details about the problem?

Hope it helps. Don’t hesitate to contact again for any other trouble.
Good luck! :slight_smile:

3

It didn’t work as expected. At the end of the query

		$w("#movieList").rows = results.items; // populate the table

I added the following to test
$w(“#movieList”).scrollTo(35);
$w(“#movieList”).selectRow(35);

The 36th row was selected, but the table did not scroll to display the selected row.

4

You’re right, scrollTo() scrolls to the element itself, meaning the table.
I don’t think there’s a way to scroll to a specific row. You should maybe consider changing the table items so that the selected one will appear on top.

5

I think you could probably put together something that will accomplish what you want.

Background: currently there are three functions in the API that will scroll the page for you.

  • $w.Node.scrollTo()

  • wix-window.scrollTo()

  • wix-window.scrollBy()
    Looks to me like you’ve been using the first. But if you use the other two, and you know where on the page your table is and how high each row is, you can figure out the offset you need to scroll by to reach a specific row.

1 Like
6

Hello everyone,

I am now working on selectRow() function,
but it never works…

I tried following code in page onReady() event handler

$w(“#tableUser”).rows = rowData;
$w(“#tableUser”).selectRow(0);

but row#1 of the table didn’t selected,

however, if I put it in other button onClick() event, like
export function button1_click(event, $w) {
$w(“#tableUser”).selectRow(0);
}

it works.

Can anyone tell what I missed or what I did wrong ??

7

I tried another way as below

$w.onReady(function () {
          $w("#table1").rows = data;
          // $w("#table1").selectRow(0);  // at this moment, table1.rows still empty??
}
export function table1_dataChange(event, $w) {
          $w("#table1").selectRow(0);  // Row #0 is selected
}

It works.

I guess it caused by the fact as marked comment,
but not vary sure.

1 Like
8

Correct.
The table takes time to fetch and load the data so you need to wait until it’s done to select a row.
Using onDataChange() the way you did is the right approach.