Строка движется вверх после редактирования в ag-grid

Я создал сетку, используя ag-grid с editable = true для одного поля в массиве columnDefs. Когда я редактирую этот столбец для любой строки, то после редактирования строка автоматически перемещается вверх.

Я просмотрел всю документацию ag-grid, но не нашел ничего связанного с этой проблемой. Можно ли это как-то предотвратить?

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();
}

Я вызываю метод addCustomHeader с rowIndex, в который мне нужно добавить новые данные в selectedSecurities, и он делает это отлично и также обновляет сетку. Но когда я пытаюсь редактировать любой редактируемый столбец, эта конкретная строка перемещается в верхнюю часть сетки. Я проверил исходный массив, и он все еще показывает порядок правильно. Я не могу понять, что если массив содержит данные в правильном порядке, и я также использую deltaRowDataMode, то почему строка отредактированного столбца перемещается в верхнюю часть сетки.

Перед редактированием

введите описание изображения здесь

После редактирования 2-й строки

введите описание изображения здесь

Источник

0 ответов

Поведение agGrid по умолчанию - прокрутка вверх при вводе новых данных в сетку. Вы можете использоватьsuppressScrollOnNewData для отключения прокрутки при редактировании ячейки.

Из документации:

Если задано значение true, сетка не будет прокручиваться вверх при предоставлении данных новой строки. Используйте это, если вы не хотите, чтобы по умолчанию выполнялась прокрутка вверх каждый раз при загрузке новых данных.

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

Источник
Другие вопросы по тегам