Visualforce apex:inlineEditSuport on Lookup/Reference Field - salesforce

Question

I have an object with a lookup field, and want to use InlineEditSupport on that field within a VisualForce page.
However the apex:outputField tag renders the lookup field as a hyperlink, which overrides the inlineEditSupport logic.
For example
<apex:page standardController="Contact">
<apex:outputField value="{!Contact.LastName}">
<apex:inlineEditSupport event="ondblclick"/>
</apex:outputField>
<apex:outputField value="{!Contact.AccountId}">
<apex:inlineEditSupport event="ondblclick"/>
</apex:outputField>
</apex:page>
In this example, the LastName field would be rendered by the apex:outputField tag, and convert to an editable field when double clicked.
However the 'Account' field renders as a hyperlink to the Account record itself, which takes action before the click event can fire.
I can make this work by using an alternate javascript event - i.e. mouseover, however that's not particularly user friendly. I need to maintain a consistent user experience and use a double click action.
Is there any way to prevent the Account field from rendering as a link, or a way of inserting an 'edit' icon next to it somehow?

Answer 1

I ran into the same problem with inline editing in a pageBlockTable format. We felt this was not user friendly.
I used JavaScript (jQuery) to convert the link into plain-text and make this behave like other inlineEditable fields:
/// Overwrite default functionality for lookup columns (links to object page)
/// Change to text-only of name to prevent navigation away
$('TABLE[id$=checklistTable] TBODY TR TD A[id^=lookup]').each(function() {
var text = $(this).html();
$(this).parent().html(text);
});
This will convert all SalesForce lookup fields within the matching jQuery selector. It is also dependent upon the resulting output HTML creating anchor links that have ID's starting with "lookup" (meaning SalesForce could change/break this with future updates).

Answer 2

This might not be the simplest way but what I've done before is to create a select list of the names of the records in the lookup. I think this is nicer for the user anyway than a salesforce lookup box (unless there are hundreds, I suppose). What you would need to do is create a list of select options in the controller, and assign them to some variable like theList, and then reference {!theList} where you want to put it (roughly; see documentation). The select options would need to have the record name as label and the record id as value. Then you can assign the Id directly to the lookup field.

Answer 3

Did you try with salesforce doc?
<apex:page standardController="Contact">
<apex:form >
<apex:pageBlock mode="inlineEdit">
<apex:pageBlockButtons >
<apex:commandButton action="{!edit}" id="editButton" value="Edit"/>
<apex:commandButton action="{!save}" id="saveButton" value="Save"/>
<apex:commandButton onclick="resetInlineEdit()" id="cancelButton" value="Cancel"/>
</apex:pageBlockButtons>
<apex:pageBlockSection >
<apex:outputField value="{!contact.lastname}">
<apex:inlineEditSupport showOnEdit="saveButton, cancelButton" hideOnEdit="editButton" event="ondblclick" changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
</apex:outputField>
<apex:outputField value="{!contact.accountId}"/>
<apex:outputField value="{!contact.phone}"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>