+ Start a Discussion
Amit_Amit_ 

How to make pageblock Fields editable on click of button

Hi All,

I have a small requirement where the values are displayed on VF page and on click of pageblockbutton Edit, the quantity field should become editable

how will i achive that here what i am trying to do :

 

<apex:outputpanel id="cartshow">           
        <apex:facet name="header"></apex:facet>  
            <apex:pageBlock title="Selected items" id="cartsho" mode="readonly" rendered="{!rendered}">
                <apex:detail inlineEdit="true"/>
                <apex:pageBlockButtons >   
                    <apex:commandButton value="Remove Items" action="{!removeItem}"/>
                    <apex:commandButton value="Place Order" action="{!OrderPlaced}"/>
                    <apex:commandButton value="Edit" action="{!editOrder}" onclick="computeTotal"/>
                </apex:pageBlockButtons>
                <apex:pageBlockTable value="{!selectedProd}" var="c" >
                    <apex:column headerValue="Select">
                        <apex:inputCheckbox value="{!c.isSelected}"/>
                    </apex:column>
                    <apex:column width="20px">
                        <apex:commandButton value="Remove" action="{!remove}"/>                   
                    </apex:column>
                    <apex:column value="{!c.prodObj.name}" headerValue="Product Name" width="390px"/>
                    <apex:column value="{!c.prodObj.ProductCode}" headerValue="Product code"/>
                    <apex:column value="{!c.prodObj.Category__c}" headerValue="Product Category" width="390px"/>
                    <apex:column value="{!c.pricebookObj.UnitPrice}" headerValue="Product Price"/>
                    <apex:column value="{!c.quantity }" headerValue="Quantity"/>

                     <apex:column headerValue=" amount"

                                     <apex:outputText  /> </apex:column
                </apex:pageBlockTable>                
           </apex:pageBlock>
     </apex:outputPanel>

my requirement is on click of Edit button, I should be able to insert quantity and able to add amount. like quantity * amount.

Please suggest me some idea so that I can solve my issue.

Thanks & Regards,

Amit_

DaveHDaveH

The easiest way to do it would be to have a boolean variable in your controller that controls whether the page is in "Edit" mode or "Read only" mode. You have certain fields check that variable to see if they should be rendered as input fields or just output fields. I modified your code below as a example.

 

<apex:outputpanel id="cartshow">           
        <apex:facet name="header"></apex:facet>  
            <apex:pageBlock id="myBlock" title="Selected items" id="cartsho" mode="readonly" rendered="{!rendered}">
                <apex:detail inlineEdit="true"/>
                <apex:pageBlockButtons >   
                    <apex:commandButton value="Remove Items" action="{!removeItem}"/>
                    <apex:commandButton value="Place Order" action="{!OrderPlaced}"/>
                    <apex:commandButton value="Edit" action="{!editOrder}" onclick="computeTotal" rerender="myBlock"/>
                </apex:pageBlockButtons>
                <apex:pageBlockTable value="{!selectedProd}" var="c" >
                    <apex:column headerValue="Select">
                        <apex:inputCheckbox value="{!c.isSelected}"/>
                    </apex:column>
                    <apex:column width="20px">
                        <apex:commandButton value="Remove" action="{!remove}"/>                   
                    </apex:column>
                    <apex:column value="{!c.prodObj.name}" headerValue="Product Name" width="390px"/>
                    <apex:column value="{!c.prodObj.ProductCode}" headerValue="Product code"/>
                    <apex:column value="{!c.prodObj.Category__c}" headerValue="Product Category" width="390px"/>
                    <apex:column value="{!c.pricebookObj.UnitPrice}" headerValue="Product Price"/>
					<apex:column headerValue="Quantity">
						<apex:inputField value="{!c.quantity }" rendered="{!isEditable == true}"/>
						<apex:outputField value="{!c.quantity }" rendered="{!isEditable == false}"/>
					</apex:column>
                     <apex:column headerValue=" amount"
                                     <apex:outputText  /> </apex:column
                </apex:pageBlockTable>                
           </apex:pageBlock>
     </apex:outputPanel>

 

You can see that the Quantity column has 2 fields that are conditionally rendered based on a variable in your controler named "isEditable". Obviously you can name it whatever you want as this is just an example. I also modified the edit button to re-render your page block so the columns get refreshed. Let me know if you have any questions.

Amit_Amit_

Hi Dave,

Thanks for your reply. and I have changed my code to make it work but some how its not working. i think somewere I am doing some mistake in rendering. can you please look at my code and can suggest me what change I should do. here is what I am doing :

<apex:commandButton value="Edit" onclick="methodOneInJavascript('Yes!')" />

onclick of Edit button I'm calling actionFunction method , My actionFuction is :

<apex:form >

         <apex:actionFunction action="{!methodOne}" name="methodOneInJavascript" rerender="showstate">
                    <apex:param name="firstParam" assignTo="{!state}" value="" />
         </apex:actionFunction>

</apex:form>

 

Controller Method called form actionFucntion :

 

public void setState(boolean n) {
        state = True;
    }
           
    public boolean getState() {
        return state;
    }
           
    public PageReference methodOne() {
        system.debug('methodOne called');
        state = True;
        system.debug('state value'+state);
        return null;
    }
           
    private boolean state = False;
}

and the assign the state value to actionFuction so that I can use it to render in Quantity to make it editable to noneditable.

<apex:column headerValue="Quantity" >
                        <apex:inputText value="{!c.quantity}" rendered="{!state}" />
                        <apex:outputText value="{!c.quantity}" rendered="{!state}"/>
</apex:column>

 

I guess I am doing some logical error. but I dont know how to correct it. Please help me to correct my logic.

 

Thanks & Regards,

Amit_

 

DaveHDaveH

From what I can see you really don't need to be using an actionFunction. The point of an actionFunction is so that you can invoke controller methods from javascript. You are just trying to call your actionFunction directly from the commanButton.

 

What you can do is either remove the actionFunction and just use the action and rerender attributes of the commandButton or you need to create a javascript function that calls your actionFunction. I put the second scenario below.

 

<apex:commandButton value="Edit" onclick="methodOneInJavascript('Yes!')" />
onclick of Edit button I'm calling actionFunction method , My actionFuction is :
<apex:form >
         <apex:actionFunction action="{!methodOne}" name="actionFunctionmethod" rerender="showstate">
                    <apex:param name="firstParam" assignTo="{!state}" value="" />
         </apex:actionFunction>
</apex:form>
<script type="text/javascript">
	function methodOneInJavascript(arg) {
		// This is where you would call your actionFunction
		// The name of the actionFunction is the function name used in javascript
		actionFunctionmethod(true);
	}
</script>