Row Selection can allow users to select rows in a tree structure.
Selecting Descendants Copy Link
When using Multiple Row Selection 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.
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") {
// Enable extended validations only for development
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) => {
if (params.value == null) {
return ""; // params.value can be null/undefined here (e.g. no size for this row)
}
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");
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
#myGrid {
flex: 1 1 0px;
width: 100%;
}
.example-header {
margin-bottom: 5px;
}
const files = [
{ path: ['Desktop', 'ProjectAlpha', 'Proposal.docx'], size: 512000, created: '2023-07-10', modified: '2023-08-01' },
{
path: ['Desktop', 'ProjectAlpha', 'Timeline.xlsx'],
size: 1048576,
created: '2023-07-12',
modified: '2023-08-03',
},
{ path: ['Desktop', 'ToDoList.txt'], size: 51200, created: '2023-08-05', modified: '2023-08-10' },
{ path: ['Desktop', 'MeetingNotes_August.pdf'], size: 460800, created: '2023-08-15', modified: '2023-08-15' },
{ path: ['Documents', 'Work', 'ProjectAlpha'] },
{
path: ['Documents', 'Work', 'ProjectAlpha', 'Proposal.docx'],
size: 512000,
created: '2023-07-10',
modified: '2023-08-01',
},
{
path: ['Documents', 'Work', 'ProjectAlpha', 'Timeline.xlsx'],
size: 1048576,
created: '2023-07-12',
modified: '2023-08-03',
},
{
path: ['Documents', 'Work', 'ProjectBeta', 'Report.pdf'],
size: 1024000,
created: '2023-06-22',
modified: '2023-07-15',
},
{
path: ['Documents', 'Work', 'ProjectBeta', 'Budget.xlsx'],
size: 1048576,
created: '2023-06-25',
modified: '2023-07-18',
},
{
path: ['Documents', 'Work', 'Meetings', 'TeamMeeting_August.pdf'],
size: 512000,
created: '2023-08-20',
modified: '2023-08-21',
},
{
path: ['Documents', 'Work', 'Meetings', 'ClientMeeting_July.pdf'],
size: 1048576,
created: '2023-07-15',
modified: '2023-07-16',
},
{
path: ['Documents', 'Personal', 'Taxes', '2022.pdf'],
size: 1024000,
created: '2023-04-10',
modified: '2023-04-10',
},
{
path: ['Documents', 'Personal', 'Taxes', '2021.pdf'],
size: 1048576,
created: '2022-04-05',
modified: '2022-04-06',
},
{
path: ['Documents', 'Personal', 'Taxes', '2020.pdf'],
size: 1024000,
created: '2021-04-03',
modified: '2021-04-03',
},
{ path: ['Pictures', 'Vacation2019', 'Beach.jpg'], size: 1048576, created: '2019-07-10', modified: '2019-07-12' },
{
path: ['Pictures', 'Vacation2019', 'Mountain.png'],
size: 2048000,
created: '2019-07-11',
modified: '2019-07-13',
},
{ path: ['Pictures', 'Family', 'Birthday2022.jpg'], size: 3072000, created: '2022-12-15', modified: '2022-12-20' },
{ path: ['Pictures', 'Family', 'Christmas2021.png'], size: 2048000, created: '2021-12-25', modified: '2021-12-26' },
{ path: ['Videos', 'Vacation2019', 'Beach.mov'], size: 4194304, created: '2019-07-10', modified: '2019-07-12' },
{ path: ['Videos', 'Vacation2019', 'Hiking.mp4'], size: 4194304, created: '2019-07-15', modified: '2019-07-16' },
{ path: ['Videos', 'Family', 'Birthday2022.mp4'], size: 6291456, created: '2022-12-15', modified: '2022-12-20' },
{ path: ['Videos', 'Family', 'Christmas2021.mov'], size: 6291456, created: '2021-12-25', modified: '2021-12-26' },
{ path: ['Downloads', 'SoftwareInstaller.exe'], size: 2097152, created: '2023-08-01', modified: '2023-08-01' },
{ path: ['Downloads', 'Receipt_OnlineStore.pdf'], size: 1048576, created: '2023-08-05', modified: '2023-08-05' },
{ path: ['Downloads', 'Ebook.pdf'], size: 1048576, created: '2023-08-08', modified: '2023-08-08' },
];
export function getData() {
return files;
}
Checkboxes in Group Cells Copy Link
When using 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'.
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") {
// Enable extended validations only for development
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) => {
if (params.value == null) {
return ""; // params.value can be null/undefined here (e.g. no size for this row)
}
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");
const files = [
{ path: ['Desktop', 'ProjectAlpha', 'Proposal.docx'], size: 512000, created: '2023-07-10', modified: '2023-08-01' },
{
path: ['Desktop', 'ProjectAlpha', 'Timeline.xlsx'],
size: 1048576,
created: '2023-07-12',
modified: '2023-08-03',
},
{ path: ['Desktop', 'ToDoList.txt'], size: 51200, created: '2023-08-05', modified: '2023-08-10' },
{ path: ['Desktop', 'MeetingNotes_August.pdf'], size: 460800, created: '2023-08-15', modified: '2023-08-15' },
{ path: ['Documents', 'Work', 'ProjectAlpha'] },
{
path: ['Documents', 'Work', 'ProjectAlpha', 'Proposal.docx'],
size: 512000,
created: '2023-07-10',
modified: '2023-08-01',
},
{
path: ['Documents', 'Work', 'ProjectAlpha', 'Timeline.xlsx'],
size: 1048576,
created: '2023-07-12',
modified: '2023-08-03',
},
{
path: ['Documents', 'Work', 'ProjectBeta', 'Report.pdf'],
size: 1024000,
created: '2023-06-22',
modified: '2023-07-15',
},
{
path: ['Documents', 'Work', 'ProjectBeta', 'Budget.xlsx'],
size: 1048576,
created: '2023-06-25',
modified: '2023-07-18',
},
{
path: ['Documents', 'Work', 'Meetings', 'TeamMeeting_August.pdf'],
size: 512000,
created: '2023-08-20',
modified: '2023-08-21',
},
{
path: ['Documents', 'Work', 'Meetings', 'ClientMeeting_July.pdf'],
size: 1048576,
created: '2023-07-15',
modified: '2023-07-16',
},
{
path: ['Documents', 'Personal', 'Taxes', '2022.pdf'],
size: 1024000,
created: '2023-04-10',
modified: '2023-04-10',
},
{
path: ['Documents', 'Personal', 'Taxes', '2021.pdf'],
size: 1048576,
created: '2022-04-05',
modified: '2022-04-06',
},
{
path: ['Documents', 'Personal', 'Taxes', '2020.pdf'],
size: 1024000,
created: '2021-04-03',
modified: '2021-04-03',
},
{ path: ['Pictures', 'Vacation2019', 'Beach.jpg'], size: 1048576, created: '2019-07-10', modified: '2019-07-12' },
{
path: ['Pictures', 'Vacation2019', 'Mountain.png'],
size: 2048000,
created: '2019-07-11',
modified: '2019-07-13',
},
{ path: ['Pictures', 'Family', 'Birthday2022.jpg'], size: 3072000, created: '2022-12-15', modified: '2022-12-20' },
{ path: ['Pictures', 'Family', 'Christmas2021.png'], size: 2048000, created: '2021-12-25', modified: '2021-12-26' },
{ path: ['Videos', 'Vacation2019', 'Beach.mov'], size: 4194304, created: '2019-07-10', modified: '2019-07-12' },
{ path: ['Videos', 'Vacation2019', 'Hiking.mp4'], size: 4194304, created: '2019-07-15', modified: '2019-07-16' },
{ path: ['Videos', 'Family', 'Birthday2022.mp4'], size: 6291456, created: '2022-12-15', modified: '2022-12-20' },
{ path: ['Videos', 'Family', 'Christmas2021.mov'], size: 6291456, created: '2021-12-25', modified: '2021-12-26' },
{ path: ['Downloads', 'SoftwareInstaller.exe'], size: 2097152, created: '2023-08-01', modified: '2023-08-01' },
{ path: ['Downloads', 'Receipt_OnlineStore.pdf'], size: 1048576, created: '2023-08-05', modified: '2023-08-05' },
{ path: ['Downloads', 'Ebook.pdf'], size: 1048576, created: '2023-08-08', modified: '2023-08-08' },
];
export function getData() {
return files;
}
The example above demonstrates the following configuration to render checkboxes in the group cell:
<ag-grid-vue
:rowSelection="rowSelection"
/* other grid options ... */>
</ag-grid-vue>
this.rowSelection = {
mode: 'multiRow',
checkboxLocation: 'autoGroupColumn',
headerCheckbox: false,
};