Angular ag-grid data loading from api

Question

I am now working on a project to get data from api and display in angular ag-grid. The problem is that getting data from api took a long time. It took up to 5-15 seconds to get reply while testing with postman. I thought about using lazy loading to separately request data per page.

However, I might have to re-call api again and again to show data in each page and will have problems for sorting and filtering. I tried searching tutorial examples but all of them are tested with rowData already inside the project. For me, I have to request from api. What should I do about it? Is it problem from api side?

For now, I am thinking that I will divide the data request from api into two phase. At first, I will request only about 20 rows of data from api and show it in ag-grid. As soon as the data loaded on screen, behind background, a new api call will be made to call all data and then update ag-grid. Is there any way to auto-update ag-grid as soon as data in rowData change? Is there any methods for recommendation?

P.S. We also create api so can make new api.

Rishanthakumar Rishanthakumar · Accepted Answer · 2020-07-28T18:29:35

You can achieve this using the Infinite Row Model feature of ag-grid. Just check the documentation to get the clear idea on how to configure this. I will walk you through some basic steps in order to make you understand how to implement this.

As a first step you need to configure the following properties in the gridOptions along with your other options.

{
  rowModelType: 'infinite',
  cacheBlockSize: 20,
  datasource: myDataSource
}

Here the cacheBlockSize is set to 20 since you are having the request page row count as 20 from API. You can configure this according to your requirement.

Since you are using infinite row model, you can't set the grid data directly instead you need to use a data source.

const myDataSource: IDatasource = {
    rowCount: null,
    getRows: (params: IGetRowsParams) => {
        yourApiRequestService.subscribe((data) => {
            let lastRow = -1;
            if (data.length <= params.endRow) {
                lastRow = data.length;
            }

            params.successCallback(data, lastRow);
        });
    }
};

I already set this myDataSource to the datasource property in the gridOptions provided.

Having these configured will makes the grid to automatically fetch the data when its want to display. Hope this answer will help you.

Angular ag-grid data loading from api

1 Answers