{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/server-side-model-grouping/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section covers Row Grouping in the Server-Side Row Model (SSRM)."}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-row-grouping","style":"position:relative;"},"children":[{"type":"text","value":"Enabling Row Grouping"},{"type":"element","tagName":"a","properties":{"href":"#enabling-row-grouping","ariaLabel":"enabling row grouping 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":"Row Grouping is enabled in the grid via the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroup"}]},{"type":"text","value":" column definition attribute.\nThe example below shows how to group rows by 'country':"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        { field: 'country', rowGroup: true },\n        { field: 'sport' },\n        { field: 'year' },\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For more configuration details see the section on "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/grouping/"},"children":[{"type":"text","value":"Row Grouping"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"server-side-row-grouping","style":"position:relative;"},"children":[{"type":"text","value":"Server Side Row Grouping"},{"type":"element","tagName":"a","properties":{"href":"#server-side-row-grouping","ariaLabel":"server side row grouping 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 actual grouping of rows is performed on the server when using the SSRM. When the grid needs more rows it makes a\nrequest via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getRows(params)"}]},{"type":"text","value":" on the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/server-side-model-datasource"},"children":[{"type":"text","value":"Server-Side Datasource"}]},{"type":"text","value":" with metadata containing\ngrouping details."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The properties relevant to Row Grouping in the request are shown below:"}]},{"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":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// IServerSideGetRowsRequest"}]},{"type":"text","value":"\n"},{"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":"// row group columns"}]},{"type":"text","value":"\n    rowGroupCols"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" ColumnVO"},{"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":"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":"// what groups the user is viewing"}]},{"type":"text","value":"\n    groupKeys"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","builtin"]},"children":[{"type":"text","value":"string"}]},{"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":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n    "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// other params"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note in the snippet above the property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroupCols"}]},{"type":"text","value":" contains all the columns (dimensions) the grid is\ngrouping on, e.g. 'Country', 'Year'. The property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupKeys"}]},{"type":"text","value":" contains the list of group keys selected,\ne.g. "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"['Argentina', '2012']"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates server-side Row Grouping. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"b","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" and "},{"type":"element","tagName":"b","properties":{},"children":[{"type":"text","value":"Sport"}]},{"type":"text","value":" columns have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroup=true"}]},{"type":"text","value":" defined on their column definitions. This tells the grid there are two levels of grouping, one for Country and one for Sport."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroupCols"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupKeys"}]},{"type":"text","value":" properties in the request are used by the server to perform grouping."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Open the browser's dev console to view the request supplied to the datasource."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Row Grouping","name":"row-grouping","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 590, \"extras\": [\"alasql\"], \"modules\": [\"serverside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"open-by-default","style":"position:relative;"},"children":[{"type":"text","value":"Open by Default"},{"type":"element","tagName":"a","properties":{"href":"#open-by-default","ariaLabel":"open by default 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 have rows open as soon as they are loaded. To do this implement the grid callback "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"isServerSideGroupOpenByDefault"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"serverSideRowModel","names":"[\"isServerSideGroupOpenByDefault\"]"},"children":[]}]},{"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":"// Example implementation"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"isServerSideGroupOpenByDefault"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"params"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"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","keyword"]},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" rowNode "},{"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":"rowNode"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" isZimbabwe "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" rowNode"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"field "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'country'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&&"}]},{"type":"text","value":" rowNode"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"key "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Zimbabwe'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" isZimbabwe"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It may also be helpful to use the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/row-object/"},"children":[{"type":"text","value":"Row Node"}]},{"type":"text","value":" API "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getRoute()"}]},{"type":"text","value":" to inspect the route of a row node."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"row-object/resources/methods.json","section":"rowNodeMethods","names":"[\"getRoute\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Below shows "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"isServerSideGroupOpenByDefault()"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getRoute"}]},{"type":"text","value":" in action. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The callback opens the following routes as soon as those routes are loaded:"}]},{"type":"text","value":"\n"},{"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":"[Zimbabwe]"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"[Zimbabwe, Swimming]"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"[United States, Swimming]"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Note "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"[Zimbabwe]"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"[Zimbabwe, Swimming]"}]},{"type":"text","value":" are visibly open by default."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Note "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"[United States, Swimming]"}]},{"type":"text","value":" is not visibly open by default, as the parent group 'United States' is not open. However open 'United States' is open, it's 'Swimming' group is open."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Selecting a row and clicking 'Route of Selected' will print the route to the selected node."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Open by Default","name":"open-by-default","type":"generated","options":"{ \"enterprise\": true, \"extras\": [\"alasql\"], \"modules\": [\"serverside\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"sticky-groups","style":"position:relative;"},"children":[{"type":"text","value":"Sticky Groups"},{"type":"element","tagName":"a","properties":{"href":"#sticky-groups","ariaLabel":"sticky groups 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 sticky groups, set the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupRowsSticky"}]},{"type":"text","value":" property to true. This behaviour applies to all row group levels."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Sticky Groups","name":"sticky-groups","type":"generated","options":"{ \"enterprise\": true, \"extras\": [\"alasql\"], \"modules\": [\"serverside\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"expand-all--collapse-all","style":"position:relative;"},"children":[{"type":"text","value":"Expand All / Collapse All"},{"type":"element","tagName":"a","properties":{"href":"#expand-all--collapse-all","ariaLabel":"expand all  collapse all 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 expand and collapse all group rows using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"expandAll()"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"collapseAll()"}]},{"type":"text","value":" grid API's."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n| // Expand all group rows\n| gridOptions.api.expandAll();\n|\n| // Collapse all group rows\n| gridOptions.api.collapseAll();\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Calling "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"expandAll()"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"collapseAll()"}]},{"type":"text","value":" will impact "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"all loaded group nodes"}]},{"type":"text","value":", including those not visible due to their containing group been closed. This means there could potentially be a huge number of groups expanded, so this method should be used very wisely to not create massive amount of server requests and loading a large amount of data."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Calling "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"expandAll()"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"collapseAll()"}]},{"type":"text","value":" will have no impact on rows yet to be loaded."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To open only specific groups, e.g. only groups at the top level, then use the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"forEachNode()"}]},{"type":"text","value":" callback and open / close the row using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"setExpanded()"}]},{"type":"text","value":" as follows:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n| // Expand all top level row nodes\n| gridOptions.api.forEachNode(node => {\n|     if (node.group && node.level == 0) {\n|         node.setExpanded(true);\n|     }\n| });\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates these techniques. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking 'Expand All' will expand all loaded group rows. Doing this when the grid initially loads will expand all Year groups. Clicking it a second time (after Year groups have loaded) will cause all Year groups as well as their children Country groups to be expanded - this is a heaver operation with 100's of rows to expand."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking 'Collapse All' will collapse all rows."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking 'Expand Top Level Only' will expand Years only, even if more group rows are loaded.."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Expand All","name":"expand-all","type":"generated","options":"{ \"enterprise\": true, \"extras\": [\"alasql\"], \"modules\": [\"serverside\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"providing-child-counts","style":"position:relative;"},"children":[{"type":"text","value":"Providing Child Counts"},{"type":"element","tagName":"a","properties":{"href":"#providing-child-counts","ariaLabel":"providing child counts 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":"By default, the grid will not show row counts beside the group names. If you do want row counts, you need to implement the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getChildCount(dataItem)"}]},{"type":"text","value":" callback for the grid. The callback provides you with the row data; it is your application's responsibility to know what the child row count is. The suggestion is you set this information into the row data item you provide to the grid."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"serverSideRowModel","names":"[\"getChildCount\"]"},"children":[]}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    getChildCount: data => {\n        // here child count is stored in the 'childCount' property\n        return data.childCount;\n    }\n}\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Child Counts","name":"child-counts","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 590, \"extras\": [\"alasql\"], \"modules\": [\"serverside\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"group-via-value-getter","style":"position:relative;"},"children":[{"type":"text","value":"Group via Value Getter"},{"type":"element","tagName":"a","properties":{"href":"#group-via-value-getter","ariaLabel":"group via value getter 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 the data provided has composite objects, in which case it's more difficult for the grid to extract group names. This can be worked with using value getters or embedded fields (i.e. the field attribute has dot notation)."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the example below, all rows are modified so that the rows look something like this:"}]},{"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":"// sample contents of row data"}]},{"type":"text","value":"\n"},{"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":"// country field is complex object"}]},{"type":"text","value":"\n    country"},{"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        name"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Ireland'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n        code"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'IRE'"}]},{"type":"text","value":"\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","comment"]},"children":[{"type":"text","value":"// year field is complex object"}]},{"type":"text","value":"\n    year"},{"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        name"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'2012'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n        shortName"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"'12\""}]},{"type":"text","value":"\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","comment"]},"children":[{"type":"text","value":"// other fields as normal"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then the columns are set up so that country uses a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"valueGetter"}]},{"type":"text","value":" that uses the field with dot notation, i.e. "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"data.country.name"}]}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Complex Objects","name":"complex-objects","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 590, \"extras\": [\"alasql\"], \"modules\": [\"serverside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"filters","style":"position:relative;"},"children":[{"type":"text","value":"Filters"},{"type":"element","tagName":"a","properties":{"href":"#filters","ariaLabel":"filters 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":"By default the grid will attempt to only refresh the groups which are directly impacted by the change in filters. Be aware, this can mean your grid may have empty group rows. This is because the grid will not refresh the groups above the groups it deems impacted by the filter. This behaviour can be disabled, instead favouring purging the entire grid by enabling the grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"serverSideRefreshAllLevels"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the example below, note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Filtering by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Gold"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Silver"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Bronze"}]},{"type":"text","value":" fully purges the grid, this is because they have aggregations applied."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Applying a filter to the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Year"}]},{"type":"text","value":" column does not purge the entire grid, and instead only refreshes the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Year"}]},{"type":"text","value":" group rows."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The example does not enable "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"serverSideRefreshAllLevels"}]},{"type":"text","value":", note that if you apply a filter to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Year"}]},{"type":"text","value":" with the value "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"1900"}]},{"type":"text","value":", no leaf rows exist in any group."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Filtering","name":"filtering","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 590, \"extras\": [\"alasql\"], \"modules\": [\"serverside\", \"rowgrouping\"] }"},"children":[]}]},{"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 about "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/server-side-model-pivoting/"},"children":[{"type":"text","value":"SSRM Pivoting"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"SSRM Row Grouping","version":null,"enterprise":true,"sideMenu":null,"description":null},"headings":[{"id":"enabling-row-grouping","depth":2,"value":"Enabling Row Grouping"},{"id":"server-side-row-grouping","depth":2,"value":"Server Side Row Grouping"},{"id":"open-by-default","depth":2,"value":"Open by Default"},{"id":"sticky-groups","depth":2,"value":"Sticky Groups"},{"id":"expand-all--collapse-all","depth":2,"value":"Expand All / Collapse All"},{"id":"providing-child-counts","depth":2,"value":"Providing Child Counts"},{"id":"group-via-value-getter","depth":2,"value":"Group via Value Getter"},{"id":"filters","depth":2,"value":"Filters"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/server-side-model-grouping","pageName":"server-side-model-grouping"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}