Open modal from table and fill modal with data from table

Hi all!

I want to have an option to preview some more detailed data in a modal that pops up from a multiSelect table when a button is clicked (I got this). However, I want to fill some textInputs and other components with Data coming from the row from which the modal is opened. The problem is, I cannot use selectedRow since it is a multiselect. Furthermore, I would also like to allow for changing the original row data based on changes that are made by the user in the model. How could I best approach this?

Important to note is that it needs to be possible that there are multiple rows selected already using multiselect, and that still the modal opens showing the right data from the clicked row button.

Thank you for the help!

This will depend on which row you want to populate the modal with. - if it is the row where the button is clicked...hmmmm have to think about that...

OK here is what you can do....

Create a temp variable and use it to set the value to the index of the current index - 1 selected in the event handler for the action button

Then also using the same click event, open the modal

and within that modal you can populate the fields as needed using the variable value for the row you want to populate the data from that has been clicked:

As to changing the originally clicked row with new data, that would be an update to the database for that "clicked" row's ID (or some other key) and then close the modal and reload the original table with the query executing to populate it again or yourTableName.refresh()

1 Like

Thank you Scott, huge help!

I must say changing the data of the originally clicked row, I just want to change it directly in the table if possible as when you edit the cells. Sending it back to the database and updating it there is not something we would like to do. We want to just be able to read the values in the table to then later make an api call with this data.

Make the cells editable and then use {{your tableName.changeSetArray}}