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

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.

 


    
  

  

                  [gridOptions]="gridOptions"
         [columnDefs]="columnDefs"    
         [rowData]="rowData"
         [datasource] = "dataSource"
         enableColResize

         rowSelection="single"
         >
   

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 = {
    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.

    

          [gridOptions]="gridOptions"
     [columnDefs]="columnDefs"    
     [rowData]="rowData"
     [datasource] = "dataSource"
     enableColResize
     rowSelection="single"
     >

  

Answer

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