How to select new row in table after create query and table refresh

App Building
1

I have an app using REST APIs.
I have an action that creates a new item with a POST call (createQuery). When that call is successful, I am refreshing a table by calling a GET call (getallQuery) that retrieves all such items (using Success Event Handlers)

What I'd like to do now is to then select the row in the table that corresponds to the new item. It obviously needs to be done after the createQuery call has completed and the table refresh has also taken place.

I tried adding a control component > table > select row (with the id from the createQuery.data.id) in the Success Event Handlers in the createQuery, but that doesn't work (as it can't be made to wait on the other event handler).

Any recommendation?

Is there even a way of selecting a row by a column value? How would I now the row index (other than involving more javascript to find it with an indexOf based on that ID?)

2

I inspired myself of Best Way To Handle Auto Selection Of New Row In Table - #2 by shawntax and decided to use a TemporaryState that gets set in the Success handlers, with the new id.

I then have a transformer that translates that id into a row index from the table data.

I then use the value of that transformer as the default index in the table.

It seems to me that this would be a fairly common use case, and therefore something that may be a bit simpler to implement?

3

Hello. Do you have a code example of what you tried which isn't working. I am kind of following what you are trying but not fully understanding.

Thank you,
Brett

1 Like
4

Hi @wabiloo Let us know if you're able to share any screenshots! I'm glad to hear you were able to find a solution for the time being

5

Hey there I have the same issue. I have read this post and the closed one here Best Way To Handle Auto Selection Of New Row In Table but none of the solutions work for me.
I also have a table and a custom action at bottom of the table with a plus icon to add a new row and I have a query which is then triggered and creates a new entry in my database. I also have a variable called newRowID. After the new row is created I use the success event handler of this query to run

  • set Variable and set it to the new created ID
  • get query to update the table containing the new row
  • selectRow with key and put the ID variable in
    My Table is set to use this ID as Primary Key.
    But it doesnt select this row. It just doesnt work. I have now clue why...

What else have I tried?
I tried setting the default cell selection to "none". I checked the box at "persist row selection".
Since I wondered if this happens because the query ran asyncronous and wrote a js script.

let id;
postQuery.trigger({onSuccess:(data)=>{
  id = data.id;
  getQuery.trigger({onSuccess:()=>{
console.log(`trying to select row with primary key ${id}`);
  table1.selectRow( { mode: 'key' }, id );
  }})
}})

When I run this script it also adds the row updates the table but does not select the new row altough in the console I can read my message "trying to select row with the primary key 42"
Why isn't this working?

6

I don't know if Key is correct: Try using:
table1.selectRow({ mode: "index", indexType: "data", index: table1.data.length-1;

1 Like
7

Thanks @ScottR
I just didn't use the function the right way.
This is what worked for me:

let id;
postQuery.trigger({onSuccess:(data)=>{
id = data.id;
getQuery.trigger({onSuccess:()=>{
table1.selectRow({mode:'key',indexType:'data',key:id});
}})
}})

Please Note: This only works because I have the Primary Key of my table set to ID of my datasource / query!

2 Likes