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>
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);
}
this.gridOption = <GridOption>{
context:{},
rowModelType: 'pagination',
paginationPageSize: 10,
rowModelType='normal'
}
try with above code and use ngshow with ngif with same condition for both.