Disabling row selection in tables from Javascript

Hi All,

I have a table linked to a tabbed set of edit forms. To avoid the user losing unsaved changes by selecting another row in the table while editing, I'd like to disable temporarily the ability to select rows in the table while the form is in edit mode. This is easier and more robust than trying to detect whether the form has been changed and do an interactive warning about unsaved changes.

I see in the component properties, that there is a property 'disable user selection', but I can't find an equivalent property of the table in the Javascript editor.

Does anyone know how I can temporarily disable user row selection from a script?

Thanks!

Hey @JeffT!

I don't think this is natively possible, but I was just able to put together a workaround using temporary state :slight_smile:

Basically, your button can trigger an event handler that toggles a temporary state value between true and false.

Then, your table's "Disable user selection" field can be based on the state value!

See attached app JSON if you want to poke around with my setup! You can import this JSON file by clicking Create new (home page) > From JSON. Quick docs on exporting/importing apps here.

Would something like this work for you? Let me know if you have any questions!
disable-20selecting-20row-20in-20table-20with-20js.json

1 Like

Cool; bit clunky having a hidden control for this, but it works nicely :smiley:

Thanks!

can you tell me where is the disable user selection function in table in current version of retool @victoria

hope you will come back soon

Hey Keshava! Are you looking for something like this to entirely disable row selection?

You call it a workaround, I call it a solution.

I was looking for a way to prevent the data entry people from accidentally clicking away from a row while editing (the row is connected to a form that they use to edit) and this works perfectly.

Thanks!

1 Like