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>