How to get the rowIndex of the first record on the next page of the grid for focusCell(rowIndex, cellIndex) usage to get the NavigationCell instance

5 posts, 0 answers
  1. Jay
    Jay avatar
    5 posts
    Member since:
    Nov 2018

    Posted 22 Oct Link to this post

    Here is the context:

    We are using the Grid expandRow() and collapseRow() methods for expanding/collapsing a master Grid row programmatically.

    We are also using paging and grouping functionalities of the Grid.

    And we are currently implementing the feature where the user can just select/focus the record and that record will automatically expanded.

    The user is also able to navigate/focus the record by using the up and down arrow keys.

     

    Here are the features that we need to add on top of the above features:

    If the user is on the last record of the page and the user presses the down arrow key:

    1. The grid will automatically go to the next page (if there is). - Already implemented

    2. And expand the first row of that page. - Not yet implemented 

    If the user is on the first record of the page and the user presses the up arrow key:

    3. The grid will automatically go to the previous page (if there is). - Already implemented

    4. And expand the last row of that page. - Not yet implemented

    I'm currently using the focusCell(rowIndex, cellIndex) method to programmatically get the instance of NavigationCell.

    According to your documentation the rowIndex is based on the logical structure of the Grid and does not correspond to the data item index.

    Can someone help us to properly get the rowIndex of the first and last row of the page specially if the grid is grouped by multiple columns?

    Thanks in advance.

  2. Jay
    Jay avatar
    5 posts
    Member since:
    Nov 2018

    Posted 22 Oct in reply to Jay Link to this post

    I noticed that the ng-reflect-data-row-index attribute contains the correct rowIndex for focusCell(rowIndex, cellIndex).

    However, that attribute is being removed upon deployment.

    Any idea why this is happening?

  3. Jay
    Jay avatar
    5 posts
    Member since:
    Nov 2018

    Posted 23 Oct in reply to Jay Link to this post

    I already resolved this issue. I noticed that I can use the aria-index attribute. I'm just deducting 1 from its value to match the rowIndex needed for focusCell(rowIndex, cellIndex).
  4. Jay
    Jay avatar
    5 posts
    Member since:
    Nov 2018

    Posted 23 Oct in reply to Jay Link to this post

    Sorry, I mean aria-rowindex. Please see the attached screenshot.
  5. Jay
    Jay avatar
    5 posts
    Member since:
    Nov 2018

    Posted 23 Oct in reply to Jay Link to this post

    I used the below code to get the rowIndex (aria-rowindex) of the first and last record on the page for focusCell(rowIndex, cellIndex) usage to set the focus and get the NavigationCell instance:

     

    const nodes = document.querySelectorAll(".k-master-row");

    const first = +nodes[0].getAttribute('aria-rowindex') - 1;

    const last = +nodes[nodes.length - 1].getAttribute('aria-rowindex') - 1;

Back to Top