Run / activate RowEditor with bean for editing. Enabling cell editing. P: dataTable.

Question

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

Excerpt from XHTML

 <p:commandButton id="btnAddEntry" value="Add new row" actionListener="#{myBean.addNewCar}" ... update="carTable growl" process="@this carTable ..."/> <p:dataTable 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> 

Here is what I have so far used for the bean method:

 public void addNewCar() { Car newCar = new Car(); cars.add(newCar); FacesContext facesContext = FacesContext.getCurrentInstance(); UIComponent uiTable = ComponentUtils.findComponent(facesContext.getViewRoot(), "carTable"); DataTable table = (DataTable) uiTable; final AjaxBehavior behavior = new AjaxBehavior(); RowEditEvent rowEditEvent = new RowEditEvent(uiTable, behavior, table.getRowData()); rowEditEvent.setPhaseId(PhaseId.UPDATE_MODEL_VALUES); table.broadcast(rowEditEvent); } 

I dont know

• if this is the right approach
• if yes, which object to pass to the RowEditEvent(UIComponent component, Behavior behavior, Object object) constructor RowEditEvent(UIComponent component, Behavior behavior, Object object) as the third parameter

Answer 1

If you have only one data table in a facelet, try using this

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

Add this to the command button. That should work.

Answer 2

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

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

Hope this helps.

Answer 3

You can add a unique classClass to the dataTable and one javascript function in 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 4

This solution aims to address several of the drawbacks of the original answer:

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

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

• As @Gnappuraz mentioned, if a document has several p: datatable, this statement will select the last table.
• Also, I had a problem where even with one datatable column with the p component: selectOneRadio also displays an html table (containing the "tr" elements). In this case, the selector selects the last "tr" for the p: selectOneRadio table, and not for p: datatable.
• Not a problem, but the instruction can be shortened to exclude each () due to jQuery implicit iteration .

What I ended up with:

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

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

Answer 5

Try the following:

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

worked well no matter how much data on one page.

Answer 6

If you have multiple DataTable, each of which has an identifier, try using one of the following 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 just fine.

Answer 7

To solve this problem, it is better to use styleClass, and since you need to use javascript to fix it, you need to check the html tags in your browser, because it seems that they are changing with versions. For vesion 6.1, I 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 put this:

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