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
Subham Ankit
30
Getting Row Index while Pagination
posted

Hi All,

I have a Requirement where in i am displaying a igx-grid, which displays some columns as key values from JSON_A and a last column is a button which will actually open a dialog box to show the Complete JSON_A message from the row.

Now the issue is when we paginate this and the no of records in a page is restricted to 10. and we get around 50 records from api which we want to display in 5 pages.

Now First page works fine and gets the data in dialog as expected, but when we go to next page and click on the 2nd row button of second page to see 10(page 1)+2=12th  row index JSON data, it shows first page 2nd index data instead of showing 12th index JSON. 

Ex:

The column for Button in the grid is as follows:

<igx-column [width]="'150px'" field="action" header="Action">
            <ng-template igxCell let-cell="cell">
               <button mdbBtn color="primary"  (click)="getJSONData(cell)">View Outbound</button>
            </ng-template>
           
</igx-column>
getJSONData(event:IgxGridCellComponent){
    const dataState1: IDataState2 = {
      key: event.rowIndex,
      rootLevel: false
  };
  
  console.log("index:"+dataState1.key);
  this.openAlertDialog(this.outboundUpdatesDataObject[dataState1.key]);
  }
Interface:
export interface IDataState2 {
  
  key: number;
  rootLevel: boolean;
}
Can anyone help on how we can achieve this ?
A working Example would be very much helpful.
Thanks,
Subham
  • 1560
    Offline posted

    Hello,


    I have been looking into your requirement and created a simple sample in order to demonstrate how similar behavior could be achieved.


    For the purposes of the example, I added a column with buttons like in the provided description. And on button click, there is an alert showing the row index  (starting from 1). I was able to reproduce the behavior you are facing and it could be changed per your requirement by calculating the correct value using the igxGrid perPage and page properties. They return the numbers of items per page and the current page index. So, the key (row index) could be calculated as this.grid1.perPage * this.grid1.page + cell.rowIndex + 1.


    Here could be found my sample for your reference. Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me along with steps to reproduce.


    Thank you for your cooperation.


    Looking forward to hearing from you.


    Sincerely,
    Teodosia Hristodorova
    Associate Software Developer