How to perform undo operation on external button click

Tags: #<Tag:0x00007f8b2b0aaba0>
#1

Hi,

I have HandsonTable. I want to perform undo operation using external button click. Could you please help me on this.

Undo operation should perform

  1. Undo the value change
  2. Undo the CSS change in cell

Thanks

#2

Hi,

For the value you could get the undoRedo plugin and call its undo() method: https://handsontable.com/docs/7.3.0/UndoRedo.html#undo
When it comes to CSS it depends how your CSS change was made. I guess you could create an undoAction and register it as any other: https://github.com/handsontable/handsontable/blob/ca1ab950de4522bdb899f9e442cef978d860685e/src/plugins/undoRedo/undoRedo.js#L272-L325

Kind regards,
Wojciech

#3

Thanks for the reply…

  1. For Value I am able to perform Undo
  2. For CSS: Do you mean I need to track the CSS changes in local storage and based on that I need to revert back the changes.

Do undo() method support reverting back CSS changes ?

Thanks’

#4

Hey @fayejitendra

what CSS changes do you do? Is there any possibility to share a demo with your code? I would like to see what changes can be made.

#5

HI, Please find the below code: Due to some save issue in jsfiddle, I am not able to provide code link.

In below code: I am locking the cell (Readonly + gray background of cell) of column 2 after doing any changes in row. I want to revert back the css changes after undo.

HTML

CSS
.handsontable .locked {
background: lightgray
}

JS code

var example = document.getElementById(‘example1’);

var hot1 = new Handsontable(example, {
data: Handsontable.helper.createSpreadsheetData(3, 4),
width: 584,
height: 320,
colWidths: 100,
rowHeights: 23,
contextMenu: true,
rowHeaders: true,
colHeaders: true
});

hot1.addHook(‘afterChange’, afterChange);

function afterChange(changes) {
if(changes){
changes.forEach(([row, prop, oldValue, newValue]) => {

      if(prop==1)
      {
        hot1.setCellMeta(row, 2, 'readOnly', 'true');
        hot1.setCellMeta(row, 2, 'className', 'locked');
         hot1.render()
      }
    });
  }
	 }

Thanks

#6

Thank you for sharing the code.

The metadata are not added to the undo stack of the undoRedo plugin. However, you can use the afterUndo hook to add the logic by yourself. You would just need to use setCellMeta again to pass empty values of the readOnly and className for a certain cell.

#7

Actually data is coming from database and based on some value I am locking the fields in page load.
on top of that when user is changing the value then also I am locking the fields.

So it is becoming hard to identify which field we have to unlock while performing undo. Because I am facing problem to track just immediate locked values.

Thanks

#8

Can you describe what are all the possible scenarios?

#9

I guess that we close the topic as there’s no reply for some time.

If you still face this or any other issue @fayejitendra please feel free to open a new ticket.

#10