Data source is not executed in ag grid

Question

Have implemented an ag-grid, and defined a datasource.

but the data source is not getting invoked, How the data source will be executed

This is the html

<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 wre defined the grid

import { Component } from '@angular/core';
import { FormGroup, FormControl } from "@angular/forms";
import {GridOptions} from "ag-grid/main";
import {Http, Headers} from '@angular/http';
import * as AppUtils from '../common/app.utils';



@Component({ 
    selector: 'incident-search',
    templateUrl: 'app/search/iSearch.component.html'
})
export class ISearchComponent {
    myForm: FormGroup;
    rowData: Array<IncidentHeaderModel> = new Array<IncidentHeaderModel>();

    gridOptions = <GridOptions>{
        context: {},
        rowModelType: 'pagination',
        enableServerSideFilter: true,
        paginationPageSize: 10

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

        });



        }  

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



    searchIncident(start:number, end:number){

      if (!start) {
            start = 1;
          }
      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;
             }, err=>{             
             });

        }
    }

In html on click of search button trying to invoke the grid, which is not succefull.

searchIncident() {

//html search button

---

Search

This is the one warning appears in console cannot call setRowData unless using normal row model

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

Answer 1

Try the following code, taking reference form https://www.ag-grid.com/example-angular-dynamic/#dynamic&gsc.tab=0

dataSource will have a callback which will render the data on grid. this.gridOptions.api.setRowData(data); is responsible to refresh the grid data.

And the method which does AJAX, it should return the response as we are going to handle that response in the dataSource.getRows

gridOptions = <GridOptions>{
  context: {},
  rowModelType: 'pagination',
  enableServerSideSorting: true,
  paginationPageSize: 10

};
page = 1;
searchIncident(start:number, end:number){
  if (!start) {
    start = 1;
  }
  myJson['firstResult'] = start;
  myJson.maxResult = this.gridOptions.paginationPageSize;

  this.http.post(AppUtils.INCIDENT_SEARCH, this.myForm.value, {headers: headers}).subscribe(res=>{
    return res.json().result;
    }, err=>{             
    });
}
dataSource = {
  pageSize: 10,
  //overflowSize: 10,
  getRows: (params: any) => {
    let data = this.searchIncident(params.startRow, params.startRow + dataSource.pageSize); // returns json from server
    params.successCallback(data);
  }
}

private searchIncidents() {
  dataSource.getRows({
    startRow: (this.page - 1) * this.dataSource.pageSize,
    successCallback: (data: any) => {
      this.gridOptions.api.setRowData(data);
    }
  });
}