CODEWITHSUNDEEP
angularpaginationag-grid
FennyChen
FennyChen

Reputation: 31

Any examples for angular2 ag-grid pagination?

Any examples for angular2 ag-grid pagination, especially on virtual paging/infinite scrolling? I have searched for a while and didn't find anything useful. Any help is highly appreciated!

This is my html:

 <ag-grid-ng2 #agGrid  class="ag-fresh" style="height: 300px"
      [gridOptions]="gridOptions" 
      [rowGroupPanelShow]="always" 
      [columnDefs]="columnDefs" 
      [datasource] = "dataSource"
      rowModelType = "virtual"
      enableFilter 
      enableSorting 
      enableColResize
      (modelUpdated)="onModelUpdated()"
      >
    </ag-grid-ng2>

This is my datasource method in the controller:

private createDataSource() {
        if (!this.rowData) {
            //in case user selected 'onPageSizeChanged()' before the json was loaded
            return;
        }
        console.log("this.rowData " + this.rowData.length);
        console.log("Obtaining datasource");
        this.dataSource = {
            rowCount: null, // behave as infinite scroll
            pageSize: 2,
            overflowSize:1,       
            getRows: function (params) {
                console.log('asking for ' + params.startRow + ' to ' + params.endRow);
                // At this point in your code, you would call the server, using $http if in AngularJS.
                // To make the demo look real, wait for 500ms before returning
                setTimeout(function () {
                    // take a slice of the total rows
                    var rowsThisPage = this.rowData.slice(params.startRow, params.endRow);
                    // if on or after the last page, work out the last row.
                    var lastRow = -1;
                    if (this.rowData.length <= params.endRow) {
                        lastRow = this.rowData.length;
                    }
                    // call the success callback
                    params.successCallback(rowsThisPage, lastRow);
                }, 500);
            }
        }
    }

Upvotes: 0

Views: 5589

Answers (1)

Sean Landsman
Sean Landsman

Reputation: 7179

Take a look at the ng2 example on github, as well as the ag-Grid documentation on Virtual Paging

If you look app.component.html in the ng2 example you'll see a number of are set there (for example, enableColResize).

Simply add the rowModelType and datasource as per the ag-Grid documentation in the same way - for example:

        <ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-fresh"

                 [gridOptions]="gridOptions"
                 [columnDefs]="columnDefs"
                 [showToolPanel]="showToolPanel"
                 [rowData]="rowData"

                 [rowModelType] = "virtual"
                 [datasource] = "myDataSource"

                 enableColResize
                 ...other properties...

With myDataSource defined in the corresponding component (AppComponent in the examples case)

Upvotes: 1

Related Questions