{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/server-side-model-master-detail/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section shows how the Server-Side Row Model can be configured with a Master / Detail view."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The ability to nest grids within grids is commonly referred to as Master / Detail.\nHere the top-level grid is referred to as the 'master grid' and the nested grid is referred to as the 'detail grid'."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Master / Details is configured the same way for the Server-Side Row Model and the Client-Side Row Model.\nFor a comprehensive look at Master / Detail configurations, see: "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/master-detail/"},"children":[{"type":"text","value":"Client-Side Master / Detail"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Because the configuation is already discussed in "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/master-detail/"},"children":[{"type":"text","value":"Client-Side Master / Detail"}]},{"type":"text","value":",\nthis pages focuses on areas that are of particular interest to this Server-Side version."}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-master--detail","style":"position:relative;"},"children":[{"type":"text","value":"Enabling Master / Detail"},{"type":"element","tagName":"a","properties":{"href":"#enabling-master--detail","ariaLabel":"enabling master  detail 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 enable Master / Detail, you should set the following grid options:"}]},{"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":"masterDetail:"}]},{"type":"text","value":" Set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" to inform the grid you want to allow expanding of rows to reveal detail grids."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"detailGridOptions:"}]},{"type":"text","value":" The grid options to set for the detail grid. The detail grid is a fully featured instance of AG Grid, so any configuration can be set on the detail grid that you would set any other grid."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"getDetailRowData:"}]},{"type":"text","value":" A function you implement to provide the grid with rows for display in the detail grids."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"These grid options are illustrated below:"}]},{"type":"element","tagName":"snippet","properties":{"spacebetweenproperties":"true"},"children":[{"type":"text","value":"\n| const gridOptions = {\n|     // master grid columns\n|     columnDefs: [],\n| \n|     // use the server-side row model\n|     rowModelType: 'serverSide',\n| \n|     // enable master detail\n|     masterDetail: true,\n| \n|     detailCellRendererParams: {\n|         detailGridOptions: {\n|             // detail grid columns\n|             columnDefs: [],\n|         },\n|         getDetailRowData: params => {\n|             // supply data to the detail grid\n|             params.successCallback(params.data);\n|         }\n|     },\n| }\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":"Note that the nested detail grid can be configured to use any Row Model."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"example-infinite-scrolling-with-master--detail","style":"position:relative;"},"children":[{"type":"text","value":"Example: Infinite Scrolling with Master / Detail"},{"type":"element","tagName":"a","properties":{"href":"#example-infinite-scrolling-with-master--detail","ariaLabel":"example infinite scrolling with master  detail 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":"This example shows a simple Master / Detail with the Server-Side Row Model. From this example notice 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":"masterDetail"}]},{"type":"text","value":" - is set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" in the master grid options."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"detailCellRendererParams"}]},{"type":"text","value":" - specifies the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"detailGridOptions"}]},{"type":"text","value":" to use and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getDetailRowData"}]},{"type":"text","value":" extracts the data for the detail row."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"cellRenderer: 'agGroupCellRenderer'"}]},{"type":"text","value":" - is used to provide expand / collapse icons on the master rows."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Infinite Scrolling with Master / Detail","name":"infinite-scrolling","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 590, \"modules\": [\"serverside\", \"clientside\", \"masterdetail\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"combining-row-grouping-with-master-detail","style":"position:relative;"},"children":[{"type":"text","value":"Combining Row Grouping with Master Detail"},{"type":"element","tagName":"a","properties":{"href":"#combining-row-grouping-with-master-detail","ariaLabel":"combining row grouping with master detail 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 combine "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/server-side-model-grouping/"},"children":[{"type":"text","value":"Server-Side Grouping"}]},{"type":"text","value":" with Master Detail."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following snippet shows row grouping on the 'country' column by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroup = true"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"snippet","properties":{"suppressframeworkcontext":"true"},"children":[{"type":"text","value":"\n| const gridOptions = {\n|     columnDefs: [\n|         { field: 'country', rowGroup: true },\n| \n|         // more column definitions\n|     ]\n| }\n"}]},{"type":"element","tagName":"h2","properties":{"id":"example-row-grouping-with-master-detail","style":"position:relative;"},"children":[{"type":"text","value":"Example: Row Grouping with Master Detail"},{"type":"element","tagName":"a","properties":{"href":"#example-row-grouping-with-master-detail","ariaLabel":"example row grouping with master detail 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":"Below shows Row Grouping combined with Master / Detail. From the example you can notice 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":"rowGroup"}]},{"type":"text","value":" - is set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" on the 'country' column definition."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"masterDetail"}]},{"type":"text","value":" - is set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" to enable Master / Detail."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"detailCellRendererParams"}]},{"type":"text","value":" - specifies the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"detailGridOptions"}]},{"type":"text","value":" to use and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getDetailRowData"}]},{"type":"text","value":" extracts the data for the detail row."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"autoGroupColumnDef"}]},{"type":"text","value":" - is used to specify which column in the master row should be included in the group hierarchy."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Row Grouping with Master Detail","name":"row-grouping","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 590, \"extras\": [\"alasql\"], \"modules\": [\"serverside\", \"clientside\", \"masterdetail\", \"rowgrouping\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"expanding-master-rows","style":"position:relative;"},"children":[{"type":"text","value":"Expanding Master Rows"},{"type":"element","tagName":"a","properties":{"href":"#expanding-master-rows","ariaLabel":"expanding master rows 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":"Normally parent rows (groups) can be expanded and child rows cannot be expanded (unless they are themselves parents). This means that normally only parent rows have expand / collapse icons."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For Master / Detail, expand and collapse icons are also needed at the master level. When doing Master / Detail, expand and collapse icons are also needed to expand the child rows where those rows are also master rows."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Rather than use the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoGroupColumnDef"}]},{"type":"text","value":" for the master rows as shown in the example above, simply specify a group cell renderer on the column that should show the expand / collapse icons."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is shown in the code snippet below:"}]},{"type":"element","tagName":"snippet","properties":{"suppressframeworkcontext":"true"},"children":[{"type":"text","value":"\n| const gridOptions = {\n|     columnDefs: [\n|         { field: 'country', rowGroup: true },\n|         { field: 'accountId', maxWidth: 200, cellRenderer: 'agGroupCellRenderer' },\n| \n|         // more column definitions\n|     ]\n| }\n"}]},{"type":"element","tagName":"h2","properties":{"id":"detail-row-height","style":"position:relative;"},"children":[{"type":"text","value":"Detail Row Height"},{"type":"element","tagName":"a","properties":{"href":"#detail-row-height","ariaLabel":"detail row height 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 height of detail rows can be configured in one of the following ways:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"detailRowHeight"}]},{"type":"text","value":" grid option property to set a fixed height for each detail row."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getRowHeight()"}]},{"type":"text","value":" grid option callback to explicitly set height for each row individually. This callback will need to work out the pixel height of each detail row."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"detailRowAutoHeight=true"}]},{"type":"text","value":" property to let the grid automatically size the detail rows / grids to fit their rows."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following snippets compares these approaches:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"text","value":"Option 1 - fixed detail row height, sets height for all details rows\n"},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\ndetailRowHeight: 500,\n}\n"}]}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"text","value":"Option 2 - dynamic detail row height, dynamically sets height for all rows\n"},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n| const gridOptions = {\n|     getRowHeight: params => {\n|         const isDetailRow = params.node.detail;\n|\n|         // not that this callback gets called for all rows, not just the detail row\n|         if (isDetailRow) {\n|             // dynamically calculate detail row height\n|             return params.data.children.length * 50;\n|         }\n|         // for all non-detail rows, return 25, the default row height\n|         return 25;\n|     }\n| }\n"}]}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"text","value":"Option 3 - use autoHeight\n"},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n| const gridOptions = {\n|     detailCellRendererParams: {\n|         autoHeight: true,\n|     }\n| }\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":"Purging the cache and dynamic row heights do not work together for the Server-Side Row Model.\nIf you are using dynamic row height, ensure "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"maxBlocksInCache"}]},{"type":"text","value":" is not set."}]}]}]},{"type":"element","tagName":"h3","properties":{"id":"example-using-callback-getrowheight","style":"position:relative;"},"children":[{"type":"text","value":"Example Using Callback getRowHeight()"},{"type":"element","tagName":"a","properties":{"href":"#example-using-callback-getrowheight","ariaLabel":"example using callback getrowheight 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 example explicitly sets detail row heights based on the number of detail rows. Note 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":"getRowHeight()"}]},{"type":"text","value":" - is implemented to size detail rows according to the number of records."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"node.detail"}]},{"type":"text","value":" - is used to identify 'detail' row nodes."}]},{"type":"text","value":"\n"}]},{"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, \"exampleHeight\": 590, \"extras\": [\"alasql\"], \"modules\": [\"serverside\", \"clientside\", \"masterdetail\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"See "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/master-detail-height/#dynamic-height"},"children":[{"type":"text","value":"Master Detail Dynamic Height"}]},{"type":"text","value":" for more details."}]},{"type":"element","tagName":"h3","properties":{"id":"example-using-property-autoheight","style":"position:relative;"},"children":[{"type":"text","value":"Example Using Property autoHeight"},{"type":"element","tagName":"a","properties":{"href":"#example-using-property-autoheight","ariaLabel":"example using property autoheight 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 example gets the grid to auto-size all details sections to fit their rows. This is done by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"masterGridOptions.detailRowAutoHeight = true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Auto Detail Row Height","name":"auto-detail-row-height","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 590, \"extras\": [\"alasql\"], \"modules\": [\"serverside\", \"clientside\", \"masterdetail\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"See "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/master-detail-height/#auto-height"},"children":[{"type":"text","value":"Master Detail Auto Height"}]},{"type":"text","value":" for more details."}]},{"type":"element","tagName":"h2","properties":{"id":"lazy-loading-detail-rows","style":"position:relative;"},"children":[{"type":"text","value":"Lazy Loading Detail Rows"},{"type":"element","tagName":"a","properties":{"href":"#lazy-loading-detail-rows","ariaLabel":"lazy loading detail rows 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 the examples above, the data for the detail grid was returned with the master row. However it is also possible to lazy-load data for the detail row, see: "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/master-detail-grids/#providing-rows"},"children":[{"type":"text","value":"Providing Rows"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"However note that detail rows will be purged once the master row is closed, or if the detail row leaves the viewport through scrolling. In both cases data will need to be fetched again."}]},{"type":"element","tagName":"h2","properties":{"id":"next-up","style":"position:relative;"},"children":[{"type":"text","value":"Next Up"},{"type":"element","tagName":"a","properties":{"href":"#next-up","ariaLabel":"next up 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":"Continue to the next section to learn how to work with "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/server-side-model-tree-data/"},"children":[{"type":"text","value":"Tree Data"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"SSRM Master Detail","version":null,"enterprise":true,"sideMenu":null,"description":null},"headings":[{"id":"enabling-master--detail","depth":2,"value":"Enabling Master / Detail"},{"id":"example-infinite-scrolling-with-master--detail","depth":2,"value":"Example: Infinite Scrolling with Master / Detail"},{"id":"combining-row-grouping-with-master-detail","depth":2,"value":"Combining Row Grouping with Master Detail"},{"id":"example-row-grouping-with-master-detail","depth":2,"value":"Example: Row Grouping with Master Detail"},{"id":"expanding-master-rows","depth":3,"value":"Expanding Master Rows"},{"id":"detail-row-height","depth":2,"value":"Detail Row Height"},{"id":"example-using-callback-getrowheight","depth":3,"value":"Example Using Callback getRowHeight()"},{"id":"example-using-property-autoheight","depth":3,"value":"Example Using Property autoHeight"},{"id":"lazy-loading-detail-rows","depth":2,"value":"Lazy Loading Detail Rows"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/server-side-model-master-detail","pageName":"server-side-model-master-detail"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}