Looking to trigger a "selectRow" after table-filled-by-query

💬 App Building
, , ,
1
  1. Goal:

When our search form is submitted, it triggers an SQL query. Once the data is ready it's delivered to a table-component for display. How can we trigger an event after the table-display is "done"?

  1. Issue:

A table displays search results. Whichever row is selected, determines several variables that drive several secondary queries and multiple display-components (names, images, ids) elsewhere in the interface. It's fine to have a "select row" event handler, that works as expected...

But when we do a second search—one that replaces all the data from the previous search, bringing in a whole new set of data—the topmost row is selected by default but it doesn't get a "select row" event, leaving the "old" data still showing in the rest of the interface.

  1. Steps I've taken to troubleshoot:

**mytable.selectRow({mode:'index',indexType:'data',index:0})** would hypothetically do the trick, if we could time it properly.

Tried adding a "success" handler on the original search-results query, but that gets triggered BEFORE the new data is displayed in the table component. A high "debounce" value works only when the topmost row isn't already selected in the previous dataset (and it makes the interface more confusing to the user with an unpleasant surprise).

This page delineates lots of properties, methods and events, but we haven't found "upon-fetching-complete" or anything like it.

Tried having our variables pull directly from **mytable.selectedRow.FIELD** (these variables determine parameters for many secondary queries) but without debounce, that leads to lots of extra queries when the user clicks randomly. It would work much better if we could control when the variables are set.

  1. Additional info: Cloud Hosted
3

Hi Trillich,

Thanks for laying this out in detail! I'm sorry to hear you're having trouble with that data mismatch from your table.

Just to confirm my understanding:

  1. Submitting the search form triggers a SQL query and populates the table.
  2. Selecting a row updates subsequent components across the app.
  3. When you run a new search, the data in the table is replaced and the top row appears selected, but the old data is still displayed in that top row.
  4. Downstream queries still read the previous row's values, so the rest of your UI is out of sync.

I have a feeling this is happening because Retool only fires a Change Row Selection event if the selection actually changes. In other words, the mytable.selectRow({mode: 'index', indexType: 'data', index: 0}) won't actually fire if the same row index is already selected.

First, try to clear the selection mytable.clearSelection(), then immediately reselect the first row with mytable.selectRow({mode:'index',indexType:'data',index:0}).

If that doesn't do the trick, let me know and we'll continue troubleshooting. I'm here to help!

Cheers,
Branden

4

That was the nudge we needed :slight_smile:

So the selected row triggered some variables to be set, and those variables were what drove other UI components to be updated. (After a second search, the new data showed up in the table properly, but it was difficult to get the "select the already-selected first row" event to fire to get the variables updated with the new data, to update secondary components appropriately.)

async function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

table_stu_bio.clearSelection();
await delay(50); // Quick delay
table_stu_bio.selectRow({mode: 'index', indexType: 'data', index: 0});

We added that as an "event handler" for the "success" of the query that fills out the table. This seems to work 100% now :smiley:

Thanks!

5

Look at that! So happy this worked out! :smile: