{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-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.3.5/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.3.5/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.3.5/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.3.5/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":"text","value":"Enabling Undo / Redo"},{"type":"element","tagName":"a","properties":{"href":"#enabling-undo--redo","ariaLabel":"enabling undo  redo permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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":"text","value":"Undo / Redo Shortcuts"},{"type":"element","tagName":"a","properties":{"href":"#undo--redo-shortcuts","ariaLabel":"undo  redo shortcuts permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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":"text","value":"Undo / Redo API"},{"type":"element","tagName":"a","properties":{"href":"#undo--redo-api","ariaLabel":"undo  redo api permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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":"text","value":"Undo / Redo Events"},{"type":"element","tagName":"a","properties":{"href":"#undo--redo-events","ariaLabel":"undo  redo events permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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.3.5/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":"text","value":"Example: Undo / Redo"},{"type":"element","tagName":"a","properties":{"href":"#example-undo--redo","ariaLabel":"example undo  redo permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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":"text","value":"Complex Objects"},{"type":"element","tagName":"a","properties":{"href":"#complex-objects","ariaLabel":"complex objects permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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.3.5/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.3.5/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.3.5/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.3.5/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.3.5/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.3.5/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.3.5/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.3.5/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.3.5/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.3.5/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,"sideMenu":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":"react","srcPath":"/undo-redo-edits","pageName":"undo-redo-edits"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}