In-line editing of Table Grid Control

Is it possible to edit a record directly within a Table Grid (by clicking on the cell and editing the value)? If not, do you have any suggested workaround?

Thank you!

No. Tablegrid control doesn’t allow editing inline.

You can initiate an action of opening another screen (Trey) upon clicking of any row .

In the new screen (Trey) you can grab the ID of the specific row and all the information of different columns of that specific row.

Then you can initiate action of updating the values of specific columns , you already have the row ID

Hope this helps.

Hi @maryn @yash1,

The in-line editing feature is now available in Table Grid control. We have added a new property “Choose columns that will be editable” where you can select the columns that you want to edit directly by clicking on the corresponding cell.

As the next step, there is 1 new action option available in the list of table grid actions named “save_changes”. Bind your action flow as desired here to make the necessary updates in the respective data source (say studio sheets, database, or rest API). Use Iterate Task in action flow to update multiple data of multiple rows in one go. Here in the Iterate Task, you would need to use tablegrid.PROPERTIES.EDITEDROWS from the Use Keywords option list to get the list & data of all rows to be updated.

Info: Make sure to reset table grid control via the Reset Control Data action task to fetch the updated data in the table grid.

Now in the live app/preview,

  • click on the cell(s) you want to edit

  • make the necessary changes and click on the corresponding tick :ballot_box_with_check: icon

  • once done, click on the Save Change button at the top right corner of the table grid control

Here is a quick screen recording for reference.

I hope this helps! :slight_smile:

what JS Code we have to write ? otherwise ,I am following all the above steps yet result not get reflected in DB.

Hi @ghanaditi,

It depends on what kind of data set are you using in the Iterate task. For instance, in case you are using tablegrid.PROPERTIES.EDITEDROWS, it will return an array of object, that is, an array of JSON based on which the system will identify how many times the tasks within the iterate block needs to be executed.

Now in the update sheet action task, if you will refer to this value passed in the iterate block, the system will not be able to identify which row needs to be updated in each iteration. For that, I would need to extract a specific key (as required) from that array of objects.

Here in the above example, I have simply assigned ITERATETASKS.value to the JS output and then created separate variables for each individual key as per my requirements. Here are the relevant snapshots for your quick reference:

Similarly, you can transform your data as required using JS code in an action flow or via the Custom Javascript option under the controls data section.

I hope the explanation helps. :slight_smile:

How do you access the column values within the ITERATETASKS?

In a normal server-side action, you would use tablegrid.result.rows.XXXXXXX for each column value.

Can I do something like tablegrid.PROPERTIES.EDITEDROWS.XXXXXXXX for the columns?

Hi @mbrodeur,

The tablegrid.PROPERTIES.EDITEDROWS keyword returns a JSON. You would need to use a JS code to get separate column’s value.

In the above example, I have provided this tablegrid.PROPERTIES.EDITEDROWS results in the ITERATETASKS and then I am using its value inside a JS code to process 1 row at a time.

Here are the snapshots for your reference.


  • JS Code

And then use these JS code variables in the subsequent action task to update the sheet, table, or any other data source.

I hope this will help. :slight_smile:

Hi there,

How would I adjust this to update a PostgreSQL database instead of the UPDATESHEETACTION? I’m not sure how to reference the changes from the table into some UPDATE statement.

Thank you,

Hi @swillett,

First, you can add a query in your PostgreSQL connector based on the data in your database. Eg:-

UPDATE table_name
SET name = {{username}}, email = {{useremail}}
WHERE id={{uniqueId}};

Inside the iterate task, you will have to provide the tablegrid.PROPERTIES.EDITEDROWS results in the ITERATETASKS and then you can use its value inside a JS code to process 1 row at a time.

And then use these JS code variables in your update action task to update the sheet, table, or any other data source. E.g

I hope this helps.