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

<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 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 don't know

1. if this is the correct approach
2. in case yes, which object to pass to the constructor RowEditEvent(UIComponent component, Behavior behavior, Object object) as the 3rd parameter

Answer 1

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 2

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.

Answer 3

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>