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]
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.
Worked great thanks. Trying the same approach now for remote filtering.
I meant to reinitialize the grid. Ignore my previous post.
How can I change the totalRecordsCount setting then?
Hi,
You are right. The best approach for this scenario is not reinitialize the grid.
I followed the suggested approach of canceling the dataFiltering by returning false from function I bound to the dataFiltering event. I've bound a call to an api to the focusout event of the filter boxes.
My next issue is that I need to reset the totalRecordsCount as the filtered data will have less rows. I understand this has to be set on initialization of the grid. Is the best approach to reinitialize the grid with jQuery jQuery('#' + this.id).igGrid(options) ?
Or is ther a better approach?
Thanks
dataFiltering is designed to be triggered on every key stroke with a bit of delay. And you can configure that delay through filterDelay option.
I'm suggest you to increase that delay as the easiest solution.
Otherwise you can always cancel dataFiltering and bind to blur(or any event you want) and manually call filter API to filter whenever you want.