Forums Ignite UI for Angular
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
Close
Shobhana Suara
1415
Igx-data Grid Paging issue for Infragistics version 9
posted

Hi Team,

Background: I am using a Data Grid with Infragistics version 9.1.28. I have implemented Paging for Data Grid.
Reference: https://ko.infragistics.com/products/ignite-ui-angular/angular/components/grid/paging

Issue1: I have changed the select options as [10,50,100,500,1000] and items per page as 1000 but when i change it to 500 than try to chnage it 1000, 1000 is not available in the options.

HTML:

 <igx-grid #grid1 [data]="Data" width="100%" height="90%" [displayDensity]="'compact'"   [autoGenerate]="false" [rowSelectable]="false" [paging]="true" [perPage]="1000" (onPagingDone)="pagingDone($event)" [totalRecords]="totalRecords" [selectOptions]="selectOptions"
   [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [showToolbar]="true" [isLoading]="gridLoader" [emptyGridMessage]="gridMsg">

TS:
public selectOptions = [10,50,100,500,1000];

Issue 2: I am calling API to get the data on change of page based on PageNo. As from API we are getting PageSize = 1000. So per page 1000 records are displaying in each page based on total Records.

On change of page, event is getting trigerred when i call the API, but data is not binding to the Grid.

HTML:

 <igx-grid #grid1 [data]="Data" width="100%" height="90%" [displayDensity]="'compact'"   [autoGenerate]="false" [rowSelectable]="false" 
[paging]="true" [perPage]="1000" (onPagingDone)="pagingDone($event)" [totalRecords]="totalRecords" [selectOptions]="selectOptions"
   [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [showToolbar]="true" [isLoading]="gridLoader" [emptyGridMessage]="gridMsg">


TS:


  public async pagingDone(e) {
    
    e.previous =  this.prevUrl;
 
    e.current = this.nextUrl;
    this.pageNo = e.current.split('pageNo=').pop().slice(0,1);
  
    this.getData();
   
  }

Please help. I am not getting any documentation related to both issues.




  • 1320
    Offline posted

    Hello,

    I have prepared a sample demonstrating setting the selectOptions, the perPage count and loading the data in a method bound ot the pagingDone event. However, I am not able to reproduce the described behavior on my side.

    Additionally please keep in mind that Angular version 9 is considered retired and it is no longer eligible for Developer Support Services.

    Since the the behavior is not reproduced in my sample using a newer version of the controls I assume that this might be caused by an issue that we have addressed, fixed and released in any of the latest versions of our product. Having this in mind my suggestion would be to upgrade to any of the newer versions. An update guide could be found in the following topic of our documentation.

    Furthermore, information regarding the remote paging and manually loading the data on pagingDone event could be found here.

    Please let me know if you need any further information regarding this matter.

    Regards,
    Monika Kirkova,
    Infragistics