{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/angular-data-grid/grouping-multiple-group-columns/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section covers the Multiple Group Columns display type, where a group column is automatically added by the grid for\neach row group."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"image-caption","properties":{"src":"grouping-multiple-group-columns/resources/multiple-group-columns.png","alt":"Multiple Group Columns","maxwidth":"80%","constrained":"true","centered":"true"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-multiple-group-columns","style":"position:relative;"},"children":[{"type":"text","value":"Enabling Multiple Group Columns"},{"type":"element","tagName":"a","properties":{"href":"#enabling-multiple-group-columns","ariaLabel":"enabling multiple group columns 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 display each row group under a separate group column set "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupDisplayType = 'multipleColumns'"}]},{"type":"text","value":" as shown below:"}]},{"type":"element","tagName":"snippet","properties":{"spacebetweenproperties":"true"},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        { field: 'country', rowGroup: true, hide: true },\n        { field: 'year', rowGroup: true, hide: true },\n        { field: 'athlete' },\n        { field: 'sport' },\n        { field: 'total' }\n    ],\n    // display each row grouping in a separate group column\n    groupDisplayType: 'multipleColumns',\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the snippet above, rows will be grouped by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"country"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"year"}]},{"type":"text","value":" as both column definitions have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroup=true"}]},{"type":"text","value":"\ndeclared, and a group column displayed for each column that we are grouping by."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is demonstrated in the following example, note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"There are two active row groups as the supplied "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"country"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"year"}]},{"type":"text","value":" column definitions have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroup=true"}]},{"type":"text","value":" declared."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Separate group columns are displayed for "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"country"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"year"}]},{"type":"text","value":" as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupDisplayType = 'multipleColumns'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"country"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"year"}]},{"type":"text","value":" columns are not shown in the grid as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"hide=true"}]},{"type":"text","value":" is set on their column definitions."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Enabling Multiple Group Columns","name":"enabling-multiple-group-columns","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"group-column-configuration","style":"position:relative;"},"children":[{"type":"text","value":"Group Column Configuration"},{"type":"element","tagName":"a","properties":{"href":"#group-column-configuration","ariaLabel":"group column configuration 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 Multiple Group Columns display type adds an Auto Group Column for each row group to the grid. To change the default\nconfigurations of these group columns, use the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoGroupColumnDef"}]},{"type":"text","value":" grid option as shown below:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    autoGroupColumnDef: {\n        headerValueGetter: params => `${params.colDef.headerName} Group Column`,\n        minWidth: 220,\n        cellRendererParams: {\n            suppressCount: true,\n            checkbox: true,\n        }\n    },\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note how in the snippet above that the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoGroupColumnDef"}]},{"type":"text","value":" can be used to override any "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/column-definitions/"},"children":[{"type":"text","value":"Column Property"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Auto Group Columns use the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/group-cell-renderer/"},"children":[{"type":"text","value":"Group Cell Renderer"}]},{"type":"text","value":" to render group cells, and are configured via the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellRendererParams"}]},{"type":"text","value":" property."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates some of the available "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoGroupColumnDef"}]},{"type":"text","value":" configurations. Note that:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The group column names are changed using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"headerValueGetter"}]},{"type":"text","value":" to add 'Group Column' after each column name."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The min width of the group column is changed via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"minWidth = 220"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The count of each row group is removed by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellRendererParams.suppressCount = true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Checkboxes are displayed beside each row group by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellRendererParams.checkbox = true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Multiple Group Columns Configuration","name":"multiple-group-columns-configuration","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"showing-open-groups","style":"position:relative;"},"children":[{"type":"text","value":"Showing Open Groups"},{"type":"element","tagName":"a","properties":{"href":"#showing-open-groups","ariaLabel":"showing open 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":"Setting the grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"showOpenedGroup=true"}]},{"type":"text","value":" will show the name of the opened group inside the group column.\nThis is useful when the user scrolls down through the children of the group, and the row showing what group\nwas opened is scrolled out of view."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example uses "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"showOpenedGroup=true"}]},{"type":"text","value":" with many group columns. The open groups are shown across all\ngroup columns where the group is open for that column."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Show Opened Groups Many Columns","name":"show-opened-groups-many-columns","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"hide-open-parents","style":"position:relative;"},"children":[{"type":"text","value":"Hide Open Parents"},{"type":"element","tagName":"a","properties":{"href":"#hide-open-parents","ariaLabel":"hide open parents 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":"Depending on your preference, you may wish to hide parent rows when they are open. This gives the impression to the user that the children takes the place of the parent row. This feature only makes sense when groups are in different columns. To turn this feature on set "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupHideOpenParents=true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Below shows examples of this. Notice that each group row has "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/aggregation/"},"children":[{"type":"text","value":"aggregated values"}]},{"type":"text","value":" which are explained in a documentation page of their own. When the group is closed, the group row shows the aggregated result. When the group is open, the group row is removed and in its place the child rows are displayed. To allow closing the group again, the group column knows to display the parent group in the group column only (so you can click on the icon to close the group)."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates hiding open parents using auto group columns. To help demonstrate, the grid is configured to shade the rows different colors for the different group levels, so when you open a group, you can see the background change indicating that the group row is no longer displayed, instead the children are in it's place."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Filter is achieved for each column by providing a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterValueGetter"}]},{"type":"text","value":" for the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoGroupColumnDef"}]},{"type":"text","value":". The filterValueGetter returns the value of the grouped column - eg for Country, it will filter on Country."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Hide Open Parents","name":"hide-open-parents","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\", \"setfilter\"] }"},"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 the "},{"type":"element","tagName":"a","properties":{"href":"../grouping-group-rows/"},"children":[{"type":"text","value":"Group Rows"}]},{"type":"text","value":" display type."}]}]},"frontmatter":{"title":"Row Grouping - Multiple Group Columns","version":null,"enterprise":true,"sideMenu":null,"description":null},"headings":[{"id":"enabling-multiple-group-columns","depth":2,"value":"Enabling Multiple Group Columns"},{"id":"group-column-configuration","depth":2,"value":"Group Column Configuration"},{"id":"showing-open-groups","depth":2,"value":"Showing Open Groups"},{"id":"hide-open-parents","depth":2,"value":"Hide Open Parents"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"angular","srcPath":"/grouping-multiple-group-columns","pageName":"grouping-multiple-group-columns"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}