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

Question

I have a primefaces p:dataTable with InCell editing enabled and want to trigger/activate the RowEditor for the newly added row.

Excerpt of XHTML

Answer 1

You can add an unique styleClass to the dataTable, and one javascript function in the commandButton:

So add to the table:

styleClass="myTable"

And to the button:

oncomplete="$('.myTable tbody.ui-datatable-data tr:last-child td span.ui-row-editor span.ui-icon-pencil').click()"

And your code will look like this:

<p:commandButton id="btnAddEntry" value="Add new row" actionListener="#{myBean.addNewCar}" ... update="carTable growl" process="@this carTable ..." oncomplete="$('.myTable tbody.ui-datatable-data tr:last-child td span.ui-row-editor span.ui-icon-pencil').click()"/>

<p:dataTable styleClass="myTable" id="carTable" var="car" value="#{myBean.cars}" ... editable="true">  
        <p:column ...>  
            <p:cellEditor>
                ...
            </p:cellEditor>  
        </p:column>
    ...
        <p:column ...>  
                <p:rowEditor />  
        </p:column>
    ...         
</p:dataTable>

Answer 2

Execute a JQuery script on complete process :

oncomplete="editNewRow()"

        <script type="text/javascript">
            $(document).on("keydown", ".ui-cell-editor-input input", function(event) {
                if (event.keyCode == 13) {
                    $(this).closest("tr").find(".td-edition .ui-row-editor .ui-row-editor-check .ui-icon-check").click();
                    return false;
                }
            });

            function editNewRow() {
                $("#pim\\:invoiceRuleCretariaTable tbody:first tr:first .td-edition .ui-row-editor .ui-icon-pencil").click();
            }
        </script>

The first function submit the addition action by press on "Enter" key

Answer 3

To solve this is better to use styleClass and because for fix this it is necessary to use javascript, you need to check the html tags in your browser, because it seems that they change with the versions of primefaces. For vesion 6.1 I've put this on my bean:

RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.execute("$('.styleEventosPlanPrestacion tbody.ui-datatable-data tr:first-child td div.ui-row-editor a.ui-row-editor-pencil').click()");

and In my .xhtml I've put this:

<p:dataTable ... styleClass="styleEventosPlanPrestacion">