ag-grid - Add Row with infinite row model

Question

I need to add a new row in the ag-grid with infinite scroll. There are similar questions for example this one. However my case is very different. I am using inline editing in the ag-grid and have a button to add a new row. There is a submit button which the user may or may not press. So the data on the server is not immediatly modified when the new row added to the client site. When I was using a client side model everything was trivial - I get the rows from the server and can add new rows to the array and call setRowData on ag-grid. However this function is not available with infinite scroll. I am using angular 2+ if that matters.

I tried to call applyTransaction however got an error in the console:

g-Grid: updateRowData() only works with ClientSideRowModel. Working with InfiniteRowModel was deprecated in v23.1 and removed in v24.1

Seems like a-grid simply removed the functionality with nothing to replace with.

Kaki Master Of Time Kaki Master Of Time · Accepted Answer · 2021-01-13T20:59:47

i personally didn't use agGrid with angular, but if you are using infiniteRow model, you can use the setDataSource method that would force your table to refresh it's data.

the setDataSource method accepts an object with two minimum parameters :

{
  rowCount: null,
  getRows: (params) =>{
    // here you can do your server call or, you can pass the data you want instead.  

  // you also need to do one thing at the end of your row generation, call this method
//`rows` is the array of rows you want to show, `totalRowsNumber` is the number of rows in total, including those that are not shown (the ones in later pages)
params.successCallback(rows, totalRowsNumber);
  
  } 
}

setting the dataSource is trivial using the gridApi.setDatasource(dataSourceObject)

ag-grid - Add Row with infinite row model

1 Answers