Visualforce - Beyond Basics Series 42 - Inline Edit with No Apex

How normally inlineEdit implemented in Visualforce ?

The best way to achieve inlineEdit for fields in Visualforce is using mode = 'InlineEdit' in PageBlock tag. This is the best and efficient way to do it. However, there's only one inconvenience, it opens up only one field for editing.
Then, user needs to click on each field to edit. So, what if user wants to edit all the fields in the row ?

How to edit all the fields in the row ?

When user double clicks a field in the row, then redirect to the same page with a Query Parameter that determines which row should be opened for Editing.

Where is the Code ?

	<apex:page standardController="Opportunity" recordSetVar="Opps">
	<!-- Local Variables -->
	<apex:variable var="EditId" value="{!IF($CurrentPage.parameters.EditRecordId!=Null,
	$CurrentPage.parameters.EditRecordId, Null)}"/>
	<apex:form>
	<apex:pageblock>
	<apex:pageBlockButtons rendered="{!EditId != Null}">
	<apex:commandButton value="Save" action="{!save}" reRender="None" />
	<apex:commandButton value="Cancel" action="{!cancel}"/>
	</apex:pageBlockButtons>
	<apex:pageBlockTable value="{!Opps}" var="Opp">
	<apex:column value="{!Opp.Name}" ondblclick="redirect('{!Opp.Id}')" rendered="{!EditId != Opp.Id}"/>
	<apex:column headerValue="Name" rendered="{!EditId == Opp.Id}">
	<apex:inputField value="{!Opp.Name}"/>
	</apex:column>
	<apex:column value="{!Opp.StageName}" ondblclick="redirect('{!Opp.Id}')" rendered="{!EditId != Opp.Id}"/>
	<apex:column headerValue="StageName" rendered="{!EditId == Opp.Id}">
	<apex:inputField value="{!Opp.StageName}"/>
	</apex:column>
	<apex:column value="{!Opp.CloseDate}" ondblclick="redirect('{!Opp.Id}')" rendered="{!EditId != Opp.Id}"/>
	<apex:column headerValue="CloseDate" rendered="{!EditId == Opp.Id}">
	<apex:inputField value="{!Opp.CloseDate}"/>
	</apex:column>
	<apex:column value="{!Opp.AccountId}" ondblclick="redirect('{!Opp.Id}')" rendered="{!EditId != Opp.Id}"/>
	<apex:column headerValue="AccountId" rendered="{!EditId == Opp.Id}">
	<apex:inputField value="{!Opp.AccountId}"/>
	</apex:column>
	</apex:pageBlockTable>
	</apex:pageblock>
	</apex:form>
	<script>
	function redirect(recId) {
	window.location.href = '{!$Page.testpage_22022017}?' + 'EditRecordId=' + recId +
	'&retURL=' + '{!$Page.testpage_22022017}';
	}
	</script>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub

Any Screenshots ?

Walk through in a video ?