function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
lakslaks 

Updating a field dynamically in pageBlockTable

Hi,

 

My requirement is that I want a field(column) in pageBlockTable to be calculated dynamically based on 2 other fields.

I have 3 columns - Order quantity, Unit Price & Total Extended Price.

 

 

What I want to do is :

Whenever the value under Order quantity is changed in a row, the corresponding Total Extended Price should be calculated and refreshed (Total Extended Price = Order quantity * Unit Price ).

 

How can I achieve the same in Visualforce ?

 

Thanks in advance.

 

 

 

Regards,

Lakshmi.

Best Answer chosen by Admin (Salesforce Developers) 
SFDC_VikashSFDC_Vikash

Hi ,

 

You can add the above functionality by using javascript which will update the total price onblur of the textbox you are changing.

 

Sample code :

 

<apex:page standardController="Account" recordSetVar="accs" sidebar="false">
<script>
  function computeTotal(quantityId, unitPriceId, totalId){
    var quantity = document.getElementById(quantityId).value;    
    var cost = document.getElementById(unitPriceId).innerHTML;        
    var totalPrice = quantity * cost;        
    document.getElementById(totalId).innerHTML = totalPrice;
  }
</script>
  <apex:form >
    <apex:pageBlock >
      <apex:pageBlockTable value="{!accs}" var="acc">
        <apex:column headerValue="Quantity">
          <apex:inputText id="quantity" onblur="computeTotal('{!$Component.quantity}','{!$Component.unitPrice}','{!$Component.total}');"/>
        </apex:column>
        <apex:column headerValue="Unit Price">
          <apex:outputText id="unitPrice" value="10"/>
        </apex:column>
        <apex:column headerValue="Total Price">
          <apex:outputText id="total"/>
        </apex:column>
      </apex:pageBlockTable>
    </apex:pageBlock>
  </apex:form>
</apex:page>

 Hope this sample code will help you out with your requirement.

 

Please mark as solution if you get help with this.

 

 

All Answers

lakslaks

I got it to work by using actionSupport, param tags and controller action method to perform the calculation.

 

The problem I am facing now is that the value before change is taken from my inputtext field for the calculation, whereas I want the value that I have entered now.

 

VF page code:

 

<apex:column headervalue="Order quantity"> 
<apex:inputtext styleClass="textbox" value="{!prodlist.m_iOrderQty}" style="width:150px;">
      <apex:actionSupport event="onchange" action="{!calcExtPrice}" reRender="ProdListTable">
            <apex:param name="orderqty" value="{!prodlist.m_iOrderQty}" assignTo="{!orderqty}"/>
            <apex:param name="unitprice" value="{!prodlist.m_dUnitPrice}" assignTo="{!unitprice}"/>
            <apex:param name="prodid" value="{!prodlist.m_iCount}" assignTo="{!prodid}"/>
      </apex:actionSupport>
</apex:inputtext>
</apex:column>

 

Controller code:

public void calcExtPrice()
{
        Integer l_iModPos = -1;
        String l_stOrderQty = ApexPages.CurrentPage().getParameters().get('orderqty');
        String l_stUnitPrice = ApexPages.CurrentPage().getParameters().get('unitprice');
        String l_stProdId = ApexPages.CurrentPage().getParameters().get('prodid');
        Integer l_iOrderQty = Integer.valueof(l_stOrderQty);
        Decimal l_dUnitPrice = Decimal.valueof(l_stUnitPrice);
        Integer l_iProdId = Integer.valueof(l_stProdId);
        
        Decimal l_dTotalPrice = l_iOrderQty * l_dUnitPrice;
        
        for(Integer i = 0; i < m_ltProdList.size(); i++)
        {
            if(m_ltProdList[i].m_iCount == l_iProdId)
            {
                l_iModPos = i;
            } 
        } 
        
        if(l_iModPos != -1)
        {
            m_ltProdList[l_iModPos].m_dExtPrice = l_dTotalPrice;
            m_ltProdList[l_iModPos].m_iOrderQty = l_iOrderQty;
        }    
                
}

 

Can anybody tell me what I am doing wrong here.

 

 

Regards,

Lakshmi.
SFDC_VikashSFDC_Vikash

Hi ,

 

You can add the above functionality by using javascript which will update the total price onblur of the textbox you are changing.

 

Sample code :

 

<apex:page standardController="Account" recordSetVar="accs" sidebar="false">
<script>
  function computeTotal(quantityId, unitPriceId, totalId){
    var quantity = document.getElementById(quantityId).value;    
    var cost = document.getElementById(unitPriceId).innerHTML;        
    var totalPrice = quantity * cost;        
    document.getElementById(totalId).innerHTML = totalPrice;
  }
</script>
  <apex:form >
    <apex:pageBlock >
      <apex:pageBlockTable value="{!accs}" var="acc">
        <apex:column headerValue="Quantity">
          <apex:inputText id="quantity" onblur="computeTotal('{!$Component.quantity}','{!$Component.unitPrice}','{!$Component.total}');"/>
        </apex:column>
        <apex:column headerValue="Unit Price">
          <apex:outputText id="unitPrice" value="10"/>
        </apex:column>
        <apex:column headerValue="Total Price">
          <apex:outputText id="total"/>
        </apex:column>
      </apex:pageBlockTable>
    </apex:pageBlock>
  </apex:form>
</apex:page>

 Hope this sample code will help you out with your requirement.

 

Please mark as solution if you get help with this.

 

 

This was selected as the best answer
lakslaks

That worked fine Vikash :-)

 

Thanks a lot .

 

 

Regards,

Lakshmi.
anup ramanup ram

It
anup ramanup ram

It is giving me sysntax error . Can I know why ?

 

<apex:page standardController="Account" recordSetVar="accs" sidebar="false">

<script type="text/javascript">

 

  function computeTotal(quantityId, unitPriceId, totalId){

    var quantity = document.getElementById(quantityId).value;   

    var cost = document.getElementById(unitPriceId).innerHTML;       

    var totalPrice = quantity * cost;       

    document.getElementById(totalId).innerHTML = totalPrice;

  }

</script>

  <apex:form >

    <apex:pageBlock >

      <apex:pageBlockTable value="{!accs}" var="acc">

        <apex:column headerValue="Quantity">

         

                   <apex:inputText id="quantity" onblur="computeTotal('{!$Component.quantity}','{!$Component.unitPrice}','{!$Component.total}');"/>

 

        </apex:column>

        <apex:column headerValue="Unit Price">

          <apex:outputText id="unitPrice" value="10"/>

        </apex:column>

        <apex:column headerValue="Total Price">

          <apex:outputText id="total"/>

        </apex:column>

      </apex:pageBlockTable>

    </apex:pageBlock>

 

  </apex:form>

</apex:page>

 

 

Please help me
Ashvin Jadhav 13Ashvin Jadhav 13
Hi, 

I use the same code as above in best answer. But it is renedering as 'NaN'. 

Does it occuring like this because my unit price field is of type currency ?

Please help ! 

Thanks in advance