{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/master-detail-custom-detail/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When a Master Row is expanded, the grid uses the default Detail Cell Renderer to create and display the Detail Grid inside one row of the Master Grid. You can provide a customer Detail Cell Renderer to display something else if the default Detail Cell Renderer doesn't do what you want."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Configure the grid to use a customer Detail Cell Renderer using the grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"detailCellRenderer"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"snippet","properties":{"spacebetweenproperties":"true"},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // normally left blank, the grid will use the default Detail Cell Renderer\n    detailCellRenderer: 'myCellRendererComp',\n    // params sent to the Detail Cell Renderer, in this case your MyCellRendererComp\n    detailCellRendererParams: {},\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Detail Cell Renderer should be a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.1/component-cell-renderer/"},"children":[{"type":"text","value":"Cell Renderer"}]},{"type":"text","value":" component. See "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.1/component-cell-renderer/"},"children":[{"type":"text","value":"Cell Renderer"}]},{"type":"text","value":" on how to build\nand register a Cell Renderer with the grid."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following examples demonstrate minimalist custom Detail Cell Renderer. Note that where a Detail Grid would normally appear, only the message \"My Customer Detail\" is shown."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Simple Detail Cell Renderer","name":"simple-custom-detail","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 545, \"modules\": [\"clientside\", \"masterdetail\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"custom-detail-with-form","style":"position:relative;"},"children":[{"type":"text","value":"Custom Detail With Form"},{"type":"element","tagName":"a","properties":{"href":"#custom-detail-with-form","ariaLabel":"custom detail with form 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 not mandatory to display a grid inside the detail section. As you are providing a custom component, there are no restrictions as to what can appear inside the custom component."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This example shows a custom Detail Cell Renderer that uses a form rather than a grid."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Detail Cell Renderer with Form","name":"custom-detail-with-form","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"masterdetail\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"custom-detail-with-grid","style":"position:relative;"},"children":[{"type":"text","value":"Custom Detail With Grid"},{"type":"element","tagName":"a","properties":{"href":"#custom-detail-with-grid","ariaLabel":"custom detail with grid 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 provide a Customer Detail Grid that does a similar job to the default Detail Cell Renderer. This example demonstrates displaying a custom grid as the detail."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Detail Cell Renderer with Grid","name":"custom-detail-with-grid","type":"mixed","options":"{ \"enterprise\": true, \"exampleHeight\": 545, \"modules\": [\"clientside\", \"masterdetail\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"register-detail-grid","style":"position:relative;"},"children":[{"type":"text","value":"Register Detail Grid"},{"type":"element","tagName":"a","properties":{"href":"#register-detail-grid","ariaLabel":"register detail grid 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":"In order for the Detail Grid's API to be available via the Master Grid as explained in "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.1/master-detail-grids/#accessing-detail-grids"},"children":[{"type":"text","value":"Accessing Detail Grids"}]},{"type":"text","value":", a Grid Info object needs to be registered with the Master Grid."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"masterDetail","names":"[\"addDetailGridInfo\", \"removeDetailGridInfo\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When the Detail Grid is created, register it via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"masterGridApi.addDetailGridInfo(id, info)"}]},{"type":"text","value":" and when the Detail Grid is destroyed, unregister it via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"masterGridApi.removeDetailGridInfo(id)"}]},{"type":"text","value":". A Detail ID is required when calling these methods. Any unique ID can be used, however for consistency with how the default Detail Cell Renderer works it's recommended to use the ID of the detail Row Node."}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//////////////////////////////"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Register with Master Grid"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" detailId "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" params"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"node"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"id"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Create Grid Info object"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" detailGridInfo "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    id"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" detailId"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    api"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" params"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"api"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    columnApi"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" params"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"columnApi\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"this"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"masterGridApi"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addDetailGridInfo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"detailId"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" detailGridInfo"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//////////////////////////////"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Unregister with Master Grid"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"this"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"masterGridApi"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"removeDetailGridInfo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"detailId"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"refreshing","style":"position:relative;"},"children":[{"type":"text","value":"Refreshing"},{"type":"element","tagName":"a","properties":{"href":"#refreshing","ariaLabel":"refreshing 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":"When data is updated in the grid using "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.1/data-update-transactions/"},"children":[{"type":"text","value":"Transaction Updates"}]},{"type":"text","value":", the grid will call refresh on all Detail Cell Renderer's."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is up to the Detail Cell Renderer whether it wants to act on the refresh or not. If the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"refresh()"}]},{"type":"text","value":" method returns "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":", the grid will assume the Detail Cell Renderer has refreshed successfully and nothing more will happen. However if "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":" is returned, the grid will destroy the Detail Cell Renderer and re-create it again."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This pattern is similar to how refresh works for normal grid Cell Renderer's."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows how components can optionally refresh on updates. The example refreshes the first row every one second. The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"refresh()"}]},{"type":"text","value":" method gets called on all Detail Cell Renderers after the transaction is applied. Only the first Detail Cell Renderer returns "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":" so it is the only one that updates."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The creation time is printed to each Detail Cell Renderer so it can be noted when it was last created."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this simple example, it would be possible for the components to just update themselves and not rely on the grid destroying and re-creating the components. However the example is contrived to demonstrate returning "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" vs "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":" from the refresh method."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Detail with Refresh","name":"custom-detail-with-refresh","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 545, \"modules\": [\"clientside\", \"masterdetail\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"keyboard-navigation","style":"position:relative;"},"children":[{"type":"text","value":"Keyboard Navigation"},{"type":"element","tagName":"a","properties":{"href":"#keyboard-navigation","ariaLabel":"keyboard 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":"To add keyboard navigation to custom detail panels, it must be implemented in the custom Detail Cell Renderer. There are several parts to this:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Create a listener function for the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"focus"}]},{"type":"text","value":" event when the custom detail panel receives focus. Within this function, the event object "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"target"}]},{"type":"text","value":" value is the custom detail row element, and event object "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"relatedTarget"}]},{"type":"text","value":" value is the previous element that was previously focused on. You will need to find the parent of the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"relatedTarget"}]},{"type":"text","value":" with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"role=row"}]},{"type":"text","value":" attribute to get the previous row element. With the current row element and the previous row element, checking the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"row-index"}]},{"type":"text","value":" attribute allows you to see if the user is entering the focus from the previous or current row (ie, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"row-index"}]},{"type":"text","value":" increases or is the same from previous to current) or the next row (ie, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"row-index"}]},{"type":"text","value":" decreases from previous to current). With this knowledge, you can set focus using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"element.focus()"}]},{"type":"text","value":" on the relevant element in your custom detail panel"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Attach the above function to a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"focus"}]},{"type":"text","value":" listener on the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"eParentOfValue"}]},{"type":"text","value":" param value in the component initialisation"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Remove the above function from the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"focus"}]},{"type":"text","value":" listener in the component destroy or unmount method"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example shows an implementation of keyboard navigation in a custom detail panel: "}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click a cell in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Mila Smith"}]},{"type":"text","value":" master row and press "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Tab"}]},{"type":"text","value":" key to move focus to the custom detail panel inputs of the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Mila Smith"}]},{"type":"text","value":" master row."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click a cell in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Evelyn Taylor"}]},{"type":"text","value":" master row and press "},{"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":" to focus the inputs in the custom detail panel of the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Mila Smith"}]},{"type":"text","value":" master row."}]},{"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 example is illustrative of the main concepts, but the actual implementation of custom keyboard navigation will vary based on the specific custom detail panel."}]}]}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Detail Cell Renderer Keyboard Navigation","name":"custom-detail-keyboard-navigation","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"masterdetail\", \"menu\", \"columnpanel\"] }"},"children":[]}]}]},"frontmatter":{"title":"Custom Detail","version":null,"enterprise":true,"sideMenu":null,"description":null},"headings":[{"id":"custom-detail-with-form","depth":2,"value":"Custom Detail With Form"},{"id":"custom-detail-with-grid","depth":2,"value":"Custom Detail With Grid"},{"id":"register-detail-grid","depth":2,"value":"Register Detail Grid"},{"id":"refreshing","depth":2,"value":"Refreshing"},{"id":"keyboard-navigation","depth":2,"value":"Keyboard Navigation"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/master-detail-custom-detail","pageName":"master-detail-custom-detail"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}