{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/angular-data-grid/cell-editing-full-row/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Full row editing is for when you want all cells in the row to become editable at the same time. This gives the impression to the user that the record the row represents is being edited."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To enable full row editing, set the grid option "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"editType = 'fullRow'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If using custom cell editors, the cell editors will work in the exact same way with the following additions:"}]},{"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":"focusIn"}]},{"type":"text","value":": If your cell editor has a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"focusIn()"}]},{"type":"text","value":" method, it will get called when the user tabs into the cell. This should be used to put the focus on the particular item to be focused, e.g. the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"textfield"}]},{"type":"text","value":" within your cell editor."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"focusOut"}]},{"type":"text","value":": If your cell editor has a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"focusOut()"}]},{"type":"text","value":" method, it will get called when the user tabs out of the cell. No intended use for this, is just there to complement the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"focusIn()"}]},{"type":"text","value":" method."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Events: When a row stops editing, the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellValueChanged"}]},{"type":"text","value":" event gets called for each column and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowValueChanged"}]},{"type":"text","value":" gets called once for the row."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"full-row-edit-and-popup-editors","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#full-row-edit-and-popup-editors","ariaLabel":"full row edit and popup editors 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":"Full Row Edit and Popup Editors"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Full row editing is not compatible with popup editors. This is because a) the grid would look confusing to pop up an editor for each cell in the row at the same time and b) the complexity of navigation and popup is almost impossible to model, so the grid and your application code would be messy and very error prone. If you are using full row edit, then you are prevented from using popup editors."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This does not mean that you cannot show a popup from your 'in cell' editor - you are free to do that - however the responsibility of showing and hiding the popup belongs with your editor. You may want to use the grid's focus events to hide the popups when the user tabs or clicks out of the cell."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"example-full-row-edit","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-full-row-edit","ariaLabel":"example full row edit 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: Full Row Edit"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows full row editing. In addition to standard full row editing, the following should also be noted:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The 'Price' column has a custom editor demonstrating how you should implement the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"focusIn()"}]},{"type":"text","value":" method.\nBoth "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"focusIn()"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"focusOut()"}]},{"type":"text","value":" for this editor are logged to the console. Note that "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"focusIn()"}]},{"type":"text","value":"\nand "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"focusOut()"}]},{"type":"text","value":" are only called when the user is tabbing between cells when editing, they are not called\nas the user double clicks on a cell to start editing that cell, or the user finishes editing that cell by\ne.g. hitting the "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" key."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Pressing "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Tab"}]},{"type":"text","value":" / "},{"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":" while editing will move the focus between the cells on the editing row. Read only cells will be focusable while the row is in edit mode."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The 'Suppress Navigable' column is not navigable using "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Tab"}]},{"type":"text","value":" / "},{"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":". In other words, when tabbing around the grid, you cannot tab onto this cell."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Read Only"}]},{"type":"text","value":" column is not editable, so when the row goes into edit mode, the cell in the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Read Only"}]},{"type":"text","value":" column cannot be edited."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The button will start editing line two. It uses the API to start editing a cell, however the result is that the whole row will become editable starting with the specified cell."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellValueChanged"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowValueChanged"}]},{"type":"text","value":" events are logged to console."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Full Row Editing","name":"full-row-editing","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"menu\", \"columnpanel\"], \"exampleHeight\": 527 }"},"children":[]}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"Full Row Editing","version":null,"enterprise":null,"description":null},"headings":[{"id":"full-row-edit-and-popup-editors","depth":3,"value":"Full Row Edit and Popup Editors"},{"id":"example-full-row-edit","depth":3,"value":"Example: Full Row Edit"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"angular","srcPath":"/cell-editing-full-row","pageName":"cell-editing-full-row"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}