Add / Remove row(s) in ag-grid

Question

How to add or remove a row in ag-grid,
i try this, but not work

$scope.gridOptions.rowData.push(data);

and with this

scope.gridOptions.api.forEachNode( function(node) {
    var data = node.data;
    updatedNodes.push(vehicle);
});

$scope.gridOptions.api.refreshRows(updatedNodes);

Thanks

Answer 1

This is what worked for me with the ag-grid community version 22.1.1:

add new row

const row = //someNewRowDataHere

this.gridOptions.rowData.push(row)
this.gridApi.setRowData(this.gridOptions.rowData)

remove

const selectedRow = this.gridApi.getFocusedCell()
const id = this.gridOptions.rowData[selectedRow.rowIndex].i

this.gridOptions.rowData.splice(selectedRow.rowIndex, 1)
this.gridApi.setRowData(this.gridOptions.rowData)

Answer 2

I personally like this approach

Add row

$( '#newRow' ).on( 'click', function() {
    gridOptions.api.applyTransaction({ add: gridOptions.rowData });
} );

Remove row (ex. clicking on a bin-icon)

Works with rowDragManaged enabled

// remove row
$( document ).on( 'click', '#myGridFees .fa-trash-alt', function(e) {
    $.fn.agGridRemoveRowByBinClick(gridFeeOptions, $(this));
});


/**
 *
 * @param agGridOption
 * @param $this
 */
$.fn.agGridRemoveRowByBinClick = function(agGridOption, $this) {
    let id = $this.closest('.ag-row').attr( 'row-id' );
    agGridOption.api.applyTransaction({ remove: [ agGridOption.api.getRowNode(id).data ] });
}