How To Trigger Row Editor On A P:treeTable Using JavaScript

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:treeTable nodeVar="node" ...>
  ...
  <p:column style="width:32px">
    <p:rowEditor styleClass="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();

See also:

• Trigger/activate the RowEditor from bean for a primefaces In-Cell editing enabled p:dataTable

Share