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

If you have several DataTable which each of them has an ID, then try to use one of these solutions:

Oncomplete="jQuery('#FrmID:TabViewI:mydataTableID'.replace(/:/g,'\\:')).find('span.ui-icon-pencil').each(function(){jQuery(this).click()});" 

OR:

oncomplete="jQuery('#FrmID\\:TabViewID\\:mydataTableID').find('span.ui-icon-pencil').each(function(){jQuery(this).click()});"

This should work perfectly.

Answer 2

If you have only one data table in the facelet try to use this

oncomplete="jQuery('.ui-datatable-data tr').last().find('span.ui-icon-pencil').each(function(){jQuery(this).click()});

Add this to the command button. This should work.

Answer 3

Try this :

jQuery('#FormID\\:DataTableID\\:#{datatable.size()}\\:rowEditorID').find('span.ui-icon-pencil').each(function(){jQuery(this).click()});

worked well, no matter how many datatables in a same page.

Answer 4

Execute a JQuery script on complete process :

oncomplete="editNewRow()"

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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() {
                $("#panel\\:carTable tbody:first tr:last .td-edition .ui-row-editor .ui-icon-pencil").click();
            }
        </script>

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

Answer 5

This solution aims to resolve a few drawbacks of the original answer of:

oncomplete="jQuery('.ui-datatable-data tr').last().find('span.ui-icon-pencil').each(function(){jQuery(this).click()});"

The above statement retrieves all "tr" elements which are descendants (at any level) of elements with the ".ui-datatable-data" class. The potential issues with that are:

1. As mentioned by @Gnappuraz, if there are multiple p:datatable's in the document, this statement will choose the last table.
2. Additionally, I ran into a problem where even with one datatable, a column with a p:selectOneRadio component will also render a html table (that contains "tr" elements). In this case the selector chooses the last "tr" for the p:selectOneRadio's table, rather than the p:datatable.
3. Not a problem, but the statement can be shortened to exclude the each() because of jQuery's implicit iteration.

What I ended up with was:

oncomplete="jQuery('#tableForm\\:table .ui-datatable-data > tr').last().find('span.ui-icon-pencil').click();"

This selector says - get the last "tr" element, which is a direct child of an element with class ".ui-datatable-data", which is also a descendant of the element with id "table" in form "tableForm". In other words you can now have multiple p:datatables, and any include any components that render html tables.

Answer 6

I used the execute(..) method of class RequestContext in my create method. This allowed me to first calculate the index of the row to go into edit mode and to include it dynamically in the javascript:

RequestContext.getCurrentInstance().execute("jQuery('span.ui-icon-pencil').eq(" + rowToEditIndex + ").each(function(){jQuery(this).click()});");

Hope this helps.