function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
sajm_2010sajm_2010 

Inline editing in the VF page, if using a repeater.

Hi, Can anybody help me in telling,  how to implement inline editing if records are coming in repeater on VF page. I want the functionality of the inline editing the same way, salesforce do.

 

Please help.

 

Thanks, in advance

Pradeep_NavatarPradeep_Navatar

Inside repeater you have to take two div in one div put record fields using <apex:outputField> and in second div put record fields using <apex:inputField> by default set style="display:none" of DIV one and style="display:block" of DIV second. The important point is to take record  id in DIV id because it will be always different and you don't need to worry about dynamic id of the DIV. Onclick of the DIV call a javaScript function with recordId as parameter and you can use this id as Row Id. You can pass this recordId in controller to use.

 

 

Please find below is the sample code:

 

<apex:outputPanel id="updateDataPnl">

    <apex:repeat value="{!account}" var="a">

        <divhttp://a.id/" target="_blank">a.id}" ondblclick="HideShow('show',this,'{!a.id}')" style="display:block" width="30%">

           <a href="#"http://a.id/" target="_blank">a.id}')"><apex:outputField value="{!a.Name}"/></a>

                                </div>

        <divhttp://a.id/" target="_blank">a.id}" style="display:none" width="30%">

                                                <a href="#"http://a.id/" target="_blank">a.id}')"><apex:inputField value="{!a.Name}"/></a>

                                                <input class="btn" value="Save" onclick="UpdateRec('{!a.id}','{!a.Name}')"/>

                                                <input class="btn" value="Cancel" onclick="HideShow('Hide',this,'{!a.id}')"/>

        </div>

    </apex:repeat>

</apex:outputPanel>

 

<script>

    function HideShow(mode,rid,aid)

    {

        var rowid = rid.id;

        var strid1 = 'OutputLbl:' + aid;

        var strid2 = 'InputLbl:' + aid;

        if(mode == 'show' && rowid == strid1 )

        {

            document.getElementById(strid1).style.display='none';

            document.getElementById(strid2).style.display='block';

        }

        if(mode == 'Hide')

        {

            document.getElementById(strid1).style.display='block';

            document.getElementById(strid2).style.display='none';

        }

    }

</script>

 

<apex:actionFunction name="UpdateRec" action="{!UpdateEditedRec}" rerender="updateDataPnl" >

    <apex:param assignTo="{!propId}" value=""/>

    <apex:param assignTo="{!propName}" value=""/>

</apex:actionFunction>

</apex:form>

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved.