Hi all,
I'm new in Ignite UI and I'm trying to apply load on demand feature wenn paging in the igx-grid.
I have a huge dataset, which a fetch from a service so I want to load just 50 rows per Page and when the user clicks next page, should the service fetch the next 50 rows.
The Problem is that the count of pages should be set according to the total count of remote data, NOT according to the loaded data (50 rows).
My Code and the Api are below:
Angular Component:
users: User[]; ngOnInit() { ); this._dataService.getdata(0).subscribe(data => { this.users = data.users; this.count=data.count; console.log(data)}); } pageNext(event) { this._dataService.getdata(event.current).subscribe(data => { this.users = data; }); }
Angular Service:
getdata(pageindex):Observable<any>{ return this._http.post('http://localhost/values/GetUsers',pageindex); }
WebApi:
[HttpPost] public object GetUsers([FromBody] int pageIndex) { int userIndex = pageIndex * 50; List<ApplicationUser> users = new List<ApplicationUser>(); users = _context.Users.ToList(); users = users.GetRange(userIndex, 50); return new { users = users, count = _context.Users.Count() } ; }
View Html:
<igx-grid #grid [data]="users" [autoGenerate]="false" [paging]="true" (onColumnInit)="initColumns($event)" (onEditDone)="editCell($event)" (onPagingDone)="pageNext($event)" width="1000px" height="600px"> <igx-column field="userAD" [sortable]="true" header="AD" [filterable]="true" [editable]="true"></igx-column> <igx-column field="userName" [sortable]="true" header="Name" [filterable]="true"></igx-column> </igx-grid>
Could you write another part of the service that just gets the count from the server, i.e: return SELECT COUNT(*) FROM .... then display that somewhere ?
that's not the point!
I have this action in my service too, which gets the count, but when i get that number, it should affect the count of pages in the grid.SO, how to let that number change the count of pages in the grid irrespectively the count of its row's count??
Hello Taher,
We are in the process of building such sample.
I hope that it is going to be ready today or later on Monday.
Once we are ready I'm going to provide all the information you would need.
if you have further questions, please contact us again.
Hello Aleksandar,
when can I expect the sample?
Taher,
Thank you for your patience.
Here you can find a working sample of what you desire - https://stackblitz.com/edit/igxgrid-remote-chunk-paging.
Please let us know if you need further assistance.
Hii the demo is broken on stackblitz, can it be updated?
I was needed the same things.
I would like to tell it's a very nice sample. it helps me a lot.
I think some part of this sample could be added to the demo.
Good work.