Programatically updating data in Handsontable 11.1

Tags: #<Tag:0x00007efc64dcd360>
#1

Hello there,

since quite a while now, our dev team started migrating the handsontable version we use in our application, from 7 to 8. Due to some issues we couldn’t do the update and as time passed we tried to make the update to version 9, than to version 10, and finally to version 11.1 . Now version 12 is out, however, we would really want to make the update to 11.1 first and have it in production.

The current thing I am facing is the difference between updateData and loadData method. I have read the documentation and I think I have a somewhat clear ideea about these 2 methods. In our app we only use this kind of methods to improve performance and to not have to reload the whole table at each and every external change or side effect changes (when changing a cell result in changing another cell as well). This means that loadData defeats the purpose of our use cases. Having this in mind I understand that in theory, update data should work for data updates, however, I also need a way of removing and adding a row from the table, and so far I wasn’t able to do that with the updateData method. Could you please assist? What options do I have for implementing this desired behaviour?

Please have a look at the js fiddle from bellow. There you can see the update data works perfect when you change directly the object from the table, and also that removing and adding a new row to the table works fine with the usage of the loadData method, but it doesn’t work with updateData.
https://jsfiddle.net/fgkvLz1t/21/

Thank you in advance for your help!
Marius Comiati

#2

p.s: I haven’t specified that we use react in our application, and also the fact that we have bought tables with nested rows and without nested rows, and also tables where we can have bought.

#3

Hi @marius.comiati

It’s expected behavior while using updateData method to alter the rows as it does not reset index mapper information and the rows indexes are being changed when you are adding the new ones. loadData however do this and let you add the new rows this way.

#4

How can I keep all the other settings like they were before then? Like nested rows state for example, but not only. If the rows are collapsed than they are expanded after load data. Is there a way of making sure that other settings did not change?

#5

Expanded nestedRows is their default state, that’s why after adding/deleting the rows they are expanded again. You can alter this behavior by using collapseAll() method. I added it to your example:

https://jsfiddle.net/aszymanski/qfj5e0bn/

#6

I tried to implement a mix of load data and update data, and I ended up in another issue. I updated the fiddle to reproduce that issue as well. Basically, updateData seems to work only on child nodes, could you please explain what am I doing wrong?
https://jsfiddle.net/aqu31yLk/

#7

Hi @marius.comiati

In that case you should be using loadData() method instead of updateData() as the first one was created specifically for React in mind and works correctly in most cases. I swapped those methods in your example and you can now change the data in children and parent nodes: https://jsfiddle.net/aszymanski/t5hjwnbu/

#8

I see, by any chance are these issues be solved in handsontable 12?

#9

It’s not an issue, this is how it should work. Those two methods were separated in version 11 so it’s a new feature. It’s recommended to use loadData() method in React.

#10