ag grid pagination not working, initially making server call twice

Question

Clicking on search button on the page will return result from server call and should display that in the ag grid. Each click pagination details are seinding server will return only that much records to client.

Implemented ag grid but grid is not loading after clicking on search. Can you help me to figure out where I'm doing wrong.

This is the html, grid section and search button.

 <form [formGroup]="myForm" >
   <div>
    <div class="panel-body">
     <div class="row col-md-12">
      <div class="form-group">
         <label for="category">Category</label>
         <select  class="form-control"
            (change)="getSubCategories($event.target.value)"
            formControlName="catCode"   >
            <option value="select" selected disabled>--Select--</option>
            <option *ngFor="let category of categoryMaster" value="{{category.catCode}}">{{category.catDesc}}</option>
         </select>
      </div>
      </div>
      <button type="submit" class="btn btn-default">Search</button>
   </div>
   </div>
   </form>
</div>
<div class="col-md-12" *ngIf="rowData.length > 0">  
    <ag-grid-angular #agGrid style="width: 100%; height: 350px;" class="ag-fresh"
        [gridOptions]="gridOptions"
        [columnDefs]="columnDefs"    
        [rowData]="rowData"
        [datasource] = "dataSource"
        enableColResize
        enableSorting
        enableFilter
        rowSelection="single"
    ></ag-grid-angular>
</div>

Component

export class ISearchComponent {
    myForm: FormGroup;
    rowData: Array<IncidentHeaderModel> = new Array<IncidentHeaderModel>();
    gridOptions = <GridOptions>{
        context: {},
        rowModelType: 'pagination',
        enableServerSideFilter: true,
        paginationPageSize: 10

    };

    //defining the headers
    columnDefs:any[] = [
        {headerName: 'Status', field: 'incidentStatus.value'},
        {headerName: 'Category', field: 'categoryMast.catDesc'},
        {headerName: 'Sub Category', field: 'subCategoryMast.subCatDesc'},
        {headerName: 'Location', field: 'location.locName'},
        {headerName: 'Time', field: 'incidentTime'},
        {headerName: 'Delay(Hrs)', cellRenderer:this.getDelayInHours}

    ];


    constructor(private masterDataService:MasterDataService,private http: Http) {
        this.myForm = new FormGroup({
        'catCode'   : new FormControl()

    }

//when this data source get invoked

   dataSource = {
       pageSize: 10,
        getRows: (params: any) => {
          console.log("here dataSource")
                this.searchIncident(params.startRow, params.endRow); // returns json from server
                var rowsThisPage = this.rowData;
                var lastRow = -1;
                if (rowsThisPage.length <= params.endRow) {
                    lastRow = rowsThisPage.length;
                }
              params.successCallback(rowsThisPage, lastRow);
        }
     }

//server call and returns the json data.

searchIncident(start:number, end:number){


  myJson['firstResult'] = start;
  myJson.maxResult = this.gridOptions.paginationPageSize;

   this.http.post(AppUtils.INCIDENT_SEARCH, this.myForm.value, {headers: headers}).subscribe(res=>{
             this.rowData = res.json().result;
     console.log("@@@@" +JSON.stringify(this.rowData));
         }, err=>{             
         });

    }
}

Tried solution(not working)

invoking the grid on search button click like this

 private search() {
     this.gridOptions.api.setDatasource(this.dataSource);
   }

I had added data source to enable server side pagination, then how can I invoke that data source ?

Any help in ag-grid pagination ? How to load data source ?

added plunker http://plnkr.co/edit/qIeONaAe4INyTuZTGAOK?open=app%2Fapp.component.ts&p=preview

There's an example of how to do it here ag-grid.com/javascript-grid-pagination/#gsc.tab=0 — K Scandrett
You are using dataSource and rowData together. Try to remove the rowData. — Niels Steenbeek

Engineer Engineer · Accepted Answer · 2017-03-07T10:46:58

I think you will have to import the ag-grid inside @ngmodules root module

inside import

@NgModule({
    declarations: [ // put all your components / directives / pipes here

    ],
    imports: [ // put all your modules here
       ag-grid //for example
    ],
    providers: [ // put all your services here

    ],
    bootstrap: [ // The main components to be bootstrapped in main.ts file, normally one only
        AppComponent
    ]
})

ag grid pagination not working, initially making server call twice

This is the html, grid section and search button.

Component

Tried solution(not working)

1 Answers