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??