Salesforce: Selection all of elements in the table

Sometimes we need to show list of SObjects on VisualForce page, and want to allow users to mass process these records, by allowing them to selects records which they want to delete or clone or make on them any other action needed.

First we declare wrapper object for this purpose like following:


public class CallModel{
public Boolean isSelected { get; set; }
public Call__c record { get; set; }
public CallModel(){
isSelected = false;
}
public CallModel( Call__c call ){
isSelected = false;
record = call;
}
}

Property isSelected is responsible for keeping current state of record: whether user has selected this particular record or not.

Property record keeps reference to actual custom SObject record.

Constructor without arguments just sets isSelected property to false while constructor with custom SObject record argument stores that argument in record property.

Then we declare some method which would return list of wrapper object records like this:


public List<CallModel> getCallModels() {
List<CallModel> result = new List<CallModel>();
for ( Call__c c : [ select Id, Name, Start__c, Time__c, Incoming__c, Successful__c, End__c, Start_Time__c, End_Time__c, Subscriber_Name__c from Call__c] ) {
result.add( new CallModel( c ) );
}
return result;
}

In the listing SOQL query is present, which retrieves actual records. If you would like to show your custom object records, you have to change name of my custom object to yours, if your custom object is called “YourCustomObject__c” then you have to change “Call__c” to “YourCustomObject__c” in the listing shown. Also, if we show only Name field we could reduce SOQL query to “[ select Id, Name from Call__c]”.

Also we need Apex:PageBlockTable on VisualForce page to show these records. We need one column shown first with selection status checkboxes and at least one or more columns with object fields.


<apex:PageblockTable value="{!callModels}" var="callmodel">
<apex:column >
<apex:facet name="header">
<apex:actionRegion >
<apex:inputCheckbox styleclass="headerCheckboxSelectAll" />
</apex:actionRegion>
</apex:facet>
<apex:inputCheckbox styleclass="itemCheckboxSelection" value="{!callmodel.isSelected}"/>
</apex:column>
<apex:column headerValue="Name">
<apex:outputField value="{!callmodel.record.name}"/>
</apex:column>
</apex:PageblockTable>

In this listing only one custom object field is shown, however, if you could guess, I use more than one field on my page, but the rest of them look quite similar to field shown.

When everything is ready we can move to actual binding header checkbox click to javascript function which would check all of item checkboxes like following.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
$ = jQuery.noConflict();

function reinitCheckboxFunctionality() {
var $selChkbxs = $("input.itemCheckboxSelection").click(function() {
var checkedCount = $selChkbxs.filter(":checked").length,
$headerCheckbox = $("input.headerCheckboxSelectAll");
if (checkedCount === 0)
$headerCheckbox.prop("checked", false);
else if (checkedCount == $selChkbxs.length)
$headerCheckbox.prop("checked", true);
}),
$headerCheckbox = $("input.headerCheckboxSelectAll").click(function() {
$selChkbxs.prop("checked", this.checked);
});
$headerCheckbox.prop("checked", false);
};
jQuery( document ).ready( function() {
reinitCheckboxFunctionality();
} );
</script>

Hope you like this. Click “like” to let me know this fact 🙂

This entry was posted in controller, model, Posts in English, salesforce, selection, table, visualforce and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s