[FlexGrid] Undo/Redo does not work when adding/removing rows

[FlexGrid] Undo/Redo does not work when adding/removing rows

Posted by: james.ingham on 27 November 2019, 10:35 am EST

• 

  james.ingham

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 27 November 2019, 10:35 am EST

  Dear Support,

  We are quite happy about the universal Undo/Redo feature you added since version 5.20192.624, particularly the one for FlexGrid.

  There is one issue I noticed that if we add or remove a row from the collectionView of the flex grid. e.g.

  
  // Add a row
  grid.collectionView.addNew();
  
  // Remove a row
  grid.collectionView.remove(row)
  
  

  Then undo/redo does not work. It looks like these changes are not tracked inside the undo stack. Could you please take a look and let us know whether it is a bug? Or we need to do anything with it.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 27 November 2019, 3:18 pm EST

  Hi James,

  This is expected behavior because the UndoStack class only keeps track of the HTML elements and wijmo controls that are changed using the UI. It does not keep track of the changes done in the code.

  Regards,
  
  Ashwin

• 

  james.ingham

  • Post Options:
  • Link
    Copy

  Posted 27 November 2019, 5:52 pm EST

  Hi Ashwin,

  This is something we don’t agree with. Despite the fact users cannot directly add/delete a row from flexgrid’s native UI, in most cases developers will create Add or Delete buttons to do this job. Add/Delete row is an indispensable feature for any excel-like implementations. Lacking this functionality makes FlexGrid’s Undo/Redo an incomplete solution and cannot be accepted in most serious projects.

  Because of this, at the moment we still have to stick to our own Undo/Redo solution, but technically I don’t think it would be hard for you to add this missing feature. The CollectionView has 3 ObservableArrays:

  • “itemsEdited
    
    itemsAdded
    
    itemsRemoved”

  It looks like you only used the 1st one to implement Undo/Redo.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 27 November 2019, 7:46 pm EST

  Hi James,

  I think you are missing something. FlexGrid already provides allowAddNew and allowDelete properties that can be used to add or delete records using the UI and it is compatible with the UndoStack. Please refer to their documentation links below:

  • "* “allowAddNew: https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#allowaddnew”
  • “allowDelete: https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#allowdelete”
    
    "

  Regarding using the observables for undo/redo:

  We have already tried to add this feature but it is not very practical. When the user edits a record, we mark it as changed, but don’t copy the original value or the number of edits.

  So, if he edited fields A, then B, then C, the record would appear as edited. If then he undid some editing operations, it would be hard to tell whether the record is back at the original state or not.

  ~regards

• 

  james.ingham

  • Post Options:
  • Link
    Copy

  Posted 30 November 2019, 7:18 pm EST

  Hi Ashwin,

  We implemented our own Undo/Redo mechanism using the trackChanges feature:
  
  https://www.grapecity.com/wijmo/api/classes/wijmo.collectionview.html#trackchanges

  It is indeed doable by utilising itemsEdited/itemsAdded/itemsDeleted ObservableArrays. However we still prefer to use Wijmo’s native redo/undo because our solution cannot do the layout-level undo/redo, e.g. column resize, reorder, grouping, freezing etc. It also has some minor issues if user adds a new row and doing multi-cell copy/paste… What disappointed us a little bit is that Wijmo’s native Undo/Redo on FlexGrid seems more primitive than ours

  BTW, I just noticed the Undo/Redo on FlexSheet seems working PERFECTLY on all sorts of edit/add/delete by default. Is there any chance that you can improve this on FlexGrid? Currently our project is heavily built upon FlexGrid. It’d be very difficult for us to switch to FlexSheet at this time.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 1 December 2019, 6:31 pm EST

  Hi James,
  
  Thank you for your patience.
  
  Currently, the FlexSheet Undo/Redo action is performed using its own Undo/Action handlers.
  
  However, we have a demo sample for the same for adding/deleting the rows action in the FlexGrid.
  
  It requires few lines of code to be added while adding the item in the Grid.

  
  /*where g is FlexGrid instance*/
  g.focus();
  ...
  g.onRowAdded(new CellRangeEventArgs(g.cells, g.selection)); /* create undoable action */
  
  

  Please also refer to the following demo sample for the same:
  
  https://www.grapecity.com/wijmo/demos/Undo/UndoStack/purejs

  Hope it helps!

  Regards.
  
  Manish Gupta

• 

  james.ingham

  • Post Options:
  • Link
    Copy

  Posted 21 January 2020, 3:22 pm EST

  Hi Manish,

  Thanks for providing us this code sample. It works and we now switched from our own redo/undo to wijmo’s native solution.

  Just a minor issue:
  
  If I select multiple rows and then delete them, it stacks the deleted rows one by one instead of as a whole, so I have to call multiple undo() to bring them back. Is there a way to undo/redo all selected rows as one action?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 22 January 2020, 7:33 pm EST

  Hi James,

  I have asked the dev team on whether this feature can be implemented. The internal tracking id of the case is 418235. I will update you as soon as I will hear from them.

  ~regards

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 6 February 2020, 10:13 pm EST

  Hi James,

  This feature has been added to the latest nightly build of Wijmo. You may verify the same using the sample below. We will notify you as soon as the next stable build is released.

  https://stackblitz.com/edit/js-5rabpk

  PS: Nightly builds have not passed through the QA cycles as all of our release builds do. Therefore, they are not suitable in a production environment.

  ~regards