Edit record (Table) using column Dropdown

Hello team,

I am facing an issue while updating a table record using a dropdown (column type) for a table column.
Basically, I display a dropdown of a list of products (query) matching the product_id of the order table.

image

The update works but I need to force refresh the display of the table to get the actual NEW dropdown value after update.

Flow:

  1. Alter the Dropdown value
  2. Save the row
  3. Table automatically refresh and revert the dropdown selected value prior the step 1
  4. Refresh the table
  5. dropdown selected value is now good

Here the small video that shows the problem.

1 Like

Hey @existenz25, and welcome to the community! Thanks for this detailed writeup - have you set the update query to trigger the get query on success? So if there’s a query that’s reading data and backing your table, you should configure it to re-run when your update query succeeds

Hey @justin
The problem occurs in a basic usage like updating a text field in the Product table (onboarding_db).

Here a full example of my problem using a from-scratch project:

When I update the product name, then I update the row, the text value is changed back to the previous value before updating.
I need to force refresh the table (using the refresh button in the table or programmatically) to display the new value updated.
The display is then odd: I change the text value => press save => the text value changes back to the old value => I force refresh the table => the text value returns to the good value.

I guess there is a problem here: either a bug or a misunderstanding when using the dropdown in a table ...
But I think I have followed pretty much the official documentation here:
https://docs.retool.com/docs/working-with-tables#editing-table-values-making-data-editable

Thanks for your feedback

Gotcha! Well it looks like at the end of the video, you configured your bulk update query to trigger query1 on success, which then updated the table correctly.

I don’t have enough information to help you debug this here - I’d recommend writing into Intercom to get quicker support. We’ll want to take a look at what’s getting triggered when and what the .data property of your table looks like post-update.

I run into the same problem with a checkbox. The Save Changes button makes the changes undo. Exact like existenz25 describes:

When I update the product name, then I update the row, the text value is changed back to the previous value before updating.
I need to force refresh the table (using the refresh button in the table or programmatically) to display the new value updated.
The display is then odd: I change the text value => press save => the text value changes back to the old value => I force refresh the table => the text value returns to the good value.

Is there a solution for this problem?

Hi all,

I am facing exactly the same issue with dropdown field in a table.

Same behavior applies to me.

Is there a solution for this problem?

Thanks!

Hi @juliogomes,

So the general workflow is like this:

  1. Load Data into the table
  2. Trigger update query to save the new values in your database
  3. On success of update query, rerun the query that populates the table

If you are doing all three of these and it's not populates the UI, do the values coming back from the database that are meant to be shown in the dropdown column match an option in the dropdown?

Hi,

I'm working on something similar to this one as well just now. I followed @Cole 's workflow but can't seem to make it work. Had to check again my bulk update query and realised I didn't change the 'Array of rows to update' field to the table I am getting the update.

For context:
Resource: google spreadsheet
Column Type: (editable) dropdown
Data Validation in spreadsheet: only set to raise a warning but not restrict unwanted data input.

Hi
I have the same issue:

  1. Created queryMain to postgres
  2. Created table and attached it to queryMain
  3. Created extra queryStatus with statuses (id, name)
  4. Made one of the columns a Dropdown with (id, name) from queryStatus
  5. Created save query and assigned Success trigger to queryStatus
    Now I am trying to edit status via drop down but page keeps refreshing and resetting the value I changed

Hi @ktrunin

Are you able to share a short screen capture of the issue you are experiencing?

Hi all,

I wanted to share my solution to this problem, as it works around the "refresh the table" approach as it didn't work well for me due to sorting changing. I needed to save multiple rows, and wanted to change "in-place" rather than re-querying the database. This is how I approached it with the save changes event:

table.recordUpdates.forEach(function (update) {
    updateQuery.trigger({
        additionalScope: {
            ...
        },  
        onSuccess: function(data) {
            const tableData = table.data.map(function (existing) {
                // use whichever field corresponds to unique identifier
                if (update.recordId === existing.recordId) {
                    return update;
                }   
                
                return existing;
            })  
            
            table.setData(tableData);

        },  
        onFailure: function(data) {
            utils.showNotification("Failed to update update");
        }   
    }); 
}); 

It may result in several updates to the table, but does successfully update "in-place" as required.

M

1 Like

@matt_onva ,

Interesting, you are basically copying the table.data array but replacing the updated records, then making that new array your new table.data. I had thought of something along these lines but hadn't yet tried to implement it and this is a more straightforward approach than I probably would have ended up with.

Thanks!

Hey, just wanted to leave my additional solution here when using a bulk-update / upsert query.

Just add this script to run on the Success event handler of your update query:
image
Code:

let cur_data = table.data
for(const row_id in table.changeSet)
{
  const change_set = table.changeSet[row_id]
  for(const changed_key in change_set)
  {
    cur_data[changed_key][row_id] = change_set[changed_key]
  }
}
table.setData(cur_data)
1 Like