Search code examples
jsfdatatableicefaces

How to make one column editable in a readonly ace:datatable?


I have a readonly ace:datatable composed of 4 columns

I wish to make the fourth column "Process Limit" editable in this datatable

Can i do this ?

This is the xhtml code :

<ace:dataTable value="#{bankProcessLimitManagement.bankProcessLimitBean}"
                    var="name" style="width: 50% !important;" id="namesTable"
                    rowSelectListener="#{bankProcessLimitManagement.rowSelectListener}"
                    rowUnselectListener="#{bankProcessLimitManagement.rowDeSelectListener}"
                    selectionMode="single" paginator="true" rows="10">
                    <ace:column headerText="LatinName">
                        <h:outputText value="#{name.latinName}"></h:outputText>
                    </ace:column>
                    <ace:column headerText="Arabic Name">
                        <h:outputText value="#{name.arabicName}"></h:outputText>
                    </ace:column>
                    <ace:column headerText="Process Type">
                        <h:outputText value="#{name.processType}"></h:outputText>
                    </ace:column>
                    <ace:column headerText="Process Limit">
                        <h:outputText value="#{name.limit}"></h:outputText>
                    </ace:column>
</ace:dataTable>

This is the correspondent bean:

@ManagedBean(name="bankProcessLimitManagement")
@ViewScoped
public class BankProcessLimitManagement {
    // Render for the datatable
    private boolean renderTable = false;
    // List linked to the datatable
    private List<BankProcessLimitBean> bankProcessLimitBean;
    // Selected Row
    private BankProcessLimitBean selectedBankProcessLimit;
    public void rowSelectListener(SelectEvent event) {
        selectedBankProcessLimit = (BankProcessLimitBean) event.getObject();
    }
    public void rowDeSelectListener(UnselectEvent event) {
        selectedBankProcessLimit = null;
    }
    // Getters
    public List<BankProcessLimitBean> getBankProcessLimitBean() { return bankProcessLimitBean; }
    public boolean isRenderTable() { return renderTable; }
    public BankProcessLimitBean getSelectedBankProcessLimit() { return selectedBankProcessLimit; }

    // Setters
    public void setRenderTable(boolean renderTable) { this.renderTable = renderTable; } 
    public void setBankProcessLimitBean(List<BankProcessLimitBean> bankProcessLimitBean) { this.bankProcessLimitBean = bankProcessLimitBean; }
    public void setSelectedBankProcessLimit(BankProcessLimitBean selectedBankProcessLimit) { this.selectedBankProcessLimit = selectedBankProcessLimit; }    
}

Thanks in advance


Solution

  • As said in the documentation you should do:

    <ace:column headerText="Process Limit">
        <ace:cellEditor>
            <f:facet name="output">
                <h:outputText value="#{name.limit}"/>
            </f:facet>
            <f:facet name="input">
                <h:inputText value="#{name.limit}"/>
            </f:facet>
        </ace:cellEditor>
    </ace:column>
    

    You need of course to add a form wrapping your table, and to include a button or a link in order to submit the data.