+ Start a Discussion

Urgent !!! How to display empty multiselect rows dynamically in vf page

Hi All,

i am facing one issue where i need to add empty rows dynamically in vf page on button click. But it is not happening. Currently when i am clicking addrow button it is copying values from previous rows and displaying. And if i add some new values in 2nd row and then click addrow, all the rows are getting filled with all the values selected.

Below are the screenshot for clarification -

1. Filled up the first filled from multiselect and clicked addrow button -

User-added image

2. In the 2nd row i selected a new value from multiselect and clicked addrow. After clicking all the 3 rows got filled up with all the data which i dont want. I want everytime i select a new empty row should get generated.

User-added image

User-added image

Please help . Below is the apex class - Let me know if vf page code is required.

    public with sharing class RFPController{

        public RFP__c accounts;
            public Custom_Package__c del;
            public List < Custom_Package__c > addattendeeList {get;set;}
            public List < Custom_Package__c > delattendeeList {get;set;}
            public List < Custom_Package__c > attendeeList {get;set;}
            public Integer totalCount {get;set;}
            public Integer rowIndex {get;set;}
            public Integer deleterowIndex {get;set;}
            public List < Custom_Package__c > delAttendees {get;set;}
            public Boolean isRerender{get;set;}
            //public String S {get;set;}
             public Integer numberOfRowToRemove { get; set; }
             public String selectedRowIndex{get;set;} 
            //public Integer count = 1;
             public Integer c{get; set;} 
             //public Integer counter{get;set;}
             private List<SelectOption> options;
             public List<SelectOption> AllName{get;set;}
             public List<SelectOption> AllDept{get;set;}
            // public String discountScheduleID { get; set; }
            public  string mark {get; set;}
            private List<Custom_Package__c>  acc {get;set;}
            public RFPController(ApexPages.StandardController controller) {

                    isRerender = false;
                    accounts =  (RFP__c )controller.getRecord();
                    String S = 'Select id, Name, Market__c, State__c, First_Issue__c,Last_Issue__c,Circulation__c,Space_Unit__c,Per_Unit_Open_Rate__c,Space_Discount__c from Custom_Package__c ';
                    //totalCount = attendeeList.size();
                    attendeeList  = Database.Query(S);
                    attendeeList = new List < Custom_Package__c >();
                    for(integer i=0;i<1;i++){ 
                    attendeeList .add(new Custom_Package__c ());
                    delattendeeList = new List < Custom_Package__c > ();
                    delattendees = new List < Custom_Package__c > ();
                    accounts.Rep_Name__c= Userinfo.getuserId();
                    AllName = getMarket();
                    Alldept = getDept();
            public void addRow() {
                    isRerender = true;
                   //addattendeeList = new List < Custom_Package__c > ();
                   // attendeeList.add(new Custom_Package__c ());
                    // c=c+1;
                  Custom_Package__c c = new Custom_Package__c ();


        public List<ID> discountScheduleID {
            get {
                if (discountScheduleID == null) {
                    discountScheduleID = new List<ID>();
                return discountScheduleID ;
          public List<SelectOption> getDept()
            List<SelectOption> options = new List<SelectOption>();
            //options.add(new SelectOption('Select','--Select--'));
            for(Custom_Package__c Proj  :[select Id, Name from Custom_Package__c ] )
                        options.add(new SelectOption(Proj.ID,Proj.Name));
            return options;

        public List<SelectOption> getMarket(){
            system.debug('^^^^^^^^ Entered' + discountScheduleID );
                List<SelectOption> options = new List<SelectOption>();
             for(Custom_Package__c Proj1  :[select Id,Market__c from Custom_Package__c where ID=:discountScheduleID  ] )
                        system.debug('3333333' + discountScheduleID ); 
                        options.add(new SelectOption(Proj1.ID,Proj1.Market__c ));
            system.debug('^^^^^^^^ Entered' + options.size());        
            return options;

        public string selectedMarketIds {get; set;}  
            public void FindAllName()
            AllName= new List<SelectOption>();
            AllDept= new List<SelectOption>();
            system.debug('!!!!!!! Entered');
            AllName = getMarket();
            Alldept = getDept();
            system.debug('&&&&&&& Entered' + AllName );


This is likely happening because you are using the same variable when generating your individual line.  If you could please include the Visualforce page, that would help.

NOTE: When adding code, please use the "Add a code sample" button (icon <>) to increase readability and make it easier to reference.
Hi Pcon,

PLease find below the page code- 

<apex:page standardController="RFP__c" extensions="RFPController" sidebar="false">

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <c:FixSfdcFocusHack />
    <c:JQuery />
    <c:Chosen />
    <style type="text/css">
        .fullWidth { width: 100%; }
        .flightDateRangeText { font-size: 90%;  }
        .bPageBlock .requiredForSubmit .requiredBlock {
        background-color: #FFD700;
        bottom: 1px;
        left: -4px;
        position: absolute;
        top: 1px;
        width: 3px;
        .bPageBlock .requiredForSubmitInput {
        height: 100%;
        position: relative;
    <script type="text/javascript">
    /* <![CDATA[ */
         *  Render Chosen on select elements with the chzn-select class specified.
    function renderChosen() {
    function focusChosen() {
         *  Render required marker on elements where class == "required".
    function renderRequired() {
        $j('.required').wrap('<div class="requiredInput" />').before('<div class="requiredBlock" />');
         *  Render required marker on elements with the specified ID.
    function renderRequiredComponentId(componentId) {
        $j(jq(componentId) + ' .required').wrap('<div class="requiredInput" />').before('<div class="requiredBlock" />');
    var rfpRequiredIds = ["dueDate", "clientsEstablishedPartners", "campaignMarketingObjectives", "campaignGoals",
                          "scopeOfCampaign", "mediaRequested", "otherMediaRequested", "campaignTotalNet", 
                          "primaryTargetAudience", "geographies", "servingPreference", "clientServedSpecifics", "adSizes",
                          "creativeType", "richMediaType", "percentageFlash", "percentageRichMedia", "flightDateRanges"];
    var optRequiredFieldIds = ["planCompletionDate", "clientsEstablishedPartners",
                               "campaignMarketingObjectives", "campaignGoals", "scopeOfCampaign", "mediaRequested", "campaignComments",
                               "primaryTargetAudience", "geographies", "customGeoDetail", "servingPreference", "clientServedSpecifics",
                               "adSizes", "creativeType", "richMediaType", "additionalCreativeNotes"];
    //SSirikonda - 07/25/2013 - Removing the field Plan_completion_Date__c as yellow marked field when
    //RFP type drop-down = SEM   
    /*var semRequiredFieldIds = ["planCompletionDate", "url", 
           "campaignMarketingObjectives", "campaignComments", "geographies", "customGeoDetail"];*/
    var semRequiredFieldIds = ["url", 
                               "campaignMarketingObjectives", "campaignComments", "geographies", "customGeoDetail"];
    function modifyRequired() {
        var type = $j('[id$="type"]').val();
        if (type == 'RFP') {
            $j.each(rfpRequiredIds, function(index, value) {
                var selector = '[id$="' + value + '"]';
        } else if (type == 'OPT') {
            $j.each(optRequiredFieldIds, function(index, value) {
                var selector = '[id$="' + value + '"]';
        } else if (type == 'SEM') {
            $j.each(semRequiredFieldIds, function(index, value) {
                var selector = '[id$="' + value + '"]';
    function changePrimaryContact() {
        var value = $j('[id$="primaryContact"]').val();
        var selector = '[id$="agencyContact"]';
        var selector = '[id$="agency"]';
        if (value == 'Agency') {
            var selector = '[id$="agency"]';
            var selector = '[id$="agencyContact"]';
    $j(document).ready(function() {
    /* ]]> */        
   .twitterStyleTextbox {
    border: 1px solid #c4c4c4;
    width: 180px;
    height: 18px;
    font-size: 13px;
    padding: 4px 4px 4px 4px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px #d9d9d9;
    -moz-box-shadow: 0px 0px 8px #d9d9d9;
    -webkit-box-shadow: 0px 0px 8px #d9d9d9;

.twitterStyleTextbox:focus {
    outline: none;
    border: 1px solid #7bc1f7;
    box-shadow: 0px 0px 8px #7bc1f7;
    -moz-box-shadow: 0px 0px 8px #7bc1f7;
    -webkit-box-shadow: 0px 0px 8px #7bc1f7;

<apex:form id="myForm">
<apex:pageBlock id="pb">
        <apex:pageBlockButtons >
                <apex:commandButton action="{!save}" value="Save"/>
                <apex:commandButton action="{!Cancel}" value="Cancel"/>

<apex:pageMessages />
      <apex:outputText rendered="{!isRerender}">

      <apex:variable var="rowNumber" value="{!0}"/>
      <apex:pageBlockSection title="Child RFP Details" collapsible="false" id="section">
        <apex:pageBlockTable id="thetable"  var="acc" value="{!attendeeList}" onRowMouseOver="removeHighlight(this)">
             <apex:column headerValue="Action" >
            <apex:commandLink value="Copy" reRender="pb" onclick="testMe(event)"/>
          <apex:column headerValue="Custom Package">
                 <apex:param name="rowIndex" value="{!rowNumber}"/>
                         <apex:selectList multiselect="true" value="{!discountScheduleID}"  styleClass="fullWidth chzn-select" size="1" style="width:400px;" >
                          <apex:actionSupport event="onchange" action="{!FindAllName}" rerender="geographies"  oncomplete="renderChosen()"/>
                        <apex:selectOptions value="{!Dept}"/>
                <apex:variable var="rowNumber" value="{!rowNumber+1}"/> 

          <apex:column headerValue="Market" id="market">
            <apex:outputPanel id="geographies" layout="block" >
          <apex:selectList id="selectedmarkets" multiselect="false" value="{!selectedMarketIds }"  styleClass="fullWidth chzn-select" size="1" style="width:150px" >
              <apex:selectOptions value="{!Market}"/>
          <apex:column headerValue="State" >
            <apex:inputField value="{!acc.State__c}" styleClass="twitterStyleTextbox"/>
          <apex:column headerValue="First Issue" >
            <apex:inputField value="{!acc.First_Issue__c}" styleClass="twitterStyleTextbox"/>
          <apex:column headerValue="Last Issue" >
            <apex:inputField value="{!acc.Last_Issue__c}" styleClass="twitterStyleTextbox"/>
          <apex:column headerValue="Circulation" >
            <apex:inputField value="{!acc.Circulation__c}" styleClass="twitterStyleTextbox"/>
            <apex:column headerValue="Space Unit">
            <apex:inputField value="{!acc.Space_Unit__c }" styleClass="chzn-select"/>
          <apex:column headerValue="Space Discount">
          <apex:inputField value="{!acc.Space_Discount__c}" styleClass="twitterStyleTextbox"/>
           <apex:column headerValue="Per Unit Open Rate">
          <apex:inputField value="{!acc.Per_Unit_Open_Rate__c}" styleClass="twitterStyleTextbox"/>


      <apex:commandButton action="{!addRow}" value="Add Row" reRender="pb" oncomplete="renderChosen()"> 
      <apex:param name="rowIndex" value="{!rowNumber}"/>