---
title: "Row Grouping - Hierarchy Selection"
enterprise: true
framework: javascript
version: "36.1.0"
---

# Row Grouping - Hierarchy Selection

Row Selection can be configured with groups to select all of a rows descendants.

## Selecting Descendants

When using [Multiple Row Selection](https://www.ag-grid.com/javascript-data-grid/row-selection-multi-row/) with row grouping, the grid can be configured to impact descendant and ancestor rows when a row is selected.

To enable hierarchical selection, set the `selection.groupSelects` option to one of the following values:

- `'self'`: Selecting a group row has no additional side effects.
- `'descendants'`: Selecting a group row will select all of its descendants.
- `'filteredDescendants'`: Selecting a group row will select all of its descendants that pass the filter.

#### Group Selection

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  GroupSelectionMode,
  ModuleRegistry,
  QuickFilterModule,
  RowSelectionModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  QuickFilterModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
  RowSelectionModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "country", rowGroup: true, hide: true },
    { field: "sport", rowGroup: true, hide: true },
    { field: "gold", aggFunc: "sum" },
    { field: "silver", aggFunc: "sum" },
    { field: "bronze", aggFunc: "sum" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  autoGroupColumnDef: {
    headerName: "Athlete",
    field: "athlete",
    minWidth: 250,
    cellRenderer: "agGroupCellRenderer",
  },
  rowSelection: {
    mode: "multiRow",
    groupSelects: "self",
  },
  suppressAggFuncInHeader: true,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));

function getGroupSelectsValue(): GroupSelectionMode {
  return (
    (document.querySelector<HTMLSelectElement>("#input-group-selection-mode")
      ?.value as any) ?? "self"
  );
}

function onSelectionModeChange() {
  gridApi.setGridOption("rowSelection", {
    mode: "multiRow",
    groupSelects: getGroupSelectsValue(),
  });
}

function onQuickFilterChanged() {
  gridApi.setGridOption(
    "quickFilterText",
    document.querySelector<HTMLInputElement>("#input-quick-filter")?.value,
  );
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).onSelectionModeChange = onSelectionModeChange;
  (<any>window).onQuickFilterChanged = onQuickFilterChanged;
}
```

[Live example: Group Selection](https://www.ag-grid.com/examples/grouping-row-selection/group-selection/typescript/)

The example above demonstrates the following configuration:

```js
const gridOptions = {
    rowSelection: {
        mode: 'multiRow',
        groupSelects: 'descendants',
    },

    // other grid options ...
}
```

> **Note**
>
> When using `groupSelects: 'descendants'` or `groupSelects: 'filteredDescendants'`, group nodes will not be returned as part of `api.getSelectedNodes()` or `api.getSelectedRows()`.

## Checkboxes in Group Cells

When using [Row Selection](https://www.ag-grid.com/javascript-data-grid/row-selection/) with grouping, the grid can be configured to render checkboxes in the group cell, to the right of the expand/collapse chevron.

This can be configured on by setting the `rowSelection.checkboxLocation` option to `'autoGroupColumn'`.

#### Group Cell Checkboxes

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  RowSelectionModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  RowSelectionModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "country", rowGroup: true, hide: true },
    { field: "sport", rowGroup: true, hide: true },
    { field: "gold", aggFunc: "sum" },
    { field: "silver", aggFunc: "sum" },
    { field: "bronze", aggFunc: "sum" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  autoGroupColumnDef: {
    headerName: "Athlete",
    field: "athlete",
    minWidth: 250,
    cellRenderer: "agGroupCellRenderer",
  },
  rowSelection: {
    mode: "multiRow",
    groupSelects: "self",
    checkboxLocation: "autoGroupColumn",
  },
  suppressAggFuncInHeader: true,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

[Live example: Group Cell Checkboxes](https://www.ag-grid.com/examples/grouping-row-selection/group-cell-checkboxes/typescript/)

The example above demonstrates the following configuration to render checkboxes in the group cell:

```js
const gridOptions = {
    rowSelection: {
        mode: 'multiRow',
        checkboxLocation: 'autoGroupColumn',
    },

    // other grid options ...
}
```