Tag Archives: Multiselect Picklist

Display Multiselect Picklist as Checkboxes in Visualforce Page

Biswajeet   February 2, 2014   No Comments on Display Multiselect Picklist as Checkboxes in Visualforce Page

In below example I’ve created a custom multiselect picklist “Interests” on “Student” custom object. I’m displaying multiselect picklist to checkboxes in visualforce page.

Multiselect Picklist Field:

Controller:

public class SampleControllerExtn {
    public Student__c student {get;set;}
    
    public SampleControllerExtn(ApexPages.StandardController stdCtrl) {
        student = (Student__c)stdCtrl.getRecord();
    }
    
    public void saveStudent(){
        Upsert student;
    }
    
    //get the multi-select pick list values
    public List<SelectOption> getMSPicklist {
        get {
            List<SelectOption> options = new List<SelectOption>();
            for( Schema.PicklistEntry obj : Student__c.Interests__c.getDescribe().getPicklistValues()) {
                options.add(new SelectOption(obj.getValue(), obj.getLabel()));
            } 
            return options;
        }  
        set;
    }
    
    //get and set the multi-select pick list as checkboxes
    public String[] MSItems { 
        get {
            List<String> selected = new List<String>();
            List<SelectOption> options = this.getMSPicklist;
            for(SelectOption obj : options) {
                if (this.student.Interests__c !=null && this.student.Interests__c.contains(obj.getValue()))
                    selected.add(obj.getValue());
            }
            return selected;
        }public set {
            String selectedCheckBox = '';
            for(String s : value) {
                if (selectedCheckBox == '') 
                    selectedCheckBox += s;
                else selectedCheckBox += ';' + s;
            }
            student.Interests__c = selectedCheckBox;
        }
    } 
}

Visualforce Page:

<apex:page standardController="Student__c" extensions="SampleControllerExtn" tabStyle="Student__c">
    <apex:form>
        <apex:pageBlock>
            <apex:pageblockSection title="Student Details" columns="1" collapsible="false">
                <apex:inputfield value="{!student.name}"/>
                <apex:selectcheckboxes layout="pageDirection"  value="{!MSItems}" label="Interests">                   
                    <apex:selectoptions value="{!getMSPicklist}"/>      
                </apex:selectcheckboxes>
            </apex:pageblockSection>
            <apex:pageblockButtons>
                <apex:commandButton value="Save" action="{!saveStudent}"/>                
            </apex:pageblockButtons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Output:

Custom Multiselect Picklist Field in Visualforce Page

Biswajeet   February 1, 2014   No Comments on Custom Multiselect Picklist Field in Visualforce Page

Controller:

public class SampleController {
    
    Set<String> picklistValues = new Set<String> {'New York','California','Texas','Los Angeles','Chicago','San Francisco', 'Washington'};
    Public List<String> leftSelected {get;set;}
    Public List<String> rightSelected {get;set;}
    Set<String> leftValues = new Set<String>();
    Set<String> rightValues = new Set<String>();
    
    public SampleController(){
        leftSelected = new List<String>();
        rightSelected = new List<String>();
        leftValues.addAll(picklistValues);
    }
    
    public PageReference getSelect(){
        rightSelected.clear();
        for(String s : leftSelected){
            leftValues.remove(s);
            rightValues.add(s);
        }
        return null;
    }
    
    public PageReference getDeselect(){    
        leftSelected.clear();
        for(String s : rightSelected){
            rightValues.remove(s);
            leftValues.add(s);
        }
        return null;
    }
    
    public List<SelectOption> getDeselectedValues(){
        List<SelectOption> options = new List<SelectOption>();
        List<String> objList = new List<String>();
        objList.addAll(leftValues);
        objList.sort();
        for(String s : objList){
            options.add(new SelectOption(s,s));
        }
        return options;
    }
    
    public List<SelectOption> getSelectedValues(){
        
        List<SelectOption> options = new List<SelectOption>();
        List<String> objList = new List<String>();
        objList.addAll(rightvalues);
        objList.sort();
        for(String s : objList){
            options.add(new SelectOption(s,s));
        }
        return options;
    }
}

Visualforce Page:

<apex:page controller="SampleController">
    <apex:form>
        <apex:panelGrid columns="3" id="abcd">
            <apex:selectList id="sel1" value="{!leftSelected}" multiselect="true" style="width:100px" size="5">
                <apex:selectOptions value="{!DeselectedValues}" />
            </apex:selectList>
            
            <apex:panelGroup>
                <br/>
                <apex:image styleClass="picklistArrowRight" value="/s.gif">
                    <apex:actionSupport event="onclick" action="{!getSelect}" reRender="abcd"/>
                </apex:image>
                <br/><br/>
                <apex:image styleClass="picklistArrowLeft" value="/s.gif">
                    <apex:actionSupport event="onclick" action="{!getDeselect}" reRender="abcd"/>
                </apex:image>
            </apex:panelGroup>
            <apex:selectList id="sel2" value="{!rightSelected}" multiselect="true" style="width:100px" size="5">
                <apex:selectOptions value="{!SelectedValues}" />
            </apex:selectList>
        </apex:panelGrid>
    </apex:form>
</apex:page>

Output: