function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ministe2003ministe2003 

Hide buttons only used for Inline Editing

Hello,

InlineEditing allows us to show and hide buttons during and after editing inline.  However buttons I want hidden by default are displayed.

 

For instance, I have several buttons I want to show by default and hide when editing, plus a Save and Cancel button that I want hidden unless told to display by inline editing.  But when the page loads all of these buttons are displayed.  How am I supposed to make Save and Cancel hidden on page load, surely I dont have to use JS or CSS for that, it must be part of the inline editing capability surely?!

 

 

MORE INFO: Im not using a standard controller everything in the page is handled in a class.  Clicking the Save button (which calls a save method which updates the database, as you'd expect) doesnt save any changes made in inline editing.

I'm starting to think that inline editing will only work with a Standard Controller...

Best Answer chosen by Admin (Salesforce Developers) 
KevinLaurenceKevinLaurence

Hi,

 

Try adding style="display: none;" to the apex:commandButton components that you wish to hide when the page is loaded. For example:

 

 

<apex:commandButton action="{!save}" value="Save" id="saveButton" style="display: none;"/>

 

That worked for me when using a standard controller.

 

 

 

All Answers

vhanson222vhanson222

Have you tried using a conditional 'Rendered' attribute in the commandButton?

 

you may also find this article helpful: http://www.forcetree.com/2009/11/inline-editing-in-visualforce.html

 

 

/***** Controller *****/
public boolean ShowSave { get; set; }

public void InlineEdit()
{
    ShowSave = true;
}

/***** Visualforce Page *****/
<apex:form id="theForm">
  <apex:commandButton value="Save" action="{!Save}" title="Save" Rendered="{!ShowSave}" />
  <apex:outputLabel value="Dbl click to see save button"/>
    <apex:actionSupport event="ondblClick" action="{!InlineEdit}" rerender="theForm" />
  </apex:outputLabel>
</apex:form>

 

<apex:actionSupport event="ondblclick" action="{!inlineedit}" rerender="outpanel"/>
ministe2003ministe2003

I'm using Inline Editing as enabled by the Spring 11 update, not any customized way of doing it.
Pradeep_NavatarPradeep_Navatar

Tryout this sample code given below to hide the buttons after inline editing :

<script>
function HideShow(rId,Id,mode)
{
    var rowId = rId;
    var accountId = Id;
    var editrowId = 'edit:'+ Id;
    if(mode == 'n')
    {
                    document.getElementById(rowId).style.display = 'none';
                    document.getElementById(editrowId).style.display = 'block';
                    document.getElementById(pqr).style.display = 'none';
    }
    else if(mode == 'e')
    {
                    var rrowId = 'detail:'+ Id;
                    document.getElementById(rrowId).style.display = 'block';
                    document.getElementById(rowId).style.display = 'none';
    }
}
</script>
<input id="pqr" type="button" class="btn" value="save" onclick="HideShow('edit:{!a.id}','{!a.id}','e');savedata('{!a.id}');"/>
NK123NK123

I am facing the same problem where I need to show "Save" and "Cancel" button in inlineEdit Mode and then hide it when its not in that mode. Here is sample code:

 

apex:page standardController="QuoteChargeItem__c" extensions="xxxDetailController"> apex:form >

 

apex:pageBlock title="{!$ObjectType.QuoteChargeItem__c.label}" mode="inlineEdit"> apex:pageBlockButtons >
 

apex:commandButton action="{!edit}" id="editButton" value="Edit"
 

apex:commandButton action="{!delete}" id="db" value="Delete"
 

 

apex:commandButton action="{!URLFOR($Action.QuoteChargeItem__c.Clone,QuoteChargeItem__c.id)}" id="cb" value="Clone" apex:commandButton action="{!save}" id="saveButton" value="Save"
 

apex:commandButton onclick="resetInlineEdit()" id="cancelButton" value="Cancel"
 

/apex:pageBlockButtons>
 

 

apex:pageBlockSection showHeader="true" title="Information" columns="2">
 

apex:outputField value="{!QuoteChargeItem__c.Fin_Code__c}">
 

apex:inlineEditSupport showOnEdit="saveButton, cancelButton" hideOnEdit="editButton, db, cb" event="ondblclick" changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"
 

/apex:outputField>
 

apex:outputField value="{!QuoteChargeItem__c.Rate_Base__c}"
 

apex:pageBlockSectionItem 
 

apex:outputField value="{!QuoteChargeItem__c.Name}" rendered="false"
 

apex:pageBlockSectionItem 
 

/apex:pageBlockSection>
 

 

/apex:pageBlock>
 

 

apex:page>

/apex:form>
 
ministe2003ministe2003

I get the feeling this feature has been rushed out, I shouldnt have to write css or script to hide buttons, it should handle it.

Does the Save button work on your page?  I imagine it will because you have a standard controller.  Doesnt save anything on mine because I'm using a class instead - another oversight.  If it only works with a standard controller the documentation should say so!
KevinLaurenceKevinLaurence

Hi,

 

Try adding style="display: none;" to the apex:commandButton components that you wish to hide when the page is loaded. For example:

 

 

<apex:commandButton action="{!save}" value="Save" id="saveButton" style="display: none;"/>

 

That worked for me when using a standard controller.

 

 

 

This was selected as the best answer
Bhawani SharmaBhawani Sharma

I know your issue has been resolved but still I would like to share some good experience with inline editing:\

 

You can use the following the show and hide the buttons whatever you want:

 

 

<apex:page standardController="Contact" extensions="SaveWithInlineEdit">
    <apex:form >
        <apex:pageBlock mode="inlineEdit">
        	<apex:pageMessages />
            <apex:pageBlockButtons >
                <apex:commandButton action="{!edit}" id="editButton" value="Edit"/>
                <apex:commandButton action="{!saveDetail}" 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>
</apex:page>

 

 
WeipingWeiping

This works for me:

<apex:commandButton action="{!save}" value="Save" id="saveButton" style="display: none;"/>

 

Thanks a lot for the post.

 

Weiping
NinadNinad

Hi Bhawani,

 

My problem with this is bit different there is one inline VF page where i am showing a list in Page Block tabel having inline edit enabled when ever i double click on those filed its inline editing working showing the Save and Cancel button as it was expected but if that list is updated inline editing showonclick event doest works.

 

Can you please suggest something?
Abhishek Pal 33Abhishek Pal 33
Hello Everyone,
Requirement:-

I have displayed the rows in a table and using inlineEditSupport tag in the output field tag of salesforce. I will check the checkbox corresponding to each row whenevr I edit any values in the row.

I am stuck in how to uncheck the checkbox when I click on undo button?  

For this I am using resetFunction and I am passsing this into it but it is giving [object window] in the logs which I think is a global window object.
How I could find which row is edited by inlineEditSupport tag so that I can uncheck the checkbox on undo button.?

Please help. Thanks in advance.

-Abhishek
 
sandeep@Salesforcesandeep@Salesforce

Thanks KevinLaurence and Bhawani.