{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/master-detail/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"video-section","properties":{"id":"8OeJn75or2w","title":"Master / Detail Video Tutorial","header":"true"},"children":[{"type":"text","value":"\n    Master Detail refers to a top level grid called a Master Grid having rows that expand. When the row is expanded, another grid is displayed with more details related to the expanded row. The grid that appears is known as the Detail Grid.\n"}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-master--detail","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#enabling-master--detail","ariaLabel":"enabling master  detail permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Enabling Master / Detail"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Master / Detail can be enabled using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"masterDetail"}]},{"type":"text","value":" grid option with detail rows configured using\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"detailCellRendererParams"}]},{"type":"text","value":" as shown below:"}]},{"type":"element","tagName":"snippet","properties":{"spacebetweenproperties":"true"},"children":[{"type":"text","value":"\n|const gridOptions = {\n|    // enable Master / Detail\n|    masterDetail: true,\n|\n|    // the first Column is configured to use agGroupCellRenderer\n|    columnDefs: [\n|        { field: 'name', cellRenderer: 'agGroupCellRenderer' },\n|        { field: 'account' }\n|    ],\n|\n|    // provide Detail Cell Renderer Params\n|    detailCellRendererParams: {\n|        // provide the Grid Options to use on the Detail Grid\n|        detailGridOptions: {\n|            columnDefs: [\n|                { field: 'callId' },\n|                { field: 'direction' },\n|                { field: 'number'}\n|            ]\n|        },\n|        // get the rows for each Detail Grid\n|        getDetailRowData: params => {\n|            params.successCallback(params.data.callRecords);\n|        }\n|    }\n|}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows a simple Master / Detail with all the above configured."}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Set the grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"masterDetail=true"}]},{"type":"text","value":". This tells the grid to allow expanding rows to display Detail Grids."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Set the Cell Renderer on one Master Grid column to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agGroupCellRenderer"}]},{"type":"text","value":". This tells the grid to use the Group Cell Renderer which in turn includes the expand / collapse functionality for that column."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Set the Detail Cell Renderer* parameter "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"detailGridOptions"}]},{"type":"text","value":". This contains configuration for the Detail Grid such as what columns to display and what grid features you want enabled inside the Detail Grid."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Provide a callback via the Detail Cell Renderer* parameter "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getDetailRowData"}]},{"type":"text","value":". The callback is called for each Detail Grid and sets the rows to display in each Detail Grid."}]},{"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":"To learn more about "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"detailCellRendererParams"}]},{"type":"text","value":" configuration see the\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/master-detail-grids/"},"children":[{"type":"text","value":"Detail Grids"}]},{"type":"text","value":" section."}]}]}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Master Detail Example","name":"simple","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 535, \"modules\": [\"clientside\", \"masterdetail\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"row-models","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#row-models","ariaLabel":"row models 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":"Row Models"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When using Master / Detail the Master Grid must be using either the "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/client-side-model/"},"children":[{"type":"text","value":"Client-Side"}]},{"type":"text","value":" or "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/server-side-model-master-detail/"},"children":[{"type":"text","value":"Server-Side"}]},{"type":"text","value":" Row Models. It is not supported with the "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/viewport/"},"children":[{"type":"text","value":"Viewport"}]},{"type":"text","value":" or "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/infinite-scrolling/"},"children":[{"type":"text","value":"Infinite"}]},{"type":"text","value":" Row Models."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Detail Grid on the other hand can use any Row Model."}]},{"type":"element","tagName":"h2","properties":{"id":"api-reference","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#api-reference","ariaLabel":"api reference 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":"API Reference"}]},{"type":"element","tagName":"h3","properties":{"id":"master-detail-properties","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#master-detail-properties","ariaLabel":"master detail properties 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":"Master Detail Properties"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Top level Master Detail properties available on the Grid Options:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"masterDetail"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"detail-cell-renderer-params","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#detail-cell-renderer-params","ariaLabel":"detail cell renderer params 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":"Detail Cell Renderer Params"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Detail Cell Renderer parameters available on the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"detailCellRendererParams"}]},{"type":"text","value":" object:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"IDetailCellRendererParams","names":"[\"detailGridOptions\", \"getDetailRowData\", \"template\", \"refreshStrategy\"]"},"children":[]}]}]},"frontmatter":{"title":"Master / Detail","version":null,"enterprise":true,"description":null},"headings":[{"id":"enabling-master--detail","depth":2,"value":"Enabling Master / Detail"},{"id":"row-models","depth":2,"value":"Row Models"},{"id":"api-reference","depth":2,"value":"API Reference"},{"id":"master-detail-properties","depth":3,"value":"Master Detail Properties"},{"id":"detail-cell-renderer-params","depth":3,"value":"Detail Cell Renderer Params"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"javascript","srcPath":"/master-detail","pageName":"master-detail"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}