{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/undo-redo-edits/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section covers how to allow users to undo / redo their cell edits."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/cell-editing/"},"children":[{"type":"text","value":"Cell Editing"}]},{"type":"text","value":" is enabled in the grid, it is usually desirable to allow users to undo / redo any edits."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Users can change the contents of cells through the following grid features:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/cell-editing/"},"children":[{"type":"text","value":"Cell Editing"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/clipboard/"},"children":[{"type":"text","value":"Copy / Paste"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/range-selection-fill-handle/"},"children":[{"type":"text","value":"Fill Handle"}]}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This Undo / Redo feature is designed to be a recovery mechanism for user editing mistakes. Performing grid\noperations that change the row / column order, e.g. sorting, filtering and grouping, will clear the\nundo / redo stacks."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-undo--redo","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#enabling-undo--redo","ariaLabel":"enabling undo  redo permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Enabling Undo / Redo"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following undo / redo properties are provided in the grid options interface:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    undoRedoCellEditing: true,\n    undoRedoCellEditingLimit: 20\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As shown in the snippet above, undo / redo is enabled through the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undoRedoCellEditing"}]},{"type":"text","value":" property."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The default number of undo / redo steps is "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"10"}]},{"type":"text","value":". To change this default the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undoRedoCellEditingLimit"}]},{"type":"text","value":" property can be used."}]},{"type":"element","tagName":"h2","properties":{"id":"undo--redo-shortcuts","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#undo--redo-shortcuts","ariaLabel":"undo  redo shortcuts permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Undo / Redo Shortcuts"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following keyboard shortcuts are available when undo / redo is enabled:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Z"}]},{"type":"text","value":" / "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Command"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Z"}]},{"type":"text","value":": will undo the last cell edit(s)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Y"}]},{"type":"text","value":" / "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Command"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Y"}]},{"type":"text","value":": will redo the last undo."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that the grid needs focus for these shortcuts to have an effect."}]},{"type":"element","tagName":"h2","properties":{"id":"undo--redo-api","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#undo--redo-api","ariaLabel":"undo  redo api permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Undo / Redo API"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is also possible to programmatically control undo / redo and check the number of currently available undo / redo actions. These API methods are listed below:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"UndoRedo"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"undo--redo-events","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#undo--redo-events","ariaLabel":"undo  redo events permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Undo / Redo Events"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following events are relevant to undo / redo:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-events/events.json","section":"editing","names":"[\"undoStarted\", \"undoEnded\", \"redoStarted\", \"redoEnded\", \"cellValueChanged\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For an undo / redo, the events will be fired as:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"One "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undoStarted"}]},{"type":"text","value":" / "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"redoStarted"}]},{"type":"text","value":" event."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Zero to many "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellValueChanged"}]},{"type":"text","value":" events."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"One "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undoEnded"}]},{"type":"text","value":" / "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"redoEnded"}]},{"type":"text","value":" event."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When there are no undo / redo operations to perform, the started and ended events will still fire. However, the ended event will have a value of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":" for the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"operationPerformed"}]},{"type":"text","value":" property (compared to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" when an operation was performed)."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the application is doing work each time it receives a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellValueChanged"}]},{"type":"text","value":" event, you can use the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undoStarted"}]},{"type":"text","value":" / "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"redoStarted"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undoEnded"}]},{"type":"text","value":" / "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"redoEnded"}]},{"type":"text","value":" events to suspend the application's work and then do the work for all cells impacted by the undo / redo operation afterwards."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/value-setters/#read-only-edit"},"children":[{"type":"text","value":"Read Only Edit"}]},{"type":"text","value":" is enabled, undo / redo will not perform any operations. The started and ended events will still fire, which means that you can implement your own undo / redo by keeping track of the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellEditRequest"}]},{"type":"text","value":" events."}]},{"type":"element","tagName":"h2","properties":{"id":"example-undo--redo","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-undo--redo","ariaLabel":"example undo  redo permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Undo / Redo"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below has the following grid options enabled to demonstrate undo / redo:"}]},{"type":"element","tagName":"snippet","properties":{"spacebetweenproperties":"true"},"children":[{"type":"text","value":"\n|const gridOptions = {\n|    defaultColDef: {\n|        // makes all cells editable\n|        editable: true\n|    },\n|    // allows copy / paste using cell ranges\n|    enableRangeSelection: true,\n|\n|    // enables the fill handle\n|    enableFillHandle: true,\n|\n|    // enables undo / redo\n|    undoRedoCellEditing: true,\n|\n|    // restricts the number of undo / redo steps to 5\n|    undoRedoCellEditingLimit: 5,\n|\n|    // enables flashing to help see cell changes\n|    enableCellChangeFlash: true,\n|}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To see undo / redo in action, try the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Cell Editing"}]},{"type":"text","value":": click and edit some cell values."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Fill Handle"}]},{"type":"text","value":": drag the fill handle to change a range of cells."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Copy / Paste"}]},{"type":"text","value":": use "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"C"}]},{"type":"text","value":" / "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"V"}]},{"type":"text","value":" to copy and paste a range of cells."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Undo Shortcut"}]},{"type":"text","value":": use "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Z"}]},{"type":"text","value":" to undo the cell edits."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Redo Shortcut"}]},{"type":"text","value":": use "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Y"}]},{"type":"text","value":" to redo the undone cell edits."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Undo API"}]},{"type":"text","value":": use the 'Undo' button to invoke "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridApi.undoCellEditing()"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Redo API"}]},{"type":"text","value":": use the 'Redo' button to invoke "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridApi.redoCellEditing()"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Undo / Redo Limit"}]},{"type":"text","value":": only 5 actions are allowed as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undoRedoCellEditingLimit=5"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Undo / Redo","name":"undo-redo","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 530, \"modules\": [\"clientside\", \"range\", \"clipboard\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"complex-objects","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#complex-objects","ariaLabel":"complex objects permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Complex Objects"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If your cell values contain complex objects, there are a few steps necessary for undo / redo to work."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For manual editing, a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/value-parsers/"},"children":[{"type":"text","value":"Value Parser"}]},{"type":"text","value":" is required to convert string values back into complex objects."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'a',\n            editable: true,\n            valueParser: params => {\n                // convert `params.newValue` string value into complex object\n                return {\n                    actualValue: params.newValue,\n                    anotherProperty: params.data.anotherProperty,\n                }\n            }\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/value-getters/"},"children":[{"type":"text","value":"Value Getter"}]},{"type":"text","value":" is being used to create complex objects, a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/value-setters/"},"children":[{"type":"text","value":"Value Setter"}]},{"type":"text","value":" must be used to update the data. "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.equals"}]},{"type":"text","value":" is also needed when "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/change-detection/#comparing-values"},"children":[{"type":"text","value":"Comparing Values"}]},{"type":"text","value":" to determine if the cell value has changed for rendering."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'a',\n            editable: true,\n            valueGetter: params => {\n                // create complex object from data\n                return {\n                    actualValue: params.data[params.colDef.field],\n                    anotherProperty: params.data.anotherProperty,\n                }\n            },\n            valueSetter: params => {\n                // update data from complex object\n                params.data[params.colDef.field] = params.newValue.actualValue\n                return true\n            },\n            equals: (valueA, valueB) => {\n                // compare complex objects\n                return valueA.actualValue === valueB.actualValue\n            }\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Complex object cell values must be immutable. If the cell values are mutated, undo / redo will not be able to restore the original values. This means that the Value Parser must return a new complex object."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When using a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/range-selection-fill-handle/"},"children":[{"type":"text","value":"Fill Handle"}]},{"type":"text","value":" with a horizontal fill direction and your columns do not all have same complex object type, you will need to implement a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/range-selection-fill-handle/#custom-user-function"},"children":[{"type":"text","value":"Custom User Function"}]},{"type":"text","value":". Note that the fill values provided to the function could be complex objects from any column, which you will need to handle."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/clipboard/"},"children":[{"type":"text","value":"Clipboard"}]},{"type":"text","value":" operations (copy/paste) use string values, so complex objects require "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/clipboard/#processing-pasted-data"},"children":[{"type":"text","value":"Processing Pasted Data"}]},{"type":"text","value":" to convert between complex objects and strings."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates how to use complex objects with undo / redo."}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For column "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"A"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A Value Getter is used to create complex objects from the data."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The complex objects have a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"toString"}]},{"type":"text","value":" property used for rendering."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A Value Setter is used to update the data from the complex objects (the inverse of the Value Getter)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A Value Parser is used to convert the string values produced from cell editing into complex objects (the inverse of the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"toString"}]},{"type":"text","value":" method)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A Column Definition "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"equals"}]},{"type":"text","value":" function is provided to compare the complex objects (without this the grid would use reference equality, but this won't work here as the Value Getter returns a new object each time)."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For column "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"B"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The column values are complex objects."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/value-formatters/"},"children":[{"type":"text","value":"Value Formatter"}]},{"type":"text","value":" is used to convert the complex objects into strings for rendering."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A Value Parser is used to convert the string values produced from cell editing into complex objects (the inverse of the Value Formatter)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/cell-editors/#dynamic-parameters"},"children":[{"type":"text","value":"Dynamic Parameters"}]},{"type":"text","value":" are provided to the cell editor to display a string value when you edit the cell (column "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"A"}]},{"type":"text","value":" didn't need this as it has a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"toString"}]},{"type":"text","value":" property)."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For all columns:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"fillHandleDirection = 'y'"}]},{"type":"text","value":" which prevents the Fill Handle from being used to drag values between the columns, as they have different complex object formats."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"processCellForClipboard"}]},{"type":"text","value":" is implemented, which converts complex object values into strings when copying cell values."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"processCellFromClipboard"}]},{"type":"text","value":" is implemented, which converts string values into complex objects when pasting cell values."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Try the following actions:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Cell Editing"}]},{"type":"text","value":": click and edit some cell values."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Fill Handle"}]},{"type":"text","value":": drag the fill handle to change a range of cells."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Copy / Paste"}]},{"type":"text","value":": use "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"C"}]},{"type":"text","value":" / "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"V"}]},{"type":"text","value":" to copy and paste a range of cells."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Undo Shortcut"}]},{"type":"text","value":": use "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Z"}]},{"type":"text","value":" to undo the cell edits."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Redo Shortcut"}]},{"type":"text","value":": use "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Y"}]},{"type":"text","value":" to redo the undone cell edits."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Undo API"}]},{"type":"text","value":": use the 'Undo' button to invoke "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridApi.undoCellEditing()"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Redo API"}]},{"type":"text","value":": use the 'Redo' button to invoke "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridApi.redoCellEditing()"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Undo / Redo Limit"}]},{"type":"text","value":": only 5 actions are allowed as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undoRedoCellEditingLimit=5"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Undo / Redo with Complex Objects","name":"undo-redo-complex-objects","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 530, \"modules\": [\"clientside\", \"range\", \"clipboard\"] }"},"children":[]}]}]},"frontmatter":{"title":"Undo / Redo Edits","version":null,"enterprise":null,"description":null},"headings":[{"id":"enabling-undo--redo","depth":2,"value":"Enabling Undo / Redo"},{"id":"undo--redo-shortcuts","depth":2,"value":"Undo / Redo Shortcuts"},{"id":"undo--redo-api","depth":2,"value":"Undo / Redo API"},{"id":"undo--redo-events","depth":2,"value":"Undo / Redo Events"},{"id":"example-undo--redo","depth":2,"value":"Example: Undo / Redo"},{"id":"complex-objects","depth":2,"value":"Complex Objects"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/undo-redo-edits","pageName":"undo-redo-edits"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}