client side pagination on ag grid?

Question

I have api where i want to get on every call 50 records. But i want to display only 10 by 10 in grid. Any suggestion how can i do that? so when i come to last page that call service again and get next 50. Any suggestion?

<ag-grid-angular [rowSelection]="rowSelection" #agGrid style="display: block;width: 100%; height: 300px;" class="ag-fresh" [gridOptions]="gridoptions"
    [rowData]="data.rowData" [pagination]="true" [suppressPaginationPanel]="true" (rowClicked)='onRowClicked($event)' (selectionChanged)='onSelectionChanged($event)' (gridReady)="onGridReady($event)">
</ag-grid-angular>

public gridoptions: GridOptions = {
        'enableSorting': true,
        'enableFilter': true,
        'suppressRowClickSelection': false,
        'groupSelectsChildren': true,
        'debug': false,
        'rowSelection': 'multiple',
        'rowDeselection': true,
        'enableColResize': true,
        'rowGroupPanelShow': 'always',
        'pivotPanelShow': 'always',
        'enableRangeSelection': true,
        'animateRows': true,
        'paginationAutoPageSize': false,
        'paginationPageSize' : 11,
        'columnDefs': [],
        'pagination': false,
        'defaultColDef': {
            'editable': true,
            'enableRowGroup': true,
            'enablePivot': true,
            'enableValue': true
        },

Answer 1

Ok, nevermind my comment. I will give you a full answer. So what you want to do, is to hold and update rowData manually somewhere in your app. On Initialization of your component you have to fetch the fist block of data. So you can simply put the call to the httpClient (or the action triggering it if you are using Redux) in ngOnInit() {...} .

Then you have to react to the user navigating through the pages and update the rowData when he gets to the last page (again, by calling httpClient).

so in your gridOptions define:

paginationChanged(event: PaginationChangedEvent) => {
    if (event.newPage) {
        const currentPage: number = gridOptions.api.paginationGetCurrentPage();
        if (this.data.rowData.length <= (currentPage * 10)) {
            // fetch again
        }
    }
}

make sure you update the whole data object instead of just pushing new items to the rowData -array in order to trigger change detection:

rowData = [...oldRowData, ...newChunk];

Answer 2

i hope in my case in angular can help you, you can add [pagination]="true and [paginationPageSize]=10 in .html

<ag-grid-angular 
     [rowSelection]="rowSelection" 
     #agGrid 
     style="display: block;width: 100%; height: 300px;" class="ag-fresh" 
     [gridOptions]="gridoptions"
     [rowData]="data.rowData" 
     [pagination]="true" 
     [suppressPaginationPanel]="true" 
     (rowClicked)='onRowClicked($event)' 
     (selectionChanged)='onSelectionChanged($event)' 
     (gridReady)="onGridReady($event)">

     [pagination]="true"
     [paginationPageSize]=10

</ag-grid-angular>