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: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="{!}"/>
                <apex:column headerValue="id">
                    <apex:outputfield value="{!}"/>
        <apex:commandButton id="update" action="{!quickUpdat}"value="UpdateRecord"></apex:commandButton>

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(){
            update acc;
            return ApexPages.CurrentPage();
        catch(Exception e) {
            return null;


Happy Coding.