onEditCancel on RowEditor is not updating datatable in Prime

[ajayveluru]

Hi,
I am using JSF 2.0 and PF 3.5.

Here my requirement is as follows.
I have a datatable where each row has row editor to update the columns data and remove the row from datatable. I am getting data from DB. When i say remove the row means that object will not get from DB as i am fetching the data based on the flag.

Here update the column values is working fine onEdit ajax event.
But removing row is not working onEditCancel ajax event. The issue am getting is that event is fired and is doing backend changes fine but the datatable is not refreshed/updated. Due to this, the row is still displaying which is supposed not to display on datatable.

I am using <p:remoteCommand> also to invoke but no luck.

Could one of you please help me to resolve this issue?

Please find my XHTML.

<h:form id="commandForm">
<p:messages id="messages" globalOnly="true" />

<p:remoteCommand name="delete" update=":commandForm:messages, :commandForm:actionCodes" action="#{actionHandler.deleteAction}">
<f:setPropertyActionListener value="#{action}"
target="#{actionHandler.actionBean}" />
</p:remoteCommand>

<p:panel id="actionCodePanel" style="width: 50%"
header="List of Action Codes">

<h:panelGrid id="actionCodeGrid" style="width: 100%">
<p:dataTable var="action" value="#{actionHandler.carsSmall}" id="actionCodes" editable="true">

<f:facet name="header">
In-Cell Editing
</f:facet>

<p:ajax event="rowEdit" listener="#{actionHandler.onEdit}" update=":commandForm:messages" />
<p:ajax event="rowEditCancel" onclick="delete()" />

<p:column headerText="Model" style="width:30%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{action.action}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{action.action}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>

<p:column headerText="Year" style="width:20%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{action.actionDesc}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{action.actionDesc}" style="width:100%" label="actionDesc"/>
</f:facet>
</p:cellEditor>
</p:column>

<p:column style="width:6%">
<p:rowEditor />
</p:column>

</p:dataTable>
</h:panelGrid>
</p:panel>
</h:form>
</ui:define>
</ui:composition>

[bsanders1979]

Is #{actionHandler.carsSmall} a collection or LazyDataModel? Have you tried placing a breakpoint in DataTableRenderer to verify that the particular object is in fact gone from the collection? Maybe the record is actually deleted, but not removed from #{actionHandler.carsSmall}? In my project, I do use LazyDataModel and cache the results for a short period of time (30 seconds) and this same exact issue can manifest itself if I don't actually refresh the data. Just curious, but why remove the row when clicking cancel? I actually have a separate icon to do that (<p:commandLink /> with styleClass of "ui-icon ui-icon-???)

[ajayveluru]

Thank you for your reply.

I am using List object to populate data table.

As i have two functionalities like update and delete, so i thought let me put these 2 actions for two icons (tick and cross marks). But here i understood that onEditCancel event can not update the data table. I am not sure howmuch i am correct. But i am looking for some alternative here to achieve this functionality.

I understood your point re placing another command link to remove the row. If this is not achievable, i may implement that.

[bsanders1979]

When you click the x, the RowEditFeature just iterates thru all the columns and calls resetValue() on the EditableValueHolders. You click the pencil to display the output facets. Then, you either accept or cancel the changes. Just adding the extra <p:commandLink /> works fine for me. Just know that if you apply the styleClass as previously described that the only text you can display will be in the tooltip.

[ajayveluru]

Thank you again for your response.

I am sorry i did not get complete idea what you are suggesting. I will put my understanding here.

You are saying that you will use 'X' for clear the changes made to existing record and put existing value as it is. And take command link with style ui-icon and do here actual removal of the record. Are you saying to make extra icon for command link here.

If possible can you post screen shot of this functionality or place sample code snippet which you did.

Thank you in advance.

Thanks,
Ajay V.

[bsanders1979]

Hey Ajay,
Sorry for the delay. Here's a short example assuming that "x" is the datatable var

Code: Select all

<p:commandLink
    id="delete"
    actionListener="#{x.removeSelf()}"
    update="datatable"
    styleClass="ui-icon ui-icon-trash"
/>

You may implement the actionListener as you please, but that's all you really need to do.