When working with cell selection, it can be useful to have a handle inside the last cell to enable the size of the current range to be adjusted.
Enabling the Range Handle Copy Link
To enable the Range Handle, set cellSelection.handle to { mode: 'range' } in the gridOptions.
<ag-grid-angular
[cellSelection]="cellSelection"
/* other grid options ... */ />
this.cellSelection = {
handle: {
mode: 'range',
}
};The example below demonstrates simple range selection with a range handle.
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
CellSelectionOptions,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([ClientSideRowModelModule, CellSelectionModule]);
import { IOlympicData } from "./interfaces";
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: `<ag-grid-angular
style="width: 100%; height: 100%;"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[cellSelection]="cellSelection"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
/> `,
})
export class AppComponent {
columnDefs: ColDef[] = [
{ field: "athlete", minWidth: 150 },
{ field: "age", maxWidth: 90 },
{ field: "country", minWidth: 150 },
{ field: "year", maxWidth: 90 },
{ field: "date", minWidth: 150 },
{ field: "sport", minWidth: 150 },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
{ field: "total" },
];
defaultColDef: ColDef = {
flex: 1,
minWidth: 100,
};
cellSelection: boolean | CellSelectionOptions = { handle: { mode: "range" } };
rowData!: IOlympicData[];
constructor(private http: HttpClient) {}
onGridReady(params: GridReadyEvent<IOlympicData>) {
this.http
.get<
IOlympicData[]
>("https://www.ag-grid.com/example-assets/olympic-winners.json")
.subscribe((data) => (this.rowData = data));
}
}