Cannot call setRowData unless using normal row model error in ag-grid

Question

Having a form with an ag-grid, even though basic grid is working it gives error in console

cannot call setRowData unless using normal row model

So most of the api functions including clear not working.

 <form [formGroup]="myForm" (ngSubmit)="search()" >
    <button type="submit" class="btn btn-primary ripple">Search</button>
  </form>

  <div class="grid-wrapper animated fadeIn" >
         <ag-grid-angular #agGrid style="width: 100%; height: 315px;" class="ag-fresh"
         [gridOptions]="gridOptions"
         [columnDefs]="columnDefs"    
         [rowData]="rowData"
         [datasource] = "dataSource"
         enableColResize
         rowSelection="single"
         ></ag-grid-angular>
   </div>

Type sript code, in constructor defined grid and in search method set the data return from server api. In addition to that calling callback method for pagination.

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

});


this.gridOptions = <GridOptions>{
    context:{},
    rowModelType: 'pagination',
    paginationPageSize: 10,
   //  onGridReady: function(event) {  this.gridOptions.api.sizeColumnsToFit(); } // this will give  error api undefined 
};

}  

 search(){
 let self = this;
 let dataSource = {
   paginationPageSize: 10,
   getRows: (params: any) => {
          let headers: Headers = new Headers();
          headers.set("Content-Type", "application/json");
            console.log("here dataSource");
            this.formatReqData(params.startRow, params.endRow);
             this.http.post(AppUtils.INCIDENT_SEARCH, this.myForm.value, {headers: headers}).subscribe(res=>{ // server call
                 if(res.json().result!= null){
                    self.gridOptions.api.setRowData(res.json().result.paginatedList);
                    self.rowData = res.json().result.paginatedList;
                    var rowsselfPage = self.rowData;
                    var lastRow = -1;
                    params.successCallback(rowsselfPage, res.json().result.totalRecords);
                 }else{
                     self.gridOptions.api.setRowData(null);
                     self.rowData = null;
                 }
             });
    }

Related Issue

If I add this condition ngIf="rowData.length" to stop displaying empty grid, then grid will not load at all any time.

    <div class="grid-wrapper animated fadeIn" *ngIf="rowData.length > 0">
     <ag-grid-angular #agGrid style="width: 100%; height: 315px;" class="ag-fresh"
     [gridOptions]="gridOptions"
     [columnDefs]="columnDefs"    
     [rowData]="rowData"
     [datasource] = "dataSource"
     enableColResize
     rowSelection="single"
     ></ag-grid-angular>
  </div>

Answer 1

Since the rowModelType is set to 'pagination', you cannot use setRowData() method to change the grid data. Instead create another local data source which sets empty data, and then use that as the data source to your grid. Example below:

clear(){
    let self = this;
    let dataSource = {
        getRows(params:any) {
            params.successCallback([],0);
        }
    };
    this.gridOptions.api.setDatasource(dataSource);
}

Answer 2

 this.gridOption = <GridOption>{
    context:{},
    rowModelType: 'pagination',
    paginationPageSize: 10,
    rowModelType='normal' 
 }    

try with above code and use ngshow with ngif with same condition for both.