How to update a specific cell on a PrimeFaces dataTable

Question

In my dataTable I am linking each article with a specific task.

On the click of a commandButton a list of tasks shows up, so I want on the select of a task, update a specific cell in the dataTable (outputText with id="columnTache") without updating the rest of my dataTable.

<p:dataTable value="#{myController.articleList}" 
             id="tabArticle"                            
             var="article"  
             rowKey="#{article.id}"  >
    <p:column headerText="quantite" >
        <pe:inputNumber value="#{article.quantite}" />
    </p:column>                            
    <p:column headerText="taches" >     
        <h:outputText value="#{article.tache.libelleTache}" id="columnTache" />
    </p:column>
    <p:column headerText="taches"  >
        <p:commandButton  oncomplete="PF('dialogTasks').show();" update=":formSelectAffecterTache">
            <p:ajax event="click" listener="#{myController.setArticle(article)}" />
        </p:commandButton>
    </p:column>
</p:dataTable>

<p:dialog header="#{bundleTech.lbl_taches}" widgetVar="dialogTasks" >     
    <h:panelGrid columns="1" >
        <h:form id="formSelectAffecterTache">
            <ui:include src="/pages/listTacheSelect.xhtml">
                <ui:param name="bean" value="#{myController}" />
                <ui:param name="action" value="affecterTache" /> 
            </ui:include>               
        </h:form>
    </h:panelGrid>        
</p:dialog>

The update of my dataTable is in the managed bean:

public void affecterTache() {
    article.setTache(selectedSingleTache);
    RequestContext.getCurrentInstance().update("form:tabArticle");           
}

Your Datatable is updating entirely because of your `RequestContext.getCurrentInstance().update("form:tabArticle");`. — hamza-don, Mar 14 '16 at 14:37
exactly @hamza-don what do i have to edit so that it updates just the cell with the id columnTache — Bilal Dekar, Mar 14 '16 at 14:51
Why don't you use the Datatable's [Cell Edit](http://www.primefaces.org/showcase/ui/data/datatable/edit.xhtml) feature. — hamza-don, Mar 14 '16 at 15:12

score 3 · Accepted Answer · edited May 23 '17 at 12:30

A dataTable is a naming container, so components within it will be prepended with the dataTable's id. Also, each iteration of data presented in the table (each row) will have effect of the generated ids. Since a form is also a naming container, your outputText component ids will be generated as formId:tabArticle:0:columnTache in the first row, formId:tabArticle:0:columnTache in the second row, etc.

If you would set an id on your commandButton you will get formId:tabArticle:0:myButton, formId:tabArticle:1:myButton etc. You can use this id in your click handler to create the corresponding inputText clientId. But, since you pass article to a method, you are not able to check which button was clicked. So first of all change the click listeners method to:

public void useArticle(AjaxBehaviorEvent event) {
    UIComponent component = event.getComponent();
}

Now, you know which button was clicked (event.getComponent()), but you need your article as well. You can set that as an attribute to your button in XHTML:

<p:commandButton id="myButton"
                 oncomplete="PF('dialogTasks').show();" 
                 update=":formSelectAffecterTache">
    <p:ajax event="click"
            listener="#{myController.useArticle}" />
    <f:attribute name="article"
                 value="#{article}" />
</p:commandButton>

This attribute can be read in your listener:

Article article = (Article) component.getAttributes().get("article");

Now, for updating the inputText, simply use the button's clientId:

String update = component.getClientId().replace(":myButton", ":columnTache");

Store it in your bean, and when you are ready to do so, update:

RequestContext.getCurrentInstance().update(update);

How to update a specific cell on a PrimeFaces dataTable

1 Answers1

Linked