Stop scrolling of ag-grid on top while deleting or adding a new row in angular

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:

  1. Import the GridOptions and Events from ag-grid-community in 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.

Leave a Reply