How to insert row at index into sorted ag-grid

Question

I have a grid setup with sorting enabled. Each row has a duplicate button. When duplicating a row, I would like to insert the new row just below the copied row. This works with a default sort but if you sort it on a column like for example status, it randomly inserts the row into the grid, making it hard to find.

I have noticed that the grid does a sort sometime during save, yet before it gets a response to assign a new id.

I have tried adding the row using updateRowData(transaction) with an addIndex but it either doesn't insert anything or ignores the index.

I do have access to any component variables from the postSort but I only get a response with an ID after the postSort.

cloneRow(item: any): void {
 let newRow = JSON.parse(JSON.stringify(item.data)) as Object;
 newRow.gridItemId = null;

 this.index = this.api.getFocusedCell().rowIndex;

 this.selectRow(newRow, ++index);
 this.saveRow(newRow);
}

selectRow(newRow: Object, index: number) {
 this.selectedObject = [];
 this.gridItemList.splice(index, 0, newRow);

 this.api.setFocusedCell(index, "ColumnName");
 this.api.startEditingCell({
  rowIndex: index,
  colKey: "ColumnName"
 });
}

saveRow(newRow: Object): void {
 let objectsToSave = new Array<Object>();
 objectsToSave.push(newRow);

 this.CustomService.saveRow(objectsToSave)
  .subscribe(
   (response) => {
    if (!newRow.rowId) {
     newRow.rowId = response[0].rowId;
    }
    this.gridItemList.filter(g => g.gridItemId === response[0].gridItemId)[0] = response[0];
    this.api.refreshCells();
}

postSort = function(rowNodes) {
 console.log("Post Sort");
}

Expected: The copied row gets inserted just below the original row. Actual: The copied row get inserted somewhere in the grid.

un.spike un.spike · Accepted Answer · 2019-03-27T10:18:15

it randomly inserts the row into the grid, making it hard to find.

Actually it's not random, new values could be inserted via updateRowData

api.updateRowData({add:[listofvalues], addIndex:startIndexPosition})

where listofvalues list of objects to insert (even if it would be just one object), and startIndexPosition index of position from where insert will start without sorting

Let's go deeper, the ag-grid has few states:

Default: it would be displayed exactly how it's passed to rowData and on this case addIndex is matter, and I suppose only on default state addInex is used.
Sorted: it would be displayed based on sorting conditions.
Grouped: guess its complex state because groups could be defined as default and has sorting

Simple example for demonstration

try to sort (change to sort asc,desc, and default) by athlete and click add row, you will see new rows on start,end and on inserted place (with default state)

How to insert row at index into sorted ag-grid

2 Answers