I want to provide listviews with two textinput components to let users enter values. Each row has two fields, and their data needs to be stored in the temp state before strong them in the database through bulk inserts. The number of rows is not fixed, so I add a addRow button to increase an additional row (with two textinput components) whenever the user clicks it.
To summarize, the questions are
How to store the data into temp state using listview
How to avoid resetting the temp state data when a new row is added to the list view
Here are more details of what I have tried so far:
Create two temp states and initialize their values to be textinput1 and textinput2 values. When the user enters the value into the textinput 1 and textinput 2, the temp states are updated.
However, the problem is that when I click the addRow button, the additional row appears but the values entered into the first row (also the temp state) disappear.
Any advice is welcome. Thank you so much for the help!
Hi Doris! Thank you for reaching out, we can definitely help with this.
There are 2 things we must do in order to resolve this:
1. Use a temporary variable to store the length of the listView object. The "Add Row" button when clicked will trigger a JS snippet that increments the temporary variable by 1.
Thank you for the clear explanation. It is very helpful. I have a follow-up question re: how to delete a specific row and reduce the number of listViewLen without impacting other rows?
I'm not sure if you're still blocked here or not but I was able to come up with a solution here that may help!
For this to work, we would have to forgo the Row Keys and instead store the data displayed in your listview in temp state (link to our docs on this here). In my case I set this state up to be an array of objects, each object will represent a row in my listview, so for a single row, my setup looked like this:
Next, as we enter info into these inputs we would want to update this state so I added an event handler to each that on blur will set its corresponding value like so:
Lastly, to delete entries, we would need to remove them from our state array. First, I added a button to each row to delete and set an event handler to trigger a JS query like this:
My deleteRow query makes a copy of the current state, and removes the given line using the same i variable as above, this query could look something like this:
Now, you should be able to create rows, have the data persist, and delete any row and maintain the listview data:
Do you think this could work for your use case here?\
This was really helpful, thanks Chris.
One of the screenshots seems to have been duplicated meaning the deleteRow query is missing from the post. Just in case anyone needs it, for me this worked
@Chris-Thompson, @DavidS I've encountered one problem when using the Listview component.
I have a Text field and File Dropzone field in the list item and when I delete the item by clicking "x" button in the image, it doesn't delete the correct item in the listview (it just deletes the last item of the list). Any suggestions?
If it's not available in Retool right now, do you have a possibility to upgrade the listview and ETA?
For any inputted values inputted into the list fields to persist you may also need to store the list view data in a temporary state, and then set each field to defult to the corresponding value as shown below. There's a good thread explaining this somewhere, I'll see if i can find it
@DavidS I did set up the "Row Keys" to the Listview component.
When you delete the Listview item, you can get the row number, so it's possible to remove the selected item from the temp store. Even if it's removed from temp store and Listview data, but the Listview component tries to delete the Last item only.
When there are only Text fields, we can update every list item values by setting default value from the temp store after deleting the one item, but there's File Dropzone field, we can't do, because you could not set the default value to the File field.
.
