using <p:dataTable> cellEdit event is never fired in Primefaces

Question

I am having issue in firing an ajax call on the cellEdit event of a Data Table. The table shows up just fine on the UI but nothing happens when I click any of the cell.

xhtml

<h:form>
<p:dataTable id="decisionTree" var="tree"
                        value="#{treeBean.content}" editable="true" editMode="cell"
                        styleClass="smallGrid">

                        <f:facet name="header">
                         Notes Decision Tree
                     </f:facet>


                        <p:ajax event="cellEdit" listener="#{treeBean.onCellEdit}"
                            immediate="true" update=":#{p:component('notesTextArea')}" />
                        <p:column headerText="Comment Type">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{tree.commentType}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{tree.commentType}" disabled="true" />
                                </f:facet>
                            </p:cellEditor>
                        </p:column>

                        <p:column headerText="MTCNs">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{tree.mtcns}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{tree.mtcns}" disabled="true" />
                                </f:facet>
                            </p:cellEditor>
                        </p:column>

                        <p:column headerText="Call Type">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{tree.callType}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{tree.callType}" disabled="true" />
                                </f:facet>
                            </p:cellEditor>
                        </p:column>

                        <p:column headerText="Phone">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{tree.phone}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{tree.phone}" disabled="true" />
                                </f:facet>
                            </p:cellEditor>
                        </p:column>


                        <p:column headerText="Dispute Reason">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{tree.disputeReason}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{tree.disputeReason}" disabled="true" />
                                </f:facet>
                            </p:cellEditor>
                        </p:column>


                        <p:column headerText="Placement Decision">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{tree.placementDescision}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{tree.placementDescision}" disabled="true" />
                                </f:facet>
                            </p:cellEditor>
                        </p:column>
                        <!-- 
                        <p:column>
                            <p:rowEditor />
                        </p:column>
                        --> 
                    </p:dataTable>
</h:form>

Here is the Bean.

@Component("treeBean")
@Scope(value = "view", proxyMode = ScopedProxyMode.TARGET_CLASS)
public class TreeBean {

    private List<TreeDto> content;
    private String result="";

    public List<TreeDto> getContent() {
        return content;
    }

    public void setContent(List<TreeDto> content) {
        this.content = content;
    }

    @PostConstruct
    public void init() {
        content=new ArrayList<TreeDto>();
        TreeDto dto1=new TreeDto();
        dto1.setCommentType("First Attempt");
        dto1.setMtcns("mtcn1");
        dto1.setCallType("OBC");
        dto1.setPhone("8975730838");
        dto1.setDisputeReason("Fraud");
        dto1.setPlacementDescision("Write Off");
        content.add(dto1);

    }

    public void onCellEdit(CellEditEvent event) {

        RequestContext.getCurrentInstance().showMessageInDialog(new FacesMessage(FacesMessage.SEVERITY_INFO, "Status","something clicked"));

    }


}

My intention to capture the value of the cells clicked. But I am not able to get an event fired in the first place on cell edit. Please give me some suggestions on how to resolve this.

Answer 1

Try to add a widgetVar to your dataTable and then edit your cell with a contextMenu for your data table, which call onclick="PF('yourWidgetVar').showCellEditor();return false;"

Somenthing like this

<p:contextMenu for="decisionTree" widgetVar="cMenu">   
       <p:menuitem value="Edit Cell" icon="ui-icon-search" onclick="PF('yourWidgetVar').showCellEditor();return false;"/>  
       <p:menuitem value="Hide Menu" icon="ui-icon-close" onclick="PF('cMenu').hide()"/>  
</p:contextMenu> 

You can take a look to Primefaces documentation too:

https://www.primefaces.org/showcase/ui/data/datatable/edit.xhtml