How To Trigger Row Editor On A P:treetable Using Javascript

September 30, 2023 Post a Comment

I have an editable p:treeTable: ...

Solution 1:

Apparently you don't need to select and click the pencil's anchor, but the span within the anchor, so:

document.querySelectorAll(".ui-row-editor-pencil span")[0].click();

I've added a hack to trigger row editing based on the row key, by adding the row key in the styleClass attribute of the p:rowEditor:

<p:treeTablenodeVar="node"...>
  ...
  <p:columnstyle="width:32px"><p:rowEditorstyleClass="rowEditor-#{node.rowKey}"/></p:column></p:treeTable>

This allows you to easily trigger editing by ID:

document.querySelector(".rowEditor-"+ rowKey +" .ui-row-editor-pencil span").click();