Ag Grid and Angular, how to do server side pagination?

Viewed 35

I'm trying to do server side pagination with Ag Grid (version 25.3.0), but it's seem not to be that easy. I have a button with a click event that you trigger the search with a reactive form.

That is what I have until now:

HTML

<ag-grid-angular #agGrid 
   class="ag-theme-alpine" 
   [rowData]="dataSource.content" 
   domLayout=autoHeight 
   [columnDefs]="columns"
   [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)"
>
</ag-grid-angular>

<button (click)="doSearch()"> Search </button>

TS

     @ViewChild(AgGridAngular) agGrid!: AgGridAngular;
    
      gridOptions: GridOptions = {
        pagination: true,
        rowModelType: 'infinite',
        cacheBlockSize: 10,
        paginationPageSize: 10
      };
    
      this.form = this.fb.group({
         entityCode: [{ value: null, disabled: true }],
         businessUnitId: [null],
         firstName: [null],
         lastName: [null],
         mail: [null],
         isActive: [null],
       })
    
    
    
     doSearch() {
    const formClone = this.form?.getRawValue();

    this.dataSource = {
      getRows: (params: IGetRowsParams) => {
        this._userService?.getUsers(formClone).subscribe(data => {
          params.successCallback(
            data, data.totalElements
          );
        })
      }
    }
  }

  onGridReady(params: any) {
    this.agGrid.api.setDatasource(this.dataSource)
  }

I have no error in the console and I have no request to the service.

I think I have to put the getRows method inside the doSearch method, but I don't how to do this in the right way.

0 Answers
Related