I’m using manualColumnResize and manualRowMove as true.
I want to save the state of manualColumnResize with persistentState.
I want to retrieve manualRowMove’s state from handsontable to the application without saving it with persistentState. (Then the application’s implementation will save it to the database.)
Next time when handsontable is initialized, I want the state of manualColumnResize to be loaded, but I don’t want to load the state of manualRowMove.
In this case, what setting do I need to make?
The persistentState option seems to only enable it, and the hooks don’t seem to be able to filter the data to save/load.
To get the actual row index sequence you may use the indexMapper - Handsontable example - JSFiddle - Code Playground so you’ll be able to use manualRowMove as the result of the mapper call.
Let me know if that meets your goals.
Now I understand how to get the state of manualRowMove.
I’d like to limit the states to be saved in persistentState to the manualColumnResize and manualColumnMove states and exclude the manualRowMove state, do you have a recipe for this method?
The persistentState options and hooks don’t seem to have the ability to do that.
Is the only way to do this is to disable persistentState and call a custom function to save the state to localStorage in the afterColumnResize and afterColumnMove hooks?
That is a great question. Let’s check some options…
It appears that the persistentStateSave doesn’t allow us to return false or provide a different order (example: arguments[1] = [0,1,2,3,4,5,6,7,8,9]). The hook is called after the action is already done.
What we can block, is a row movement - so we can use the beforeRowMove to return false for operations that are not done by the user. Here’s an example https://jsfiddle.net/AMBudnik/evztw753/ where I’m using the 3rd parameter (that is undefined for persistentState row move) to block it. This approach allows users to move rows and keep a clear state on load.
Alternatively, there’s an API method called resetValue that is made to reset a certain local storage value. Here’s an example https://jsfiddle.net/oa7hfgw4/ Let me know if it works for you.
The first example is that undo/redo doesn’t seem to work. My case requires undo/redo to work.
The second example seems to work a bit oddly.
STEP1: Drag the rows to reorder them. A “manualRowMove” key is created in LocalStorage.
STEP2: Reload. The ordered rows are displayed according to the key recorded in LocalStorage. This is unwanted behavior. At this point, the “manualRowMove” key in the LocalStorage is removed.
STEP3: Reload for the second time. The line is now displayed in the initialized order.
Do I need to do a write to LocalStorage once and delete it to get the behavior I want?
When a table has a lot of rows, large array writes will occur, which feels redundant.
I think it would be more elegant to be able to selectively suppress writes to local storage in manualRowMove or persistentState…
After checking some of the approaches of blocking changes via our hooks I have to admit that in the end, I suggest using the localStorage customization for all the functionalities you’d like to store.
Currently, using persistentState for only some of the functionalities is not well supported. It may work for some of the cases but it requires more coding to block those operations than creating the custom localStorage handling.
Thank you for mentioning this case in the first place. I will review the docs of our persistentState and report that in some cases a developer would require only some of the plugin results to be saved, not all.
