+ Start a Discussion
DJ Rock your own styleDJ Rock your own style 

Inline editing in visualforce page

Hi All,

 

I am trying to achieve inline editing feature for a requirement.

 

I have a sample code as below :

 

<apex:page standardController="Contact">  
 <apex:form >  
 <apex:pageBlock mode="inlineEdit">  
     <apex:pageBlockButtons >  
     <apex:commandButton action="{!edit}" id="editButton" value="Edit"/>  
     <apex:commandButton action="{!save}" id="saveButton" value="Save"/>  
     <apex:commandButton onclick="resetInlineEdit()" id="cancelButton" value="Cancel"/>  
     </apex:pageBlockButtons>  
 <apex:pageBlockSection >  
     <apex:outputField value="{!contact.lastname}">  
         <apex:inlineEditSupport showOnEdit="saveButton, cancelButton"  
             hideOnEdit="editButton" event="ondblclick"  
             changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>  
     </apex:outputField>  
     <apex:outputField value="{!contact.accountId}"/>  
     <apex:outputField value="{!contact.phone}"/>  
 </apex:pageBlockSection>  
 </apex:pageBlock>  
 </apex:form>  
 </apex:page>

 

The only thing that i have a problem is that in order to change a contact i have to append the url everytime with a contact id.

 

That works only in case of one record.


I have a visual force page, which displays a lot of contact records in a pageblocksection. How would i pass the id for the record i am editing and saving to this, as i would have many records.

 

I do not want to implement "REPEAT TAG" in my code.

 

Could you please help me out with this requirement

 

Thanks,

Dave.

Chamil MadusankaChamil Madusanka

Try this example,

 

<apex:page sidebar="false" controller="ContactController"> 
    
 
    <p/>
    
    <apex:pageMessages />
    <apex:form >    
    
    <apex:actionFunction name="saveEdit" action="{!saveEdit}"/>
        
    <apex:pageBlock >
    <apex:outputPanel id="employeeList">
    <table>
        <tr>
            <th style="width:40px"> </th>
            <th style="width:40px"> </th>
            <th style="width:90px">Last Name</th>
            <th style="width:90px">Email</th>
            <th>Employee ID</th>
        </tr>
        <apex:repeat value="{!employees}" var="e">
        <tr style="height:20px">
            <apex:outputPanel id="editRow" layout="none" rendered="{!e.Id == editContact.Id}">
                <td><apex:commandLink action="{!cancelEdit}" rerender="employeeList">Cancel</apex:commandLink></td>
                <td><apex:commandLink action="{!saveEdit}" rerender="employeeList">Save</apex:commandLink></td>
                <td><apex:inputField rendered="{!e.Id == editContact.Id}" value="{!editContact.LastName}"/></td>
                <td><apex:inputField rendered="{!e.Id == editContact.Id}" value="{!editContact.email}"/></td>
             <td><apex:inputField rendered="{!e.Id == editContact.Id}" onkeypress="if (event.keyCode == 13) saveEdit()" value="{!editContact.Employee__c}"/></td>
            </apex:outputPanel>
            <apex:outputPanel id="viewRow" layout="none" rendered="{!e.Id != editContact.Id}">
                <td>
                    <apex:commandLink action="{!del}" onclick="return confirm('Are you sure you want to delete this Employee?')">Del
                        <apex:param name="delid" value="{!e.Id}"/>
                    </apex:commandLink>
                    
                </td>
                <td>
                    <apex:commandLink action="{!editcon}" rerender="employeeList">Edit <apex:param name="editid" value="{!e.id}"/>
                    </apex:commandLink>
                </td>
                <td>{!e.LastName}</td>
                <td>{!e.email}</td>
                <td>{!e.Employee__c}</td>
            </apex:outputPanel>
        </tr>
        </apex:repeat>
    </table>
    </apex:outputPanel>
    </apex:pageBlock>

    </apex:form>
    
</apex:page>

 

public class ContactController {

    public ContactController(ApexPages.StandardController controller) {
    
        

    }
String theId = ApexPages.currentPage().getParameters().get('id');


   public Contact newEmployee { get; set; }
    
    public Contact editContact { get; set; }

    public ContactController () {
        newEmployee = new Contact();
    }
    
    public Contact[] getEmployees() {
    System.Debug('NAME ::: '+theId);
       
        return [Select c.LastName, c.Id, c.Employee__c, c.Email, (Select Id, Name From Employees__r) From Contact c WHERE Employee__c=:ApexPages.currentPage().getParameters().get('id')];
    }
    
    public String getParam(String name) {
        return ApexPages.currentPage().getParameters().get(name);   
    }
    
    public PageReference add() {
        try {
            INSERT newEmployee;
            newEmployee = new Contact();
        } catch (Exception e) {
            ApexPages.addMessages(e);
        }
        return null;
    }
     
    public PageReference del() {
        try {
            String delid = getParam('delid');
            Contact employee = [SELECT Id FROM Contact WHERE ID=:delid];
            DELETE employee;
        } catch (Exception e) {
            ApexPages.addMessages(e);
        }
        return null;
    }
    
    public PageReference editcon() {
        String editid = getParam('editid');
        editContact = [SELECT Name, LastName, email,Employee__c FROM Contact WHERE id=:editid];
        return null;
    }
    
    public PageReference cancelEdit() {
   // System.Debug('GETURL ::: '+ApexPages.currentPage().getUrl());
        editContact = null;
        return null;
    }
    
    public PageReference saveEdit() {
        try {
            UPDATE editContact;
            editContact = null;
        } catch (Exception e) {
            ApexPages.addMessages(e);
        }
        return null;
    }

}

 If a reply to a post answers your question or resolves your problem, please mark it as the solution to the post so that others may benefit.