When you have an igx-grid that is paginated, how can you navigate to a row on a different page than the one you are on?

Question

I have the code to navigate to a specific row based on the primary key index:

public scrollToRow(index: number){
    let row = this.grid.getRowByKey(index);
    if(index != null || this.grid != null ){
      if(row == null){
        console.log("Cannot navigate to row that is not in the visible grid viewport.")
      }else{
        row.selected = true;
        let scroll = this.grid.defaultRowHeight * 15;
        this.grid.verticalScroll.scrollPosition = scroll;
      }
    }else{
      console.log("Cannot navigate to row that does not exist. Record: " + index + " not found.");
    }
  }

This only works when there is no pagination on the grid. I am looking for a way to navigate to a specific row when pagination is in play.

If I cannot find a simple method for doing it, my thoughts are to determine the grid sort, and mathematically determine which page a record is on, then go to that page and execute the above code. Problems include how to determine per page value and specific sort details to make that math work. Of course, any help would be appreciated.

Thanks, Ted

Answer 1

Figured it out. The idea of using math to determine which page didn't work out because sorting gets in the way and there is no way to capture what columns a user has sorted. The best approach I have found is to check to see if the grid is paginated, go to the first page, check for the record you want, and loop through until you find it. Once you do break out of the loop and go to it. Currently, the method looks like this:

 scrollToRow(index: number | string | any, grid: IgxGridComponent | IgxTreeGridComponent | IgxHierarchicalGridComponent | any){
    if(index == null || grid == null) {
      console.log("Cannot navigate a null record or grid.");
      return;
    }
    var row = undefined;
    // test to see if the grid is paginated
    if(grid.paginator != null && grid.paginator.totalPages > 0){
      //if paginated go to the first page
      grid.paginator.page = 0;
      grid.reflow();//you must update the visible viewport when changing pages
      row = grid.getRowByKey(index);
      if(row === undefined){
        //loop though the pages
        for(var i = 0; i < grid.paginator.totalPages - 1; i++){ //for loop to go through the available pages
          grid.paginator.nextPage();
          grid.reflow();
          row = grid.getRowByKey(index);
          if(row != undefined){
            break; //break from for loop
          }
        }
      }
    }else{
      //no pagination
      row = grid.getRowByKey(index);
    }
    if(row == undefined || row == null){
      console.log("Cannot navigate to row that is not in the grid.")
    }else{
      row.selected = true;
      let scroll = grid.defaultRowHeight * 15;
      grid.verticalScroll.scrollPosition = scroll;
    }
  }

The value is it doesn't matter if the grid is sorted. I do have to check for filtering and I will move one of the null checks to the beginning, but this is the basic logic flow that seems to work.

Ted