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 · Accepted Answer · 2021-01-13 20:59:47Z

4

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)

answered Jan 13, 2021 at 20:59

Kaki Master Of Time

1,6563 gold badges22 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2555515 Over a year ago

Thanks, that's what I ended up doing. It is a bit messy and complex for example how to handle scrolling out the modified rows, I hope there would be some straightforward way similar to apply transaction in the client side mode

plrthink Over a year ago

Can you share the solution? I’m also stuck with this.

Street0 · Accepted Answer · 2023-01-20 12:43:48Z

Afaik, AG Grid still doesn't support this simple (in my opinion) use-case and forces you to re-fetch currently displayed chunk from the server.

This introduces quite an overhead (in my opinion) as you will query and fetch <chunk_size> data from server when in reality you could've just client add/remove/update the row into the table pessimistically or optimistically without extra chunk fetch overhead which is totally unnecessary.

So in summary: After the operations, you re-fetch the chunk by using gridApi.refreshServerSide(), which also has option to purge cache which will introduce those annoying loading rows.

Worst part is that refreshServerSide is a void so you can't even have callbacks out of the box but you need to manage it some other way to improve UX.

Collectives™ on Stack Overflow

ag-grid - Add Row with infinite row model

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related