CODEWITHSUNDEEP
angularag-gridag-grid-angular
CPK_2011
CPK_2011

Reputation: 1150

Infinite Scroll of Ag Grid not working when using Api

I am trying to implement Infinite Scroll without Pagination from the below code in Angular Core 6.1.0 and ag-grid - ^17.1.1 and ag-grid-angular - 17.1.0

https://stackblitz.com/edit/ag-grid-infinite-scroll-example

The example works fine. But when I introduce Api to get data from the Database, I am getting empty records in the Front-End Grid

I have changed the onGridReady method as below

onGridReady(params: any) {
    console.log("onGridReady");
    this.clearAgGrid();

    this.gridApi = params.api;
    this.gridColumnApi = params.gridColumnApi;

    var dataSource: IDatasource = {
      getRows: (params: IGetRowsParams) => {
        this.userService.GetUserDetails(this.loginUserId).subscribe(data => {
          this.rowData = data;
          params.successCallback(data, 1000);
        })
      }
    }
    this.gridOptions.rowModelType = 'infinite';
    this.gridOptions.dataSource = dataSource;
    params.api.setDataSource(this.rowData);
}

clearAgGrid() {
    let self = this;
    let dataSource = {
      getRows(params: any) {
        params.successCallback([], 0);
      }
    };
    this.gridOptions.api.setDatasource(dataSource);
}

this.gridOptions = {
  rowSelection: 'single',
  cacheBlockSize: 100,
  maxBlocksInCache: 2,
  enableServerSideFilter: false,
  enableServerSideSorting: true,
  rowModelType: 'infinite',
  pagination: false,
  paginationAutoPageSize: true
};

The code in the html file is as below

<ag-grid-angular style="width: 100%; height: 100%" class="ag-theme-balham"
                [gridOptions]="gridOptions"
                [columnDefs]="columnDefs"
                [rowData]="rowData"
                (gridReady)="onGridReady($event)"
                #grid
></ag-grid-angular>

Column Definitions as below

this.columnDefs = [
  { field: 'UserName' },
  { field: 'EmailId' },
  { field: 'MobileNo' },
  { field: 'Address' },
  { field: 'IsActive' }
];

The API is defined as below

public GetUserDetails(userId: string): Observable<User[]> {
    return this.httpClient.put<User[]>(this.uriBase + '/GetUserDetails/' + userId, { headers: { 'Content-type': 'application/json' } }).pipe(share());
}

Even though data is coming in other scenario, the same data is not appearing in the Front-End Infinite Grid.

Any help would be greatly appreciated.

Upvotes: 0

Views: 3351

Answers (1)

I.Orlovsky
I.Orlovsky

Reputation: 89

In your onGridReady method you should call setDatasource with a datasource object, not with row data. So the modified version of the method would look like the following:

  onGridReady(params: any) {
    console.log("onGridReady");
    this.clearAgGrid();
                
    this.gridApi = params.api;
    this.gridColumnApi = params.gridColumnApi;
                
    var dataSource: IDatasource = {
      getRows: (params: IGetRowsParams) => {
        this.userService.GetUserDetails(this.loginUserId).subscribe(data => {
          // no need to provide row data actually. You can omit this line
          this.rowData = data; 
          params.successCallback(data, 1000);
        })
      }
    }
    this.gridOptions.rowModelType = 'infinite';
    // no need for this line either
    this.gridOptions.dataSource = dataSource; 
    // pass the dataSource object instead of the row data
    params.api.setDatasource(dataSource); 
  }

Reference: Angular Data Grid: Infinite Row Model

Upvotes: 2

Related Questions