How to do Inline Edit in custom Salesforce Visualforce Page?

Hello guys,

We all know that we can edit the value of a field by going to the Edit Page, edit it and Save it using the Save button. But Salesforce also provides an effective way of editing the value of a field. We can use to edit content in field. To create that in our Custom Visualforce Pages we have to write code for that. Let see one example on INLINE EDIT -

Visualforce Page :

<apex:page controller="InlineEditInVFController">
    <apex:form>
        <apex:pageBlock title="Account Information" >
            <apex:pageBlockTable value="{!acc}" var="a" title="Results" >
                <apex:inlineEditSupport showOnEdit="update, cancelButton" hideOnEdit="editButton" event="ondblclick" changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"></apex:inlineEditSupport>
                <apex:column headerValue="Name">
                    <apex:outputfield value="{!a.name}"/>
                </apex:column>
                <apex:column headerValue="id">
                    <apex:outputfield value="{!a.id}"/>
                </apex:column>
            </apex:pageBlockTable>
        </apex:pageBlock>
        <apex:commandButton id="update" action="{!quickUpdat}"value="UpdateRecord"></apex:commandButton>
    </apex:form>
</apex:page>

Apex Class:

public class InlineEditInVFController {
    public List <Account> acc {get;set;}
    public InlineEditInVFController(){
        acc= Database.query('select Name,id from Account Limit 10');
    }
    public PageReference quickUpdat(){
        try{
            update acc;
            return ApexPages.CurrentPage();
        }
        catch(Exception e) {
            System.debub("@@@Error");
            return null;
        }
    }
}

Thanks.

Happy Coding.