ag-grid - Remove row with infinite row model


Keywords:ag  grid 


Question: 

I'm trying to delete a row using a grid with Infinite Row model and a Pagination feature. I'm not sure how to delete a specific row and update the internal model without having to refresh the grid (thus making a new ajax request).

I've already read this thread:

and apparentely I should delete the row on the server (which I'm already doing) and then call the refresh api but this cause to have the "getRows" function to be called every time and the pagination and, another issue is that the pagination doesn't update. If I have 100 items in 10 pages, I delete one item and call the refresh cache api, the internal pagination is not updated keeping the 100 items total and 10 pages as reference.


1 Answer: 

I should delete the row on the server (which I'm already doing) and then call the refresh api but this cause to have the "getRows" function to be called every time and the pagination and, another issue is that the pagination doesn't update.

As per infinite scrolling, we just need to take care about count instead of pagination. Which can be achieved as below steps.

  1. In your getRows function, call server to fetch numbers of records as well along with the data.
  2. Use the result to update the count. Which will update the scrollbar size accordingly.

Check the below code.

private getRows(params: IGetRowsParams, data: any) {
   Observable.forkJoin(
   [
      this.dataSvc.getResult(serverParams, params.startRow),
      this.dataSvc.getCount(serverParams)
   ])
   .subscribe((result: any[]) => {
      params.successCallback(result[0], <number>result[1]);
   })
}

Caution: This answer is given based on infinite scrolling recommendation given by team.

In v9.0 ag-Grid pagination changed from server side pagination to client side pagination. Server side pagination was then removed in v10.1.

If you were doing server side pagination, we recommend moving to pagination with infinite scrolling as a way of migration to the new mechanism.

If you were slicing manually the data in your Datasource to mimic pagination done in the browser only, we recommend that you use the default In Memory Row Model and set the row data as normal and then set grid property pagination=true.

If you are going to use the last point suggested, then I guess getRows issue will not occur at all.