---
title: "Row Grouping - Hierarchy Selection"
enterprise: true
framework: vue
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/vue-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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  GroupSelectionMode,
  ModuleRegistry,
  QuickFilterModule,
  RowSelectionModule,
  RowSelectionOptions,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

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

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <div class="example-header">
        <label>
          <span>Group selects:</span>
          <select id="input-group-selection-mode" v-on:change="onSelectionModeChange()">
            <option value="self">self</option>
            <option value="descendants">descendants</option>
            <option value="filteredDescendants">filteredDescendants</option>
          </select>
        </label>
        <label>
          <span>Quick Filter:</span>
          <input type="text" id="input-quick-filter" v-on:input="onQuickFilterChanged()">
          </label>
        </div>
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :columnDefs="columnDefs"
          :defaultColDef="defaultColDef"
          :autoGroupColumnDef="autoGroupColumnDef"
          :rowSelection="rowSelection"
          :suppressAggFuncInHeader="true"
          :rowData="rowData"></ag-grid-vue>
        </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", rowGroup: true, hide: true },
      { field: "sport", rowGroup: true, hide: true },
      { field: "gold", aggFunc: "sum" },
      { field: "silver", aggFunc: "sum" },
      { field: "bronze", aggFunc: "sum" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      headerName: "Athlete",
      field: "athlete",
      minWidth: 250,
      cellRenderer: "agGroupCellRenderer",
    });
    const rowSelection = ref<RowSelectionOptions | "single" | "multiple">({
      mode: "multiRow",
      groupSelects: "self",
    });
    const rowData = ref<IOlympicData[]>(null);

    function onSelectionModeChange() {
      gridApi.value.setGridOption("rowSelection", {
        mode: "multiRow",
        groupSelects: getGroupSelectsValue(),
      });
    }
    function onQuickFilterChanged() {
      gridApi.value.setGridOption(
        "quickFilterText",
        document.querySelector<HTMLInputElement>("#input-quick-filter")?.value,
      );
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      autoGroupColumnDef,
      rowSelection,
      rowData,
      onGridReady,
      onSelectionModeChange,
      onQuickFilterChanged,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

The example above demonstrates the following configuration:

```ts
<ag-grid-vue
    :rowSelection="rowSelection"
    /* other grid options ... */>
</ag-grid-vue>

this.rowSelection = {
    mode: 'multiRow',
    groupSelects: 'descendants',
};
```

> **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/vue-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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowSelectionModule,
  RowSelectionOptions,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :autoGroupColumnDef="autoGroupColumnDef"
      :rowSelection="rowSelection"
      :suppressAggFuncInHeader="true"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", rowGroup: true, hide: true },
      { field: "sport", rowGroup: true, hide: true },
      { field: "gold", aggFunc: "sum" },
      { field: "silver", aggFunc: "sum" },
      { field: "bronze", aggFunc: "sum" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      headerName: "Athlete",
      field: "athlete",
      minWidth: 250,
      cellRenderer: "agGroupCellRenderer",
    });
    const rowSelection = ref<RowSelectionOptions | "single" | "multiple">({
      mode: "multiRow",
      groupSelects: "self",
      checkboxLocation: "autoGroupColumn",
    });
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      autoGroupColumnDef,
      rowSelection,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

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

```ts
<ag-grid-vue
    :rowSelection="rowSelection"
    /* other grid options ... */>
</ag-grid-vue>

this.rowSelection = {
    mode: 'multiRow',
    checkboxLocation: 'autoGroupColumn',
};
```