You need to sign in to do that
Don't have an account?
sajm_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
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.