Setting focus on first cell of grid column with arrow keys

Question

I'm working to implement keyboard navigation between header and body cells of a grid in AG-Grid. Each header has a col-id, while each cell in the column has the same id. I have a script that will listen for a keydown event, and if the e.key event is ArrowDown while on a header, it should look for the col-id of the header, and search for the first cell in the associated column with the same col-id, then set the focus to that cell with focus().

I have the following, but it is only logging out the columns col-id, and not getting a reference to the data cell below on key down

document.addEventListener("keydown", function(e) {
  if(e.key === "ArrowRight") {
    let headerId = document.activeElement.parentElement.parentElement.getAttribute("col-id");
    console.log('header id: ', headerId);
  }
  else if(e.key === "ArrowDown"){
    //get column id on arrowdown
    let headerId = document.activeElement.parentElement.parentElement.getAttribute("col-id");
    console.log('header id: ', headerId);
    //look for first child in first row with same id as header and set focus
    document.querySelector('.ag-cell').focus();
  }
  else if(e.key === "ArrowUp") {
    //store value of grid cell column id
    let cellId = document.activeElement.getAttribute("col-id");
    console.log('header id arrow up: ', cellId);
    //set focus to column header
    document.querySelector('.ag-header-cell[col-id="' + cellId + '"]').focus();
  }
});

Current state: Link

Still trying to do this? Oh man. If you ever get this working, it's going to be incredibly fragile. You possibly want document.querySelector('.ag-cell[col-id="' + headerId + '"]').focus();. — thirtydot
@thirtydot - That's what I was looking for, thanks! Supposed I need to do it in the other direction for ArrowUp to go from the body cell to the header cell of the same column. — Matt
@thirtydot - I got this stuff figured out. If you can post your comment as an answer, I'd like to mark it as the solution. Thanks! — Matt

thirtydot thirtydot · Accepted Answer · 2018-08-01T19:38:18

To focus the first cell in the associated column when pressing the down arrow:

document.querySelector('.ag-cell[col-id="' + headerId + '"]').focus();

¯\_(ツ)_/¯

Setting focus on first cell of grid column with arrow keys

1 Answers