How to specify the target of the persistent state save

Tags: #<Tag:0x00007efc607ed9f8>
#1

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.

#2

Hi @comman

I guess that you can store the changes via afterRowMove hook.

11

To get the actual row index sequence you may use the indexMapper - https://jsfiddle.net/AMBudnik/4y3n5czq/ so you’ll be able to use manualRowMove as the result of the mapper call.
Let me know if that meets your goals.

#3

Thanks for the advice and the sample code.

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?

#4

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.

Returning false in the persistentStateLoad hook is also pointless as that is also an -after-action hook.

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.

#5

Thanks for the code suggestions.

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…

#6

I need your advice, please.

#7

Sorry for keeping you waiting @comman

We’re doing an investigation over persistentState. I will gather all the information that we have right now and update you within 3-4 hours.

#8

Thank you for your patience.

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.

#9

Thanks for the advice.

I would like to see a more detailed explanation of localStorage customization.
I’d like to see a simple sample if possible.

Does that mean overloading the methods of window.localStorage?

#10

Hi @comman

here’s an example that my Support Engineer created for you https://jsfiddle.net/pm23xyc5/
It has two actions

  • save order on a button. When you click RUN button to reload the page the order is saved.
  • erase button. When you click it the next RUN click with return the default order of the rows.
#11

I understand.

You are saying that to suppress the persistent state behavior of some plugins, I need to manipulate localStorage directly.

Thanks for the advice and samples.
I’ll be working on this case based on your advice.

In the future, I’d like to see you implement a persistent state suppression flag for each plugin.

#12

Yes, that is true.

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.

#13