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

[Jay]

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.

[Jay]

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?

[Jay]

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).

[Jay]

Sorry, I mean aria-rowindex. Please see the attached screenshot.

[Jay]

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;