Ag grid pagination does not work, initially making a server call twice

Question

By clicking on the search button on the page, you will get the result from the server call and display it in the ag grid. Each pagination information displays a server that will only return as many records to the client.

The grid ag is implemented, but the grid does not load after clicking on the search. Can you help me figure out where I am doing wrong.

This is 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 is called

   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);
        }
     }

// call the server and return 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 (does not work)

call grid on search button, click here

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

I added a data source to enable pagination on the server side, and then how can I call this data source?

ag-? ?

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

Answer 1

, ag-grid @ngmodules

@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
    ]
})