---
title: "Tree Data - Tree Selection"
enterprise: true
framework: vue
version: "36.1.0"
---

# Tree Data - Tree Selection

Row Selection can allow users to select rows in a tree structure.

## Selecting Descendants

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

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

- `'self'` (default): Selecting a row selects only the row itself.
- `'descendants'`: Selecting a row will select all of its descendants. Its ancestor row will become indeterminate, unless all of its descendant rows are selected.
- `'filteredDescendants'`: Selecting a group row will select all of its descendants that pass the filter. Its ancestor row will become indeterminate, unless all of its descendant rows are selected.

#### 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,
  GetDataPath,
  GridApi,
  GridOptions,
  GridReadyEvent,
  GroupSelectionMode,
  ModuleRegistry,
  QuickFilterModule,
  RowSelectionModule,
  RowSelectionOptions,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  TreeDataModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

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

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"
          :groupDefaultExpanded="groupDefaultExpanded"
          :suppressAggFuncInHeader="true"
          :rowData="rowData"
          :treeData="true"
          :getDataPath="getDataPath"></ag-grid-vue>
        </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "created" },
      { field: "modified" },
      {
        field: "size",
        aggFunc: "sum",
        valueFormatter: (params) => {
          const sizeInKb = params.value / 1024;
          if (sizeInKb > 1024) {
            return `${+(sizeInKb / 1024).toFixed(2)} MB`;
          } else {
            return `${+sizeInKb.toFixed(2)} KB`;
          }
        },
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      headerName: "File Explorer",
      minWidth: 280,
      cellRenderer: "agGroupCellRenderer",
      cellRendererParams: {
        suppressCount: true,
      },
    });
    const rowSelection = ref<RowSelectionOptions | "single" | "multiple">({
      mode: "multiRow",
      groupSelects: "self",
    });
    const groupDefaultExpanded = ref(-1);
    const rowData = ref<any[] | null>(getData());
    const getDataPath = ref<GetDataPath>((data) => data.path);

    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;
    };

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

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

[Live example: Group Selection](https://www.ag-grid.com/archive/36.1.0/examples/tree-data-selection/group-selection/vue3)

## Checkboxes in Group Cells

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

This can be configured by setting the `rowSelection.checkboxLocation` 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,
  GetDataPath,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowSelectionModule,
  RowSelectionOptions,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  TreeDataModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

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

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"
      :rowData="rowData"
      :treeData="true"
      :getDataPath="getDataPath"
      :rowSelection="rowSelection"
      :groupDefaultExpanded="groupDefaultExpanded"
      :suppressAggFuncInHeader="true"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "created" },
      { field: "modified" },
      {
        field: "size",
        aggFunc: "sum",
        valueFormatter: (params) => {
          const sizeInKb = params.value / 1024;
          if (sizeInKb > 1024) {
            return `${+(sizeInKb / 1024).toFixed(2)} MB`;
          } else {
            return `${+sizeInKb.toFixed(2)} KB`;
          }
        },
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      headerName: "File Explorer",
      minWidth: 280,
      cellRenderer: "agGroupCellRenderer",
      cellRendererParams: {
        suppressCount: true,
      },
    });
    const rowData = ref<any[] | null>(getData());
    const getDataPath = ref<GetDataPath>((data) => data.path);
    const rowSelection = ref<RowSelectionOptions | "single" | "multiple">({
      mode: "multiRow",
      checkboxLocation: "autoGroupColumn",
      headerCheckbox: false,
    });
    const groupDefaultExpanded = ref(-1);

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

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

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

[Live example: Group Cell Checkboxes](https://www.ag-grid.com/archive/36.1.0/examples/tree-data-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',
    headerCheckbox: false,
};
```