title: ag grid pagination not working, initially making server call twice
body: <p>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.</p>
  
  <p>Implemented ag grid but grid is not loading after clicking on search. Can you help me to figure out where I'm doing wrong.</p>
  
  <h2>This is the html, grid section and search button.</h2>
  
  <pre><code> &lt;form [formGroup]="myForm" &gt;
     &lt;div&gt;
      &lt;div class="panel-body"&gt;
       &lt;div class="row col-md-12"&gt;
        &lt;div class="form-group"&gt;
           &lt;label for="category"&gt;Category&lt;/label&gt;
           &lt;select  class="form-control"
              (change)="getSubCategories($event.target.value)"
              formControlName="catCode"   &gt;
              &lt;option value="select" selected disabled&gt;--Select--&lt;/option&gt;
              &lt;option *ngFor="let category of categoryMaster" value="{{category.catCode}}"&gt;{{category.catDesc}}&lt;/option&gt;
           &lt;/select&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;button type="submit" class="btn btn-default"&gt;Search&lt;/button&gt;
     &lt;/div&gt;
     &lt;/div&gt;
     &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="col-md-12" *ngIf="rowData.length &gt; 0"&gt;  
      &lt;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"
      &gt;&lt;/ag-grid-angular&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>Component</h2>
  
  <pre><code>export class ISearchComponent {
      myForm: FormGroup;
      rowData: Array&lt;IncidentHeaderModel&gt; = new Array&lt;IncidentHeaderModel&gt;();
      gridOptions = &lt;GridOptions&gt;{
          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()
  
      }  
  </code></pre>
  
  <p>//when this data source get invoked</p>
  
  <pre><code>   dataSource = {
         pageSize: 10,
          getRows: (params: any) =&gt; {
            console.log("here dataSource")
                  this.searchIncident(params.startRow, params.endRow); // returns json from server
                  var rowsThisPage = this.rowData;
                  var lastRow = -1;
                  if (rowsThisPage.length &lt;= params.endRow) {
                      lastRow = rowsThisPage.length;
                  }
                params.successCallback(rowsThisPage, lastRow);
          }
       }
  </code></pre>
  
  <p>//server call and returns the json data.    </p>
  
  <pre><code>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=&gt;{
               this.rowData = res.json().result;
       console.log("@@@@" +JSON.stringify(this.rowData));
           }, err=&gt;{             
           });
  
      }
  }
  </code></pre>
  
  <h2>Tried solution(not working)</h2>
  
  <p>invoking the grid on search button click like this</p>
  
  <pre><code> private search() {
       this.gridOptions.api.setDatasource(this.dataSource);
     }
  </code></pre>
  
  <p>I had added data source to enable server side pagination, then how can I invoke that  data source ?</p>
  
  <p><strong><em>Any help in ag-grid pagination ? How to load data source ?</em></strong></p>
  
  <p>added plunker <a href="http://plnkr.co/edit/qIeONaAe4INyTuZTGAOK?open=app%2Fapp.component.ts&amp;p=preview" rel="noreferrer">http://plnkr.co/edit/qIeONaAe4INyTuZTGAOK?open=app%2Fapp.component.ts&amp;p=preview</a></p>