Row moves to top after editing in ag-grid

0
votes

I've created grid using ag-grid with editable=true for one field in columnDefs array. When I edit that column for any row, then after editing the row moves to top automatically.

I've gone through all documentations of ag-grid, but didn't find anything related to this issue. Can it be prevented in some way?

HTML

            <ag-grid-angular
                style="width: 100%; height: 300px; box-sizing: border-box;" 
                class="ag-theme-balham"
                [rowData]="selectedSecurities"
                [columnDefs]="columnDefs"
                [enableColResize]="true"
                [deltaRowDataMode]="true"
                [getRowNodeId]="getRowNodeId"
                [context]="context"
                [frameworkComponents]="frameworkComponents"
                [stopEditingWhenGridLosesFocus]="true"
                [singleClickEdit]="true"
                (gridReady)="onGridReady($event)">
            </ag-grid-angular>

TS

constructor() {
    this.columnDefs = [{
        headerName: 'Name',
        field: 'name',
        colSpan: (params) => {
            if (params.data.section === 'big-title')
                return 2;
            return 1;
        },
        cellClassRules: this.cellClassRules,
        editable: (params) => { return params.data.section === 'big-title'; },
        cellRenderer: 'spotGridCellRenderer',
        colId: 'spotGridNameField',
        getQuickFilterText: (params) => {
            return params.data.name.toLowerCase();
        }
    },
    { headerName: 'Spot', field: 'spot', hide: true, valueFormatter: this.numberValueFormater },
    { headerName: 'Fwd', field: 'fwd', hide: true, valueFormatter: this.numberValueFormater },
    {
        headerName: 'Value',
        cellRenderer: "agAnimateShowChangeCellRenderer",
        valueGetter: function totalValueGetter(params) {
            if (params.data.fwd)
                return params.data.spot + params.data.fwd;
            return params.data.spot;
        }, valueFormatter: this.numberValueFormater
    }];
    this.context = { componentParent: this };
    this.frameworkComponents = {
    spotGridCellRenderer: spotGridCellRenderer
    };
    this.getRowNodeId = data => data.name;
}

private selectedSecurities = [{"currencyPairId":3,"name":"AUDJPY3m","type":"fwd","tenorIndex":5,"tokenIds":[5,6],"spot":6.731458,"fwd":2.7974},{"currencyPairId":3,"name":"AUDJPY2m","type":"fwd","tenorIndex":4,"tokenIds":[5,6],"spot":6.731458,"fwd":0.172959}];

private addCustomHeader(rowIndex) {
   let obj = {
      'name': 'Custom Header...',
      'section': 'big-title'
   };
   this.selectedSecurities.splice(rowIndex, 0, obj);
   this.selectedSecurities = [...this.selectedSecurities];
   this.gridApi.setRowData(this.selectedSecurities);
   this.gridApi.refreshCells();
}

I call addCustomHeader method with rowIndex on which I need to add a new data in selectedSecurities, and it do this perfectly and updates the grid also. But when I try to edit any editable column then that particular row is shifted to top of the grid. I inspected the original array and it still shows the order correctly. I'm unable to understand that if the array holds the data in right order and I am using deltaRowDataMode also, then why the edited column's row is moving to top of grid.

Before Editing

enter image description here

After Editing 2nd Row

enter image description here

1
angular6ag-gridag-grid-angular
can u reproduce your issue on plunk or stackblitz so that others can help u easily? Go through minimal reproducible example – Paritosh
stackblitz.com/edit/angular-stycah Please find the minimal reproduction of the issue. I have mocked the way I'm updating the data in the array, and after updating this issue occurs. – Harsh Mathur

1 Answers

2
votes

The default behavior of agGrid is to scroll to top when a new data is entered to the grid. You can use suppressScrollOnNewData to disable scroll on editing a cell.

From documentation :

When true, the grid will not scroll to the top when new row data is provided. Use this if you don't want the default behaviour of scrolling to the top every time you load new data.

https://www.ag-grid.com/javascript-grid-properties/