Auto-Select Row on Edit Button Click When Multiple Select is Enabled in Retool Table

App Building
1

I'm encountering an issue with the Retool table component when the "Multiple Select" option is enabled. When I click the edit icon without selecting a row first, the edit panel appears empty. However, when the "Multiple Select" option is disabled, clicking the edit icon automatically selects the row, and the edit panel is populated with the row's data.

Is there a way to auto-select the row when clicking the edit button, even with the "Multiple Select" option enabled? I would like to maintain the functionality where clicking the edit button immediately brings up the edit panel with the row's data, without requiring the user to manually select the row first.

2

Hello @Rashmika_Lakshan

You can use event handlers to select rows like this:

image
image1604×495 91.5 KB

You should also check the default selection property of your table to set a default row selection when loading the page

3

image
image1219×87 13.8 KB

image
image1231×68 12.4 KB

I want to be able to select the row related to the Edit button when I click the Edit icon. When I remove the multiple-row selection, it works. But when I enable it, it does not select the row.

4

Hey there @Rashmika_Lakshan,

This is currently not possible, but linking here a feature request where you can add your +1.

5

There is a way to select the row, but it will remove the selection from the other rows. I don't know if it still interests you but if it does you can add an event handler in the edit button with the following code (you will need to adapt it to your app):

image
image1049×662 81.9 KB

Keep in mind that "key" refers to your primary key in the table, so you will need to match using that.

Other than this option, which does remove the previous selected rows, it's as Miguel said, it is currently not possible.

6

Hello again, after some testing I managed to implement selection of current row on row action by retrieving all the previously selected rows and adding the index of the current row being selected.
The base idea is the same but we add the already selected rows. Let me know if this works for you!

table1.selectRow(
{mode: "key", 
key: table1.data.map(
(x, y) => table1.selectedSourceRows.find(
z => z.id == x.id) ? y : x.id == currentSourceRow.id ? y : "").filter(
x => x!= "")})
7

This works properly. Thanks for your help. :saluting_face: :saluting_face: :saluting_face: :saluting_face: :saluting_face:

8

This works properly. Thanks for your help. :saluting_face: :saluting_face: :saluting_face:

9

This is not working, and when I try it, it randomly selects other rows in the table.

10

Does the previous one accomplish what you were looking for (clearing selection and only selecting the clicked row)?
Or is this second one the behavior you want (add the row you click to the existing selection)

11

Could you please explain what you do here? :thinking:

12

the second one is what I am looking for, but part of the solution is in the first one

13

the method selectRow will select the specified indexes or keys, depending on the mode.
What I did is getting the id of the current row and selecting that row via key, which will match the id of the currentRow when you click the button to the existing list of ids, because that is the primary key of the table.

14

I think the issue in this second one is that we need to go via index instead of key, or select the id instead of "y".

table1.selectRow({mode: "index", index: table1.data.map((x, y) => table1.selectedSourceRows.find(z => z.id == x.id) ? y : x.id == currentSourceRow.id ? y : null).filter(x => !_.isNull(x))})

table1.selectRow({mode: "key", key: table1.data.map(x => table1.selectedSourceRows.find(z => z.id == x.id) ? x.id : x.id == currentSourceRow.id ? x.id : null).filter(x => !_.isNull(x))})

Both of these should work

15

"Neither of them are working. The first one still selects randomly and sends only one. The selection works properly, but it's not setting the selected row correctly.

If you don't mind, can you tell me how to find these kinds of details {mode: "key"}?"

16

when you type table1.selectRow you can see a pop up with "options". thats where i'm getting the info to do the scripts.

mode key will match into your primary key that you define in the table. in your case the name might be different from id, you have to adapt the code. both of those work in my local project with default data

1 Like
17

HI @GuilhermeSilva

image

I have found a way to resolve this issue using retool.

1 Like