[SalesForce] Select and edit wrapper rows in pageBlockTable using Javascript

I have a custom visualforce page that displays a list of records in an apex pageblocktable, and have input fields in the cells to change field values of the records. I also have a column of checkboxes to select records from the table( https://developer.salesforce.com/page/Wrapper_Class)

I want to select some records, and when I change one field value of a selected record, then that field of all the other selected records should also reflect that change. Is there a way to do this only on the client side with javascript?

eg: There are 10 records (rows) in the pageblocktable and each record has 3 fields(columns), Name, age and salary. If I select 5 rows (using the checkbox), and change the salary of one row to 50000, then all 5 selected rows should show a salary of 50000.

Best Answer

It can be done using client side javascript. To get exact Id of the element, you can use "Inspect Element" option in chrome. Basically salesforce will add the entire path of parent apex elements in the ID of child element. For example check sample code below,

<apex:page id="page">
    <apex:form id="form">
        <apex:pageblockTable id="table">
            <apex:inputField value="{!testvalue}" id="field"/>
        </apex:pageblockTable>
    </apex:form>
</apex:page>

It will result in final Id of the field as

page:form:table:field

instead of simple "field". If you are using rerender on the field using apex tags, you can directly use Id "field". But if you are using javascript, you need to use the full ID, which is the actual Id.

Related Solutions

[SalesForce] Inline edit of PageBlockTable only saving one record

Instead of using the "column value" method of defining the records, use the column to render an outputfield, like this:

<apex:pageBlockTable value="{!attended}" var="attendee">
     <apex:inlineEditSupport showOnEdit="saveButton, cancelButton" 
                    hideOnEdit="editButton" event="ondblclick" 
                    changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
     <apex:column headerValue="Client">
         <apex:outputfield value="{!attendee.Client__c}"/>
     </apex:column>
     <apex:column headerValue="Attended">
         <apex:outputfield value="{!attendee.Attended__c}"/>
     </apex:column>
 </apex:pageBlockTable>

You may also want to add the inlineeditsupport into each of the Output fields to get more granular support.

[SalesForce] Editing multiple rows in pageblocktable simultaneously

On keypress/keydown/change of your inputFields (whichever you prefer) you should call an action function to sync values. The idea is to pass along which field you're updating, and which record to sync from, and loop through your records to identify selected records and update the proper field. This may be a bit clunky but I hope I'm conveying the idea appropriately.

<apex:actionFunction name="sync" action="{!sync}">
    <apex:param name="field" assignTo="fieldToUpdate" value="" />
    <apex:param name="value" assignTo="selectedId" value="" />
</apex:actionFunction>

<!-- using i as an example for your table values -->
<apex:inputField value="{i.Phone}" onChange="sync('phone', '{i.Id}')" />



List<WrapperObject> WrappedObjectList = (however you fill your list);

public string fieldToUpdate {get;set;}
public string selectedId {get; set;}
public string fieldValue{
    get{
        //grab the value from the selected object
        for(WrappedObject o : WrappedObjectList){
            if(o.Id == selectedId){
                if(fieldToUpdate == "phone"){
                    return o.Phone;;
                }
            }
        }
        return "";
    }
}

public PageReference sync(){
    for(WrappedObject o : WrapperObjectList){
        //update all selected objects with that value
        if(o.Selected){
            if(fieldToUpdate == "phone"){
                o.Phone = fieldValue;
            }
        }
    }
    return null;
}

Hope this helps! c:

Best Answer

Related Solutions

[SalesForce] Inline edit of PageBlockTable only saving one record

[SalesForce] Editing multiple rows in pageblocktable simultaneously

Related Topic