Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
15
Set page and row Count of the Grid without loading the whole data
posted

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>

Parents Reply Children