ag-grid after upgrade from V8 to V15 pagination is not working properly,. Data source is not executed after initial loading

Question

Background

Had upgraded the typescript to 2.6.2 from 2.3.4. Ag grid have compile issue so its upgraded to 15.0.0. After upgrade existing pagination code for ag-grid is not working.

Previous Configuration - ag-grid and pagination works fine

on click search button from form searchCategory() method will be called and load the grid

package.json

"ag-grid": "^8.1.0",
"ag-grid-angular": "^8.1.0",
.....
 "typescript": "^2.3.4"

temp.ts

 gridOptions = <GridOptions>{
        context: {},
        paginationPageSize: AppUtils.IR_PAGINATION_SIZE,
/*        rowModelType: 'pagination',*/
        rowModelType: 'infinite',
        pagination: true,
        enableServerSideSorting: true,
        suppressDragLeaveHidesColumns: true,
        onGridSizeChanged: () => {
            this.gridOptions.api.sizeColumnsToFit();
        },
        getRowHeight: () => {
            return 32;
        },
         components: {
              getTypeDesc : function(params: any) {
        var eDiv = document.createElement('div');
        let desc = params.context.typeMaster.filter(function (item: any) {
            if (params.data.typeCode === item.typeCode) {
                return item.typeDescription;
            }
        });
        eDiv.innerHTML = '<span>' + desc[0].typeDescription + '</span>';
        return eDiv;
    },


    };
    typeMaster: TypeMasterModel[];
    categoryMaster: CategoryModel[];
    category: CategoryModel = new CategoryModel();
    severityMaster: SeverityMasterModel[];
    selectedRowsValue: number[];
    columnDefs: any[] = [
        { headerName: '', field: 'catCode', hide: true },
        { headerName: 'Category', field: 'catDesc', width: 550 },
        { headerName: 'Type', field: 'typeCode', cellRenderer:'getTypeDesc' }
        { headerName: 'PatientID', field: 'patIdMandYn' },
        { headerName: 'EquipmentID', field: 'equipIdMandYn' },
        { headerName: 'WorkorderId', field: 'workOrderMandYn' }
    ];
    action: string = '';


searchCategory() {
        let self = this;
        let dataSource = {
           rowCount: null, // 
            getRows: (params: any) => {
                this.http.get(//server call ).subscribe(res => {
                    let result = res['result'];
                    if (result != null && result.paginatedList != null) {
                        this.totalRecords = result.paginatedList.length;
                        if (this.totalRecords <= 0) {
                            this.gridStatusMessageDisplay("");
                        }
                        params.successCallback(result.paginatedList, result.totalRecords);
                    } else {
                        this.gridStatusMessageDisplay("");
                    }
                });
            }
        }
        this.gridOptions.api.setDatasource(dataSource);
    }

temp.html

New Configuration Details

package.json

ag-grid": "^15.0.0",
 "ag-grid-angular": "^15.0.0",
 "typescript": "^2.6.2"

test.ts pagination replaced with infinite.

/* rowModelType: 'pagination',*/ rowModelType: 'infinite', pagination: true,

Current Behavior

On call to searchCategory(), server call is made and data loaded into grid with pagination bar. On clicking next in the pagination bar, its not calling the registered data source and halt there.

Expected Behaviour pagination should work properly. Datasource should be called on next & prev and update the grid

same issue was facing when updated the version from (9.1.0) to (10.1.0) stackoverflow.com/questions/44481113/… — bensonissac

Rosh Rosh · Accepted Answer · 2017-12-31T04:28:36

use other pagination libraries to solve this issue, Here primeng pagination,

https://www.primefaces.org/primeng/#/paginator

//html

<div *ngIf="totalRecords > catPaginationSize">
                 <p-paginator rows="10" totalRecords="{{totalRecords}}"   (onPageChange)="paginate($event)" ></p-paginator>
           </div>

//ts

import { PaginatorModule } from 'primeng/primeng';

 paginate(event: any) {
        this.startIndex = event.first;
        this.rowsPerPage = event.rows;
        this.paginatedList();
    }

ag-grid after upgrade from V8 to V15 pagination is not working properly,. Data source is not executed after initial loading

1 Answers