Skip to content

Instantly share code, notes, and snippets.

@abhinavguptas
Created January 16, 2012 12:53
Show Gist options
  • Save abhinavguptas/1620745 to your computer and use it in GitHub Desktop.
Save abhinavguptas/1620745 to your computer and use it in GitHub Desktop.
Using Twin Box MultiSelect Jquery Plugin in Visualforce
<apex:page controller="twinBoxMultiSelectList_Ctlr" showHeader="false" sidebar="false">
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" />
<apex:includeScript value="{!URLFOR($Resource.twinBoxMultiSelectList, 'plugin.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.twinBoxMultiSelectList, 'plugin.css')}"/>
<style>
.boldLabel {
font-weight : bold;
font-size : 110%;
}
</style>
<apex:sectionHeader subtitle="Twin Box Multi Select List" title="Demo"/>
<apex:form id="contactForm">
<apex:pageBlock >
<apex:pageBlockButtons location="top">
<apex:commandButton action="{!onContactSelection}" value="Done Selecting" reRender="contactForm"/>
</apex:pageBlockButtons>
<apex:selectList id="contactPickList" value="{!selectedContactIds}"
multiselect="true">
<apex:selectOptions value="{!contactOptions}"/>
</apex:selectList>
<apex:pageBlockSection columns="1" title="Search Contacts">
<apex:outputPanel >
<input type="text" value="" id="searchTextBox"/>
</apex:outputPanel>
</apex:pageBlockSection>
<apex:pageBlockSection columns="1" title="Select Contacts">
<apex:pageMessage summary="Please click on the Contact name in the lists to swap" severity="info" strength="1" />
<apex:panelGrid columns="2">
<apex:outputLabel value="Available Contacts" styleClass="boldLabel"/>
<apex:outputLabel value="Selected Contacts" styleClass="boldLabel"/>
<apex:outputPanel id="availableContactsContainer" />
<apex:outputPanel id="selectedContactsContainer" />
</apex:panelGrid>
</apex:pageBlockSection>
<apex:pageBlockSection title="Selected Contacts">
<apex:pageBlockTable value="{!selectedContacts}" var="selCon" rendered="{!NOT(ISBLANK(selectedContacts))}">
<apex:column value="{!selCon.Id}"/>
<apex:column value="{!selCon.Name}"/>
</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:pageBlock>
<script type="text/javascript">
$j = jQuery.noConflict();
$j(document).ready(
function() {
$j('select[id$=contactPickList]').twinBoxMultiSelectList({
availableList : 'span[id$=availableContactsContainer]',
selectedList : 'span[id$=selectedContactsContainer]',
searchBox : '#searchTextBox',
styles: {
width: '220px'
}
});
});
</script>
</apex:form>
</apex:page>
public with sharing class twinBoxMultiSelectList_Ctlr {
// Selectoptions for picklist
public List<SelectOption> contactOptions {get;set;}
// User selection from UI
public List<Id> selectedContactIds {get;set;}
// Used to show select contacts
public transient List<Contact> selectedContacts {get;set;}
public twinBoxMultiSelectList_Ctlr() {
contactOptions = new List<SelectOption>();
Contact[] contacts = [Select Id, Name from Contact];
for (Contact c : contacts) {
contactOptions.add(new SelectOption(c.Id, c.Name));
}
}
public void onContactSelection() {
if (selectedContactIds != null && !selectedContactIds.isEmpty()) {
selectedContacts = [Select Id, Name from Contact where Id IN :selectedContactIds];
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment