Identify Changed Rows

Tags: #<Tag:0x00007f0b03a5dd30>

Is there a way to identify/ mark the rows that have been edited by user against the ones that haven’t been? I want to limit the data going in Update operation to the backend.
As of now I have to process update request on all the rows via looping on save click, which takes a lot of time to process.
The issue is I’m using REST API calls which are aync in nature and the page redirects on Save button click.
With 30+ rows the update loop takes long and operation is interrupted in between by redirection hence not saving complete changes in backend.

Hey @nidhityagi46

You can add a class to each cell that has been edited via afterChange hook. Here is the same operation but it also ads a fake bottom-border http://jsfiddle.net/64j38uzg/

Hi @aleksandra_budnik Thanks for your quick response. I’m pulling out the data using hot.getSourceData() and then looping through it with update query.
So, a class or any styling attribute wouldn’t be helpful in identifying edited rows in data collected by hot.getSourceData().
Please suggest.

Can anyone please assist me on this?

Hey @nidhityagi46

sorry for keeping you waiting.

Can you send me a demo with your recent progress? It will be much easier to check approaches with a live example.

Aleksandra, we also have the same need. We fetch data from our server (hundreds of rows), the user can then insert, edit or delete the rows. Only the changed (including new rows) rows need to be sent to a API call for DB update.

Hey @prasanth.sivakumar

you can get changed rows indexes via afterChange hook.

when the user insert or delete the row, the index offset will change, right? for example., let us assume we have 10 rows in the table and user changed a cell in row 5. I will get the rowindex in afterchange hook which i can save in a list/array. Now if the user delete the third row from the table, the index of changed row will be 4 (and not 5)…

Yes, the index will change but doesn’t your database need to know about this shift as well?

Maybe you can share an example/draft of a input/output situation that you’d like to cover.

My table (handsontable) have project data. Each row will have project name and hours column. Employees can log their time in the project. They can also add a new project (a row) or delete a project.

Suppose an employee edits the project hours of multiple projects, then delete an existing project. We need to send only the changed project details (id and time) to the server.

In the server, we will update the DB as ‘UPDATE xxx where project = abc’

All the changes will be sent to server when the user click a Save button. So we need to track all changes and push it in a single request to the server.

Hope i’m not confusing you… :slight_smile:

Hi @nidhityagi46, @prasanth.sivakumar,

did you try this: Suppose you have 10 columns, add a additional (hidden) column, type ‘checkbox’. With the afterChange hook you can set the value to true, if a change occurs

afterChange: function(changes,source) { if (changes && changes[0][1] < 10 && changes[0][2] !== changes[0][3]) { this.setDataAtCell([changes[0][0],10,true]) // the new column is index 10 } }
Now, the value of the last column in all the changed or new rows is set to ‘true’. Hope, you can use this.

Edit: Added ‘&& changes[0][1] < 10’, not to get an infinity loop if you do without ‘changes[0][2] !== changes[0][3]’

1 Like