Upon clicking the search button, a server call will be made to retrieve results and display them in the ag grid. The server will only return the specified number of records based on the pagination details provided with each click.
Despite implementing the ag grid, the grid fails to load after initiating a search. I need assistance in identifying where the issue lies.
Below is the HTML code for the grid section and search button:
<form [formGroup]="myForm" >
<div>
<div class="panel-body">
<div class="row col-md-12">
<div class="form-group">
<label for="category">Category</label>
<select class="form-control"
(change)="getSubCategories($event.target.value)"
formControlName="catCode" >
<option value="select" selected disabled>--Select--</option>
<option *ngFor="let category of categoryMaster" value="{{category.catCode}}">{{category.catDesc}}</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-default">Search</button>
</div>
</div>
</form>
</div>
<div class="col-md-12" *ngIf="rowData.length > 0">
<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"
></ag-grid-angular>
</div>
Component
export class ISearchComponent {
myForm: FormGroup;
rowData: Array<IncidentHeaderModel> = new Array<IncidentHeaderModel>();
gridOptions = <GridOptions>{
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()
}
//when this data source get invoked
dataSource = {
pageSize: 10,
getRows: (params: any) => {
console.log("here dataSource")
this.searchIncident(params.startRow, params.endRow); // returns json from server
var rowsThisPage = this.rowData;
var lastRow = -1;
if (rowsThisPage.length <= params.endRow) {
lastRow = rowsThisPage.length;
}
params.successCallback(rowsThisPage, lastRow);
}
}
//server call and returns the json data.
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=>{
this.rowData = res.json().result;
console.log("@@@@" +JSON.stringify(this.rowData));
}, err=>{
});
}
}
Tried solution(not working)
invoking the grid on search button click like this
private search() {
this.gridOptions.api.setDatasource(this.dataSource);
}
I had added data source to enable server side pagination, then how can I invoke that data source ?
Any help in ag-grid pagination ? How to load data source ?
added plunker http://plnkr.co/edit/qIeONaAe4INyTuZTGAOK?open=app%2Fapp.component.ts&p=preview