{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/master-detail-height/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section shows how the detail height can be customised to suit application requirements."}]},{"type":"element","tagName":"h2","properties":{"id":"detail-height-options","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#detail-height-options","ariaLabel":"detail height options 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 Height Options"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The default height of each detail section (ie the row containing the Detail Grid in the master) is fixed at "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"300px"}]},{"type":"text","value":". The height does not change based on how much data there is to display in the detail section."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To change the height of the details section from the default you have the following options:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/master-detail-height/#fixed-height"},"children":[{"type":"text","value":"Fixed Height"}]},{"type":"text","value":": a custom fixed height can be provided for all detail sections instead of the default "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"300px"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/master-detail-height/#auto-height"},"children":[{"type":"text","value":"Auto Height"}]},{"type":"text","value":": detail sections can auto-size to fit based off the contents."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/master-detail-height/#dynamic-height"},"children":[{"type":"text","value":"Dynamic Height"}]},{"type":"text","value":": different heights can be provided for each detail section."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h2","properties":{"id":"fixed-height","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#fixed-height","ariaLabel":"fixed height 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":"Fixed Height"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Use the grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"detailRowHeight"}]},{"type":"text","value":" to set a fixed height for each detail row."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // statically fix row height for all detail grids\n    detailRowHeight: 200,\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example sets a fixed row height for all detail rows."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Fixed Detail Row Height","name":"fixed-detail-row-height","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 575, \"modules\":[\"clientside\", \"masterdetail\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"auto-height","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#auto-height","ariaLabel":"auto height 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":"Auto Height"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Set grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"detailRowAutoHeight=true"}]},{"type":"text","value":" to have the detail grid to dynamically change it's height to fit it's rows."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // dynamically set row height for all detail grids\n    detailRowAutoHeight: true,\n}\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Auto Height","name":"auto-height","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 600, \"modules\": [\"clientside\", \"masterdetail\"] }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are not providing your own Detail Cell Renderer, then there is nothing else to be concerned about."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are providing your own Detail Cell Renderer, then you need to make sure the top most element of the\nDetail Cell Renderer has the correct height, as this is what the grid checks and matches the row height to this.\nSo make sure the CSS on the top most element is set so that its height is correct."}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","angular-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This can be a particular concern if providing a Detail Cell Renderer in Angular. Be aware that by default\ncustom Angular tags will not inherit the height of their children. This can be fixed by adding\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"display: inline-block"}]},{"type":"text","value":" style to the top most element of your component. This is done as follows:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"ts"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-ts"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-ts"]},"children":[{"type":"text","value":"@"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"Component"}]},{"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  styles"},{"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":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"':host { display: inline-block; }'"}]},{"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  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// other items here"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"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":"When using Auto Height feature, the Detail Grid will render all of it's rows all the time.\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/dom-virtualisation/"},"children":[{"type":"text","value":"Row Virtualisation"}]},{"type":"text","value":" will not happen.\nThis means if the Detail Grid has many rows, it could slow down your application and could\nresult in stalling he browser.\n"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nDo not use Auto Height if you have many rows (eg 100+) in the Detail Grid's. To know if this\nis a concern for your grid and dataset, try it out and check the performance."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"dynamic-height","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#dynamic-height","ariaLabel":"dynamic height 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":"Dynamic Height"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Use the callback "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getRowHeight(params)"}]},{"type":"text","value":" to set height for each row individually. This is a specific use of the callback that is explained in more detail in\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/row-height/#getrowheight-callback"},"children":[{"type":"text","value":"Get Row Height"}]}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"styling","names":"[\"getRowHeight\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that this callback gets called for "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"all rows"}]},{"type":"text","value":" in the Master Grid, not just rows containing Detail Grids. If you do not want to set row heights explicitly for other rows simply return "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undefined / null"}]},{"type":"text","value":" and the grid will ignore the result for that particular row."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|const gridOptions = {\n|    // dynamically assigning detail row height\n|    getRowHeight: params => {\n|        const isDetailRow = params.node.detail;\n|\n|        // for all rows that are not detail rows, return nothing\n|        if (!isDetailRow) { return undefined; }\n|\n|        // otherwise return height based on number of rows in detail grid\n|        const detailPanelHeight = params.data.children.length * 50;\n|        return detailPanelHeight;\n|    }\n|}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates dynamic detail row heights:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Dynamic Detail Row Height","name":"dynamic-detail-row-height","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"masterdetail\", \"menu\", \"columnpanel\"] }"},"children":[]}]}]},"frontmatter":{"title":"Master / Detail - Detail Height","version":null,"enterprise":true,"description":null},"headings":[{"id":"detail-height-options","depth":2,"value":"Detail Height Options"},{"id":"fixed-height","depth":2,"value":"Fixed Height"},{"id":"auto-height","depth":2,"value":"Auto Height"},{"id":"dynamic-height","depth":2,"value":"Dynamic Height"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/master-detail-height","pageName":"master-detail-height"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}