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>

Ranjeeth Rao · Accepted Answer · 2017-03-23 09:05:06Z

8

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

answered Mar 23, 2017 at 9:05

Ranjeeth Rao

1552 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Renil Babu Over a year ago

How can i refresh the grid with the previous datagrid.!

Basavaraj · Accepted Answer · 2017-03-23 07:06:55Z

1

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

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

answered Mar 23, 2017 at 7:06

Basavaraj

1,1112 gold badges11 silver badges21 bronze badges

1 Comment

Basavaraj Over a year ago

hey check this link github.com/ceolter/ag-grid-angular/issues/89

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related