+ Start a Discussion
louisa barrett 7louisa barrett 7 

Visualforce select all option with inline editing

Hi,
I would like to add a select all option to a column(On_Site__c) that is bound to an outputfield on my VF page which is currently using inline editing
This is the page code:

<apex:page standardController="Build_Up_Checklist__c" extensions="BuildUpChecklist" showHeader="false" sidebar="false">
    <style type="text/css">
        .pbTitle {
        white-space: nowrap;
        }
    </style>
    <table width="98%" border="0" cellpadding="0" cellspacing="0">
        <tr><td align ="right"><a href="javascript:window.print();">Print</a></td></tr>
    </table>
    <apex:form>
        <apex:pageBlock title="Product list for: {!Build_Up_Checklist__c.Build_Up_Checklist_Opportunity__r.Name} - ({!Build_Up_Checklist__c.Opportunity_EDU__c})">
            <apex:outputPanel >
                <apex:commandbutton value="Save" action="{!updateOLIs}" id="saveButton" style="display:none"/>
                <apex:commandButton value="Cancel" action="{!cancelUpdateOLIs}" id="cancelButton" style="display:none"/>
            </apex:outputPanel>
            <apex:pageblocktable value="{!OppProducts}" var="oli">
                <apex:column value="{!oli.PriceBookEntry.Name}" />
                <apex:column value="{!oli.Product_Notes__c}" />
                <apex:column value="{!oli.Quantity}"/>
                <apex:column headerValue="On Site"> 
                    <apex:outputField value="{!oli.On_Site__c}">
                        <apex:inlineEditSupport showOnEdit="saveButton, cancelButton" event="ondblclick" />
                    </apex:outputField>
                </apex:column>
                <apex:column value="{!oli.Replacement__c}"/>             
            </apex:pageblocktable>
        </apex:pageBlock>
    </apex:form>
</apex:page>


The editing and saving is working as intended, but it would be nice if the user didn't have to check the 'On_Site__c' checkbox on each row.

Many thanks
 
Alain CabonAlain Cabon
Hi,

The common idea is to use an <apex:facet> for the column header and an onclick event with a small code in javascript (all is done on the client side).

<script type="text/javascript">
        function selectAllCheckboxes(obj,receivedInputID){
            var inputCheckBox = document.getElementsByTagName("input");
            for(var i=0; i<inputCheckBox.length; i++){
                if(inputCheckBox[i].id.indexOf(receivedInputID)!=-1){
                    inputCheckBox[i].checked = obj.checked;
                }
            }
        }
</script>
 
<apex:column headerValue="On Site"> 
      <apex:facet name="header"> 
          <apex:inputCheckbox onclick="selectAllCheckboxes(this,'inputId');"/> 
      </apex:facet>
      <apex:outputField value="{!oli.On_Site__c}"  id="inputId" >
           <apex:inlineEditSupport showOnEdit="saveButton, cancelButton" event="ondblclick" />
      </apex:outputField>
</apex:column>

But there is perhaps an interference wiht the <apex:inlineEditSupport> (should be tested).
 
louisa barrett 7louisa barrett 7
Hi,

Thank you for the response, I did  try that beforehand as I've used something similiar elsewhere. Unfortunately it doesn't work, after a little digging it looks like the checkbox on an outputfield when using the inLineEditSupport is actually an image until you double click it, so I'm not sure how you would get a 'Check all' option to work.
My next plan is to try an put a button on the column header which will call a function on the controller and update all the records that way.

Thank you for your suggestion