CODEWITHSUNDEEP
jsfprimefacesdatatabletablecelleditor
user6120465
user6120465

Reputation:

Primefaces datatable, update row oncelledit

I have primefaces datatable and i want to update specific column or entire row on cell edit. Value in edited cell determines value in other column in the same row.

I tried to update component from onCellEdit method but no success:

String targetTypeColumn = ((DataTable)event.getSource()).getClientId(FacesContext.getCurrentInstance()) +
                  ":" + event.getRowIndex() + ":editor";

RequestContext.getCurrentInstance().update(targetTypeColumn);

Column have cell editor:

<p:column id="tgtType" styleClass="mapDetsTblColTypeTgt" headerText="Target Type">
    <p:cellEditor id="editor" rendered="...">
        <f:facet name="output">
            <h:outputText  value="..." />
        </f:facet>
        <f:facet name="input">
            <p:inputText value="..." styleClass="mapDetsTblInput" onselect="this.value=this.value" />
        </f:facet>
    </p:cellEditor>
    <h:outputText value="..." rendered="!..."/>
</p:column>

Any ideas?

I don't want to update whole datatable because this is waste of time.

Edit:

I tried to update datatable during on cell edit

<p:dataTable id="mapperDetailsTable" styleClass="mapperDetailsTable" widgetVar="mapperDetailsTable"
                ..... >

                <p:ajax event="cellEdit" listener="#{bean.onCellEdit}" update=":mapperDetailsForm:growlMapper mapperDetailsTable"
                oncomplete="handleCellEdit(args);" />
......

but no effect. Next cell not updated. Is it correct what i wrote? I'm using autoComplete in edited cell so i don't have update attribute.

<p:cellEditor rendered="#{guiUtils.isEditable(mapperCtrl, fieldMapping)}">
    <f:facet name="output">
        <h:outputText value="#{fieldMapping.fieldNameTgt}"/>
    </f:facet>
    <f:facet name="input">
        <p:autoComplete value="#{fieldMapping.fieldNameTgt}" completeMethod="#{mapperCtrl.dmUtils.completeTargetFields}" >
            <p:ajax event="itemSelect" listener="#{mapperCtrl.action}" process="mapperDetailsTable"/> 
            <p:ajax event="change" listener="#{mapperCtrl.action}" process="mapperDetailsTable"/> 
        </p:autoComplete>
    </f:facet>
</p:cellEditor>

Edit2:

I checked and value is updated on the correct element in the list.

When i used solution from this thread(reload datatable): Updating entire <p:dataTable> on complete of <p:ajax event="cellEdit"> everything is ok. So value is updated correctly but how to refresh row or cell only?

Edid 3:

I found out that i can update cell using commandButton

<p:column>
.....
                    <p:commandButton value="updateTgtRow" id="updateTgtRow"  process="@this" ajax="true" immediate="true" update="outputType inputType"/>
</p:column>

After click in button cell is updated without reload table. But how to call click on that button after cell edit? When i added oncomplete, cell edit don't work. Cells are read only. Any idea?

<p:ajax event="cellEdit" listener="#{mapperCtrl.onCellEdit}" 
                    process="@this" oncomplete="#(updateTgtRow).click()"/>

Upvotes: 1

Views: 4694

Answers (1)

user6120465
user6120465

Reputation:

I solve my problem using p:commandButton component

In cell i added

<p:commandButton style="display: none" value="updateTgtRow" id="updateTgtRow"  process="@this" ajax="true" immediate="true" update="outputTgtType inputTgtType"/>

It updates fields from other cells (outputTgtType and inputTgtType). In bean i call click on that button 

String componentId = ((DataTable) event.getSource()).getClientId(FacesContext.getCurrentInstance()) + ":"
                        + event.getRowIndex() + ":updateTgtRow";

RequestContext.getCurrentInstance().execute("document.getElementById('" + componentId + "').click()");

It looks like hack but it works. This solution update specific cells in currently edited row.

Upvotes: 2

Related Questions