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");           
}

Answer 1

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 id s. Since a form is also a naming container, your outputText component id s 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);

See also:

• How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
• Send additional parameter to Ajax event listener