CODEWITHSUNDEEP
angularag-grid
nikoh
nikoh

Reputation: 51

How to insert row at index into sorted ag-grid

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.

Upvotes: 5

Views: 9268

Answers (2)

Mike Gledhill
Mike Gledhill

Reputation: 29161

Apparently, agGrid themselves broke (well, depreciated) the addIndex functionality in agGrid v23.1.... oh, but they then decided to bring it back with v24.1.

Yes, seriously.

So, the best way to fix this is to first, check if you have an older version of agGrid:

npm outdated

enter image description here

And if so, update it using:

npm install ag-grid-angularlatest
npm install ag-grid-community@latest
npm install ag-grid-enterprise@latest

You now need to add rows into your agGrid using:

   let trans:RowDataTransaction = {
       add: [ newRecord ],
       addIndex: 0
   };
   gridApi.applyTransaction(trans);

Upvotes: 1

un.spike
un.spike

Reputation: 5113

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:

  1. 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.
  2. Sorted: it would be displayed based on sorting conditions.
  3. 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)

Upvotes: 5

Related Questions