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

Question

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.

How about widget.getFocusableTbody().trigger('focus') which should give the focusable TBODY the focus? — Melloware
– Melloware, Commented Feb 17, 2021 at 13:10
That works, but not from the console. If I use the location bar with javascript:... it does work. Thanks! — Jasper de Vries
– Jasper de Vries, Commented Feb 17, 2021 at 13:30

Jasper de Vries · Accepted Answer · 2021-02-17 13:45:05Z

2

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

edited Feb 17, 2021 at 13:45

Jasper de Vries

20.4k6 gold badges68 silver badges107 bronze badges

answered Feb 17, 2021 at 13:33

Melloware

12.3k2 gold badges40 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related