Help ajax update datatable single row

[rodakr]

Hi

I need some hints from primeface ajax specialist...
I have a datatable with p:commandButton ajax=true in each row.

When I click on this button, I call backen bean via ajax, I change data in model and I do update on panel with my datatable the whole datatable is updated. so far so gut.
But what I would like to do is on button click only update the row in p:datatable and not the whole datatable.
With lot of data in table the whole things becomes pretty slow.....

I would like to do, just get ajax event to update single row in table...

Any hints what can I set as update value?
Do you know any kind jquery which I could use oncomplete to do partial update on a row in datatable?
Any kind of parameters via RequestContext to force datatable row refresh?

Code: Select all

<p:panel id="changePanel">
<p:dataTable id="eaptable" var="eapAction" value="#{deploy4all.currentActions}" 
          paginator="true" rows="25"  paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
          rowsPerPageTemplate="25,50,100" >  
   
         <p:column >
                <p:commandButton process="@this" actionListener="#{deploy4all.deleteEapAction(eapAction)}" update="changePanel growl"   
                   image="ui-icon ui-icon-close" title="Delete" ajax="true" immediate="true"/>  
      </p:column>

..
..

Code: Select all

              <p:column >
	            <p:rowEditor />  
	       </p:column>
		 <p:column >
	       <h:graphicImage url="#{deploy4all.actionsValidator.validateIcon[eapAction.id]}"  onmouseover="box.showTooltip(event,escape('#{deploy4all.actionsValidator.validationErrorStack[eapAction.id]}'),0,400)" rendered="#{deploy4all.actionsValidator.validateIcon[eapAction.id]  != null}"></h:graphicImage>
		  </p:column>
         <p:column headerText="Order" >  
             <p:cellEditor>  
                 <f:facet name="output">  
                     <h:outputText value="#{eapAction.ordernrY}" />  
                 </f:facet>  
                 <f:facet name="input">  
                      <h:inputText value="#{eapAction.ordernrY}" required="false" />  
                 </f:facet>  
             </p:cellEditor> 
        </p:column>  
         <p:column headerText="Action"  >  
             <h:outputText value="#{eapAction.actionType}" />  
         </p:column>  

[Alex]

i had the same problem, but was not successfull to do partial update on a single row, but its possible to update every cell.. okay its not very nice.. but it kind of works..

therefor you just need the rowIndexVar, which helps you to combine the generated ids..

every try to update the the row directly was not success to me.. maybe you find a way?

[rodakr]

Alex, thanks a lot for your sugestion!
Updating cells in a row is much better the updating whole table for sure!

[rodakr]

Solutions ends to be very simple... just put id of your element in to update attribute... ( see below update="growl orderP orderI" )
And how it knows which element to update if all lines with same id .... and the answer is because of @this in process.
( In firebug you only see ajax update only for one elemet an not for all elements with same id )
If you wan't use @this, this solution might be not what you look for.

Code: Select all

 <p:column style="width:30px;">
		          
		      <p:commandButton process="@this"  actionListener="#{deploy4all.deleteEapAction(eapAction)}"  
		       image="ui-icon ui-icon-close" title="Delete" ajax="true" immediate="true" update="growl orderP orderI"/>   
		      <p:rowEditor /> 
          </p:column>
		  <p:column >
	       <h:graphicImage url="#{deploy4all.actionsValidator.validateIcon[eapAction.id]}"  onmouseover="box.showTooltip(event,escape('#{deploy4all.actionsValidator.validationErrorStack[eapAction.id]}'),0,400)" rendered="#{deploy4all.actionsValidator.validateIcon[eapAction.id]  != null}"></h:graphicImage>
		  </p:column>
         <p:column headerText="Order" >   
                 <h:outputText value="without editor on outputpannel #{eapAction.ordernrY}" />  
            <p:cellEditor>  
                 <f:facet name="output">  
                     <h:outputText id="orderP" value="#{eapAction.ordernrY}" />  
                 </f:facet>  
                 <f:facet name="input">  
                      <h:inputText id="orderI" value="#{eapAction.ordernrY}" required="false" />  
                 </f:facet>  
             </p:cellEditor> 
 
        </p:column>  

What is nice, this is even better then the whole row update, if you don't need to update all columns in row!
P.S: If you wondert what this code ist doing... deleting means set #{eapAction.ordernrY} to -1, real removing happens on save button on server side