Has anyone managed to get remote paging working with an angular2 example?
I'm setting the gridOptions in the component constructor
export class RowComponent { private gridOptions: IgGrid; private pageIndexChanging: any; private id: string = "grid"; private pageSize: number = 500;
rows: any[]; constructor() {
this.gridOptions = { dataSource: this.rows || [], width: "100%", height: "600px", autoGenerateColumns: false, columns: [ { key: "RowId", headerText: RowId" }, .........
}
Then later on setting the datasource when the service I subscribe to returns.
this.Service.getRows().subscribe(rows => this.gridOptions.dataSource = rows);
This is working fine.
I plan to use the pageIndexChanging event to refresh the datasource when the user pages.
How can I programmaticlaly set the TotalRowCount to enable paging?
When I try to add responseDataKey and recordCountKey I get an angaulr error on the igGrid saying it can't diff [object object]
Is there a way to delay the firing of the "dataFiltering" event. As I'm going to the server I'd prefer to wait until the blur event of the filter field was fired rather than every few key strokes. Or am I better using another event? dataFiltered maybe?
Worked great thanks. Trying the same approach now for remote filtering.
Hello,
This is an awesome approach.
The inconsistency you are facing is related to the fact that the paging requires object as a data source, where you have to provide a records and total count properties, but angular requires array.
To avoid that error one we have to bind the igniteui angular grid to array. And to specify the row count you have to use the data source method totalRecordsCount.
Note that totalRecordsCount is specified before the pager is renderd and applying the new data source from the response is through the grid options.
I'm attaching a sample, which you can run with npm install and npm start.
If you have more questions on this please let me know.