Search code examples
primefacesprimefaces-datatable

How to focus a p:dataTable single selectable row using JavaScript

PrimeFaces has excellent keyboard support. See for example, the showcase of a selectable p:dataTable. When you click a row in the "Single with Row Click" table, you are able to use the arrow keys to navigate rows and use the enter to select the focused row.

I would like to be able to set the focus on a row in a (single) selectable p:dataTable using JavaScript.

I checked the client side API documentation for DataTable and the code of the row click handler, and I assume it has something to do with the originRowIndex and cursorIndex properties. But setting them to 0 (in the JavaScript console) does not trigger a focus. Also, when I focus a row, and then focus the JavaScript console, the focus gets lost, making it hard to figure out what is going on.

Then I checked the code of the keydown handler. This made me try the following (again, on the console):

var widget = PF('widget');
row = $('tbody tr', widget.jq).eq(0);
widget.focusedRow = row;
widget.highlightFocusedRow();
row.focus();

This will highlight the first row, but the focus is not set. I think I'm close, but stuck with the focus issue.

Solution

  • The trick is to focus the focusable TBODY.

    widget.getFocusableTbody().trigger('focus');

    But you will still be facing the issue trying to set focus from the console. See Unable to set focus and cursor to input text using javascript in Chrome Console