{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/vue-data-grid/cell-editing-start-stop/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This page discusses the different ways in which Cell Editing can be started and stopped."}]},{"type":"element","tagName":"h2","properties":{"id":"start-editing","style":"position:relative;"},"children":[{"type":"text","value":"Start Editing"},{"type":"element","tagName":"a","properties":{"href":"#start-editing","ariaLabel":"start editing 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":"Assuming "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"editable=true"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"editable"}]},{"type":"text","value":" has a callback that returns "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" for the Column Definition, editing will start upon any of 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":"Edit Key Pressed"}]},{"type":"text","value":": One of the following is pressed: "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":", "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"F2"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Backspace"}]},{"type":"text","value":": The default editor will start and clear the contents of the cell if "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Backspace"}]},{"type":"text","value":" is pressed on Windows. To mimic this behaviour on MacOS, use the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"enableCellEditingOnBackspace=true"}]},{"type":"text","value":" grid option."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Printable Key Pressed"}]},{"type":"text","value":": Any of the following characters are pressed: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!\"£$%^&amp;*()_+-=[];\\'#,./\\|<>?:@~{}"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":" The default editor places this character into the edit field so that the user experience is they are typing into the cell."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Mouse Double Click"}]},{"type":"text","value":": If the mouse is double-clicked. There is a grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"singleClickEdit"}]},{"type":"text","value":" that will allow single-click to start editing instead of double-click. Another property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressClickEdit"}]},{"type":"text","value":" will prevent both single-click and double-click from starting the edit; use this if you only want to have your own way of starting editing, such as clicking a button in your custom cell renderer."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"api.startEditingCell(params)"}]},{"type":"text","value":": If you call "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"startEditingCell(params)"}]},{"type":"text","value":" on the grid API"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h2","properties":{"id":"stop-editing","style":"position:relative;"},"children":[{"type":"text","value":"Stop Editing"},{"type":"element","tagName":"a","properties":{"href":"#stop-editing","ariaLabel":"stop editing 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 grid will stop editing when any of the following happen:"}]},{"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":"Callback stopEditing"}]},{"type":"text","value":": The callback "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"stopEditing"}]},{"type":"text","value":" (from the params above) gets called by the editor. This is how your cell editor informs the grid to stop editing."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Other Cell Focus"}]},{"type":"text","value":": If focus in the grid goes to another cell, the editing will stop."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Enter Key Down"}]},{"type":"text","value":": If the grid receives an "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" key press event on the cell. If you do "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"not"}]},{"type":"text","value":" want to stop editing when "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" is pressed, then listen for the event and stop propagation so the grid does not act on the event."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Escape Key Down"}]},{"type":"text","value":": Similar to "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":", if "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Esc"}]},{"type":"text","value":" key is pressed, editing will stop. Unlike "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":", the "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Esc"}]},{"type":"text","value":" action will discard changes rather than taking the new value."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Tab Key Down"}]},{"type":"text","value":": Editing will stop, accepting changes, and editing will move to the next cell, or the previous cell if "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Shift"}]},{"type":"text","value":" is also pressed."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Popup Editor Closed"}]},{"type":"text","value":": If using popup editor, the popup is configured to close if you click outside the editor. Closing the popup triggers the grid to stop editing."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"gridApi.stopEditing()"}]},{"type":"text","value":": If you call "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"stopEditing()"}]},{"type":"text","value":" on the grid API."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h3","properties":{"id":"start--stop-events","style":"position:relative;"},"children":[{"type":"text","value":"Start / Stop Events"},{"type":"element","tagName":"a","properties":{"href":"#start--stop-events","ariaLabel":"start  stop 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 fired when editing is started and stopped."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-events/events.json","section":"editing","names":"[\"cellEditingStarted\", \"cellEditingStopped\"]"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"tab-navigation","style":"position:relative;"},"children":[{"type":"text","value":"Tab Navigation"},{"type":"element","tagName":"a","properties":{"href":"#tab-navigation","ariaLabel":"tab navigation 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":"While editing, if you hit "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Tab"}]},{"type":"text","value":", the editing will stop for the current cell and start on the next cell. If you hold down "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Shift"}]},{"type":"text","value":"+"},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Tab"}]},{"type":"text","value":", the same will happen except the previous cell will start editing rather than the next. This is in line with editing data in Excel."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The next and previous cells can also be navigated using the API functions "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.tabToNextCell()"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.tabToPreviousCell()"}]},{"type":"text","value":". Both of these methods will return "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" if the navigation was successful, otherwise "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"navigation","names":"[\"tabToNextCell\", \"tabToPreviousCell\"]"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"editing-api","style":"position:relative;"},"children":[{"type":"text","value":"Editing API"},{"type":"element","tagName":"a","properties":{"href":"#editing-api","ariaLabel":"editing 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":"The grid has the following API methods for editing:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"editing","names":"[\"startEditingCell\", \"stopEditing\", \"getEditingCells\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the grid is editing, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getEditingCells()"}]},{"type":"text","value":" returns back details of the editing cell(s). The result is an array of objects. If only one cell is editing (the default) then the array will have one entry. If multiple cells are editing (e.g. "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.1/cell-editing-full-row/"},"children":[{"type":"text","value":"Full Row Edit"}]},{"type":"text","value":") then the array contains all editing cells."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Below is a code example of using the editing API methods."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n| // start editing country cell on first row\n| gridOptions.api.startEditingCell({\n|     rowIndex: 0,\n|     colKey: 'country'\n| });\n| \n| // stop editing\n| gridOptions.api.stopEditing();\n| \n| // print details of editing cell\n| const cellDefs = gridOptions.api.getEditingCells();\n| cellDefs.forEach(cellDef => {\n|     console.log(cellDef.rowIndex);\n|     console.log(cellDef.column.getId());\n|     console.log(cellDef.floating);\n| });\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below illustrates different parts of the editing API. Each button starts editing the 'Last Name' column of the first row with the following differences:"}]},{"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":"edit()"}]},{"type":"text","value":": Normal editing start."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"edit(Backspace)"}]},{"type":"text","value":": Edit as if delete button was pressed (clears contents first)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"edit('T')"}]},{"type":"text","value":": Edit as if 'T' was pressed (places 'T' into cell)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"edit(top)"}]},{"type":"text","value":": Edits top pinned row."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"edit(bottom)"}]},{"type":"text","value":": Edits bottom pinned row."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example also demonstrates the following buttons for edit navigation:"}]},{"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":"stop()"}]},{"type":"text","value":": Stops editing."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"next()"}]},{"type":"text","value":": Edits the next cell."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"previous()"}]},{"type":"text","value":": Edits the previous cell."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, the example also demonstrates querying which cell is editing:"}]},{"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":"which()"}]},{"type":"text","value":": If the grid is editing, prints to the console which cell is in edit mode."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Cell Editing","name":"cell-editing","type":"generated","options":"{ \"exampleHeight\": 545 }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"enter-key-navigation","style":"position:relative;"},"children":[{"type":"text","value":"Enter Key Navigation"},{"type":"element","tagName":"a","properties":{"href":"#enter-key-navigation","ariaLabel":"enter key navigation 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":"By default pressing "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" will start editing on a cell, or stop editing on an editing cell. It will not navigate to the cell below."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To allow consistency with Excel the grid has the following properties:"}]},{"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":"enterMovesDown"}]},{"type":"text","value":": Set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" to have "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" key move focus to the cell below if not editing. The default is "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" key starts editing the currently focused cell."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"enterMovesDownAfterEdit:"}]},{"type":"text","value":" Set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" to have "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" key move focus to the cell below after "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" is pressed while editing. The default is editing will stop and focus will remain on the editing cell."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates the focus moving down when "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" is pressed."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Enter Key Navigation","name":"enter-key-navigation","type":"generated","options":"{ \"exampleHeight\": 555 }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"single-click-editing","style":"position:relative;"},"children":[{"type":"text","value":"Single-Click Editing"},{"type":"element","tagName":"a","properties":{"href":"#single-click-editing","ariaLabel":"single click editing 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 default is for the grid to enter editing when you Double-Click on a cell. To change the default so that a single-click starts editing, set the property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions.singleClickEdit = true"}]},{"type":"text","value":". This is useful when you want a cell to enter edit mode as soon as you click on it, similar to the experience you get when inside Excel."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is also possible to define single-click editing on a per-column basis using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.singleClickEdit = true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid below has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"singleClickEdit = true"}]},{"type":"text","value":" so that editing will start on a cell when you single-click on it."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Single Click Editing","name":"single-click-editing","type":"generated","options":"{ \"exampleHeight\": 520 }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"no-click-editing","style":"position:relative;"},"children":[{"type":"text","value":"No-Click Editing"},{"type":"element","tagName":"a","properties":{"href":"#no-click-editing","ariaLabel":"no click editing 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 possible to configure the grid so neither Single-Click or Double-Click starts editing. To do this set the property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressClickEdit=true"}]},{"type":"text","value":". This is useful when you want to start the editing in another way, such as including a button in your cell renderer."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid below has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressClickEdit = true"}]},{"type":"text","value":" so that clicking doesn't started editing. The grid configures a Cell Renderer with a button to start editing."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"No Click Editing","name":"single-click-editing-renderer","type":"generated","options":"{ \"exampleHeight\": 520 }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"stop-editing-when-grid-loses-focus","style":"position:relative;"},"children":[{"type":"text","value":"Stop Editing When Grid Loses Focus"},{"type":"element","tagName":"a","properties":{"href":"#stop-editing-when-grid-loses-focus","ariaLabel":"stop editing when grid loses focus 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":"By default, the grid will not stop editing the currently editing cell when the cell loses focus, unless another\ncell is clicked on. This means clicking on the grid header, or another part of your application, will not stop editing.\nThis can be bad if, for example, you have a save button, and you need the grid to stop editing before you execute\nyour save function (e.g. you want to make sure the edit is saved into the grid's state)."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want the grid to stop editing when focus leaves the cell or the grid, set the grid property\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"stopEditingWhenCellsLoseFocus = true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows the editing with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"stopEditingWhenCellsLoseFocus = true"}]},{"type":"text","value":". Notice the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Double-click to start editing 'Age', then click outside the grid (on the 'Dummy Save' button, or the dummy text field) and the grid will stop editing."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Double-click to start editing 'Year', a custom popup editor appears, you can click anywhere on the popup editor, but once you click outside the editor, the popup closes."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Stop Editing When Cells Loses Focus","name":"stop-edit-when-grid-loses-focus","type":"generated","options":"{ \"exampleHeight\": 510 }"},"children":[]}]},{"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":"Cell Editing can also be performed via Cell Editor Components; please see "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.1/component-cell-editor/"},"children":[{"type":"text","value":"Cell Editor Components"}]},{"type":"text","value":" for more information."}]}]}]}]},"frontmatter":{"title":"Start / Stop Cell Editing","version":null,"enterprise":null,"sideMenu":null,"description":null},"headings":[{"id":"start-editing","depth":2,"value":"Start Editing"},{"id":"stop-editing","depth":2,"value":"Stop Editing"},{"id":"start--stop-events","depth":3,"value":"Start / Stop Events"},{"id":"tab-navigation","depth":2,"value":"Tab Navigation"},{"id":"editing-api","depth":2,"value":"Editing API"},{"id":"enter-key-navigation","depth":2,"value":"Enter Key Navigation"},{"id":"single-click-editing","depth":2,"value":"Single-Click Editing"},{"id":"no-click-editing","depth":2,"value":"No-Click Editing"},{"id":"stop-editing-when-grid-loses-focus","depth":2,"value":"Stop Editing When Grid Loses Focus"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"vue","srcPath":"/cell-editing-start-stop","pageName":"cell-editing-start-stop"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}