To stop the scrolling of an ag-Grid on top when deleting or adding a new row in Angular, you can use the following steps:
- Import the
GridOptionsandEventsfromag-grid-communityin your component:
import { GridOptions, Events } from 'ag-grid-community';2. In your component class, define the gridOptions object of type GridOptions:
gridOptions: GridOptions;
3. Initialize the gridOptions object in the component’s ngOnInit() method and set the suppressScrollOnNewData property to true:
ngOnInit() {
this.gridOptions = {
// Other grid options...
suppressScrollOnNewData: true
};
}4. In the template file, bind the gridOptions to the ag-Grid component:
<ag-grid-angular [gridOptions]="gridOptions" [rowData]="rowData"></ag-grid-angular>
5. When you add or delete a row, ensure that you refresh the grid to reflect the changes. After adding or deleting the row, call the refreshCells() method on the gridApi object:
// When adding a new row
this.rowData.push(newRowData);
this.gridOptions.api.refreshCells();
// When deleting a row
const selectedRowNodes = this.gridOptions.api.getSelectedNodes();
if (selectedRowNodes && selectedRowNodes.length > 0) {
const selectedRow = selectedRowNodes[0].data;
const rowIndex = this.rowData.indexOf(selectedRow);
this.rowData.splice(rowIndex, 1);
this.gridOptions.api.refreshCells();
}By setting the suppressScrollOnNewData property to true and calling refreshCells() after adding or deleting a row, the grid will not scroll to the top. Instead, it will maintain the current scroll position.
