SelectRow() does not work

App Building
1

Hi developers,

When I click a field "ContractId" in my table "tableVersion" and run a script "Edit click cell handler" I want to select the corresponding row in my table tableContracts.

I'm using this code:
tableContracts.selectRow({mode: "key", key: tableVersion.selectedRow.ContractId });

I'm using the new table component.
But it does not select the row.
In console.log I see that tableVersion.selectedRow.ContractId has the correct value.

What could be wrong here.

Reyer

2

Hi @Reyer_Sneller,

Your code is correct, so the issue must lie somewhere else. Two things that I can think of:

  • The Click Cell handler may need the "Cell Selection" option set to Single (I haven't tried this myself, but I have a hunch this may be the reason).
  • Have you checked if your tableContracts doesn't have "Row Selection" set as none?
  • Have you checked that both values are integers and one of them is not being formatted as string?

Have you tried troubleshooting by creating a separate javascript query and adding the same code, selecting one of your ContractIds?

If none of the above works, would you mind sending a screenshot of your event handler?

1 Like
3

Hi MiguelOrtiz

Thanks for replying.

  • Setting the "Cell Selection" option to Single didn't help.
  • tableContracts has "Row Selection" set to Single.
  • both values are strings.

I also tried a separate javascript query, but that has the same problem.

script
script401×599 10.1 KB

The script does run because I can see the debug line in the console.

Reyer

4

Strange, not sure what may be causing this.

A workaround could be to create a second click cell handler and use the "Control component" action, e.g.

image

5

Hi Miguel,

The workaround doesn't work either.

script2
script2401×532 8.58 KB

The strange thing is that Retool expects a number. My primary key is a string.

1 Like
6

Hi @Reyer_Sneller,

Ah I see. Then maybe you can find the index of your ContractId and use that instead.

Using the Function:
tableContracts.selectRow ({mode: "index", index: tableContracts.data.findIndex (x => x.ContractId === tableVersion.selectedRow.ContractId)})

OR

Using the Select Row Method within the event handler, you add Index as {{tableContracts.data.findIndex (x => x.ContractId === tableVersion.selectedRow.ContractId)}}

Hope this works!

7

Dear Miguel,

I appreciate your effort in helping me!
However your suggestions didn't change anything :frowning:

kind regards
Reyer

8

Hi @Reyer_Sneller,

How frustrating!

Ok, this morning I remembered reading some time ago something about not being able to interact with a table which is is another view, and I was able to find that thread here.

So the suggestion would be to make reference to your data source (instead of tableVersion), once you're in the Contracts container View.

Maybe third time is a charm!

9

Hi Miguel,

Even when I don't switch to the Contracts container View the selectRow does not not work.
Isn't this a bug in Retool and should I wait for a fix?

kind regards
Reyer

10

this might be a promise/async problem as .setCurrentView(), .clearSelection(), .selectRow() and .scrollIntoView() (if I remember right) all return a promise so trying to use the results of these calls won't work correctly. have you tried awaiting these?

const selected_contractId = tableVersion.selectedRow.ContractId;
if(selected_contractId != ""){
    await tabbedContainerMain.setCurrentView("Contracts");
    await tableContracts.clearSelection();
    await tableContracts.selectRow({ mode: "key", key: selected_contractId });
    await tableContracts.scrollIntoView();
    console.log('Id = ' + selected_contractId);
}

I'm not 100% sure if all of them return a promise, but I'm fairly sure at least 1 of them does.

11

Thanks bobthebear for trying to help me.
I implemented your script, but unfortunately that didn't solve the problem :frowning:

kind regards
Reyer

1 Like
12

Hi @Reyer_Sneller - Make sure your table component has the primary key set to the value you are looking to select row on when using the key attribute (i.e ContractId).

image

13

Yes it has been set to the primary key:
script3

1 Like
14

Is the table visible when you are running the selectRow? Or is it hidden in a tab, etc.

1 Like
15

No the table is in a different tab of a tabbedContainer.
Could that cause the problem?

16

Yes, if the component is not visible it will not run the function. If you put a small wait timeout so that the tab changes view first and then runs the select it may resolve the issue.

1 Like
17

Hi teamrappid,

That works!
Thank you very much for your help.
Delays may not be the perfect solution, but I have a solution now.
Thanks again!

kind regards from The Netherlands
Reyer

2 Likes
18

Thanks guys, I came across the same problem today, and now I know why!

1 Like