function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
NiknitNiknit 

How to refresh table data based on picklist value selected?

Hi,

 

My Requirement is to display two picklist on a VF page, one below the other, the second onee being the dependent one and then upon the selection of second picklist i.e. the dependent picklist, a table should be displayed with related data, and it should change whenever the second option is changed.

 

so when the value from second pickllist is selected , the data of name and mark__c field from the object CIMMAN__c object should be displayed. where the tick__c value is equal to the selected value from the second picklist(selected). I tried but its apparently not working out, actionsupport i tried but i guess i am just not doing it right. Thanks

I have the code till dependent picklist

 

<apex:page sidebar="false"  Controller="TickController" >
    
<apex:form>

    <apex:actionFunction action="{!createDependPick}" name="generateDependPick" reRender="pick2" />
    
    


    Select the Pick1:

    <apex:selectList id="pick1" value="{!Selected1}" size="1" onchange="generateDependPick()">

        <apex:selectOptions value="{!selectoption1}">

        </apex:selectOptions>

    </apex:selectList>

    


    Select the Pick2:

    <apex:selectList id="pick2" value="{!Selected2}" size="1" >

        <apex:selectOptions value="{!selectoption2}">

        </apex:selectOptions>
   

           
    </apex:selectList>        


            </apex:page>


Controller

public class TickController {

 


public List<SelectOption> selectoption1 {get; set;}
public List<SelectOption> selectoption2 {get; set;}
public String Selected1 {get; set;}
public String Selected2 {get; set;}



    public Tickcontroller(){

            

            selectoption1 = new List<SelectOption>();
            selectoption2 = new List<SelectOption>();

            SelectOption option = new SelectOption('--None--', '--None--');

            selectoption1.add(option);
            selectoption2.add(option);
            option = new SelectOption('1', '1');
            selectoption1.add(option);
            option = new SelectOption('2', '2');
            selectoption1.add(option);
                      }

    public void createDependPick(){

           selectoption2.clear();
           selectoption2.add(new SelectOption('--None--', 'None'));

            if(Selected1  == '1'){
                selectoption2.add(new SelectOption('TDK','TDK'));
                selectoption2 .add(new SelectOption('OUTIA','OUTIA'));

                    }
              else if( Selected1 == '2'){
                   selectoption2 .add(new SelectOption('GNR','GNS'));
                   selectoption2 .add(new SelectOption('SOTD','SOTD'));

                    }
}
        
        
          
        
        
        }
Best Answer chosen by Niknit
sfdcMonkey.comsfdcMonkey.com
hi Niknit,
try below sample code :
  
<apex:page sidebar="false"  Controller="TickController" >
    
<apex:form>

    <apex:actionFunction action="{!createDependPick}" name="generateDependPick" reRender="pick2,IdTable" />
    <apex:actionFunction action="{!getRec}" name="getRec" reRender="IdTable" />
    
     


    Select the Pick1:

    <apex:selectList id="pick1" value="{!Selected1}" size="1" onchange="generateDependPick()">

        <apex:selectOptions value="{!selectoption1}">

        </apex:selectOptions>

    </apex:selectList>

    


    Select the Pick2:

    <apex:selectList id="pick2" value="{!Selected2}" size="1" onchange="getRec()">

        <apex:selectOptions value="{!selectoption2}">

        </apex:selectOptions>
    </apex:selectList>        
    
    <apex:outputPanel id="IdTable">
       <apex:dataTable value="{!accounts}" var="account" id="theTable"
        rowClasses="odd,even" styleClass="tableClass">
        <apex:facet name="caption">table caption</apex:facet>
        <apex:facet name="header">table header</apex:facet>
       

        <apex:column>
            <apex:facet name="header">Name</apex:facet>
          
            <apex:outputText value="{!account.name}"/>
        </apex:column>
 
        <apex:column>
            <apex:facet name="header">Owner</apex:facet>
          
            <apex:outputText value="{!account.owner.name}"/>
        </apex:column>

    </apex:dataTable>
    </apex:outputPanel>

    </apex:form>
            </apex:page>
apex : 
public class TickController {

 

 
public List<SelectOption> selectoption1 {get; set;}
public List<SelectOption> selectoption2 {get; set;}  
public String Selected1 {get; set;}
public String Selected2 {get; set;}
public List<Account> accounts {get; set;} 

   
    public Tickcontroller(){

            

            selectoption1 = new List<SelectOption>();
            selectoption2 = new List<SelectOption>();

            SelectOption option = new SelectOption('--None--', '--None--');

            selectoption1.add(option);
            selectoption2.add(option);
            option = new SelectOption('1', '1');
            selectoption1.add(option);
            option = new SelectOption('2', '2');
            selectoption1.add(option);
                      }

    public void createDependPick(){

           selectoption2.clear();
           selectoption2.add(new SelectOption('--None--', 'None'));

            if(Selected1  == '1'){
                selectoption2.add(new SelectOption('Electronics','Electronics'));
                selectoption2 .add(new SelectOption('Finance','Finance'));

                    }
              else if( Selected1 == '2'){
                   selectoption2 .add(new SelectOption('Healthcare','Healthcare')); 
                   selectoption2 .add(new SelectOption('Chemicals','Chemicals'));

                    } 
         
}
         
        
    public void getRec(){
        accounts = new list<account>();
           accounts = [SELECT name, owner.name FROM account where Industry =: Selected2];   
    }
        
        }
i hope it helps you.
      Let me inform if it helps you and kindly mark it best answer if it helps you so it make proper solution for others
thanks
    sfdcmonkey.com

 

All Answers

Ajay K DubediAjay K Dubedi
Hi Niknit,
Try the code below:-
  
<apex:page sidebar="false"  Controller="TickController" >
    <apex:form>
        <apex:pageBlock>
            <apex:pageBlockSection>
                <apex:actionFunction action="{!createDependPick}" name="generateDependPick" reRender="pick2" /><br/>
                Select the Pick1:
                
                <apex:selectList id="pick1" value="{!Selected1}" size="1" onchange="generateDependPick()" onclick="pick2()" >
                    <apex:selectOptions value="{!selectoption1}">
                    </apex:selectOptions>
                </apex:selectList>
                
                Select the Pick2:
                <apex:selectList id="pick2" value="{!Selected2}" size="1"  onchange="fun()" >
                    <apex:selectOptions value="{!selectoption2}">
                    </apex:selectOptions>
                </apex:selectList> 
                <apex:actionFunction action="{!showTable}" name="Show" reRender="a" />
            </apex:pageBlockSection>
           
                <apex:pageBlockTable  id="a" value="{!a}" var="c"  >
                    <apex:column value="{!c.name}"/>
                </apex:pageBlockTable>
          
            
        </apex:pageBlock>
    </apex:form>
    <script>
    function fun()
    {
        Show();
    }
      function pick2()
    {
        generateDependPick();
    }
    </script>
</apex:page>
  
public class TickController 
{
    public  boolean rend{get;set;}
    public  list<account> a{get;set;}
    public List<SelectOption> selectoption1 {get; set;}
    public List<SelectOption> selectoption2 {get; set;}
    public String Selected1 {get; set;}
    public String Selected2 {get; set;}
    
    public Tickcontroller()
    {
        rend=true;
      selectoption1 = new List<SelectOption>();
      selectoption2 = new List<SelectOption>();
        
      SelectOption option = new SelectOption('--None--', '--None--');
        selectoption1.add(option);
        selectoption2.add(option);
        option = new SelectOption('1', '1');
        selectoption1.add(option);
        option = new SelectOption('2', '2');
        selectoption1.add(option);
    }
    
      public void createDependPick(){
        
        selectoption2.clear();
        selectoption2.add(new SelectOption('--None--', 'None'));
        
        if(Selected1  == '1'){
             rend=true;
            selectoption2.add(new SelectOption('TDK','TDK'));
            selectoption2 .add(new SelectOption('OUTIA','OUTIA'));
            
        }
        else if( Selected1 == '2')
        {
             rend=true;
            selectoption2 .add(new SelectOption('GNR','GNS'));
            selectoption2 .add(new SelectOption('SOTD','SOTD'));
            
        }
    }
    public void showTable()
    {
        a=[select name from account limit 1];
    }
    
    
    
    
}

Kindly mark it as best if found helpful.

Thanks 
Ajay
Ajay K DubediAjay K Dubedi
In this, instead of account you can query your custom object i.e. CIMMAN__c and do your desired updations.
NiknitNiknit
Sorry but it does not display the table. nothing happenswhen second picklist is selected.
sfdcMonkey.comsfdcMonkey.com
hi Niknit,
try below sample code :
  
<apex:page sidebar="false"  Controller="TickController" >
    
<apex:form>

    <apex:actionFunction action="{!createDependPick}" name="generateDependPick" reRender="pick2,IdTable" />
    <apex:actionFunction action="{!getRec}" name="getRec" reRender="IdTable" />
    
     


    Select the Pick1:

    <apex:selectList id="pick1" value="{!Selected1}" size="1" onchange="generateDependPick()">

        <apex:selectOptions value="{!selectoption1}">

        </apex:selectOptions>

    </apex:selectList>

    


    Select the Pick2:

    <apex:selectList id="pick2" value="{!Selected2}" size="1" onchange="getRec()">

        <apex:selectOptions value="{!selectoption2}">

        </apex:selectOptions>
    </apex:selectList>        
    
    <apex:outputPanel id="IdTable">
       <apex:dataTable value="{!accounts}" var="account" id="theTable"
        rowClasses="odd,even" styleClass="tableClass">
        <apex:facet name="caption">table caption</apex:facet>
        <apex:facet name="header">table header</apex:facet>
       

        <apex:column>
            <apex:facet name="header">Name</apex:facet>
          
            <apex:outputText value="{!account.name}"/>
        </apex:column>
 
        <apex:column>
            <apex:facet name="header">Owner</apex:facet>
          
            <apex:outputText value="{!account.owner.name}"/>
        </apex:column>

    </apex:dataTable>
    </apex:outputPanel>

    </apex:form>
            </apex:page>
apex : 
public class TickController {

 

 
public List<SelectOption> selectoption1 {get; set;}
public List<SelectOption> selectoption2 {get; set;}  
public String Selected1 {get; set;}
public String Selected2 {get; set;}
public List<Account> accounts {get; set;} 

   
    public Tickcontroller(){

            

            selectoption1 = new List<SelectOption>();
            selectoption2 = new List<SelectOption>();

            SelectOption option = new SelectOption('--None--', '--None--');

            selectoption1.add(option);
            selectoption2.add(option);
            option = new SelectOption('1', '1');
            selectoption1.add(option);
            option = new SelectOption('2', '2');
            selectoption1.add(option);
                      }

    public void createDependPick(){

           selectoption2.clear();
           selectoption2.add(new SelectOption('--None--', 'None'));

            if(Selected1  == '1'){
                selectoption2.add(new SelectOption('Electronics','Electronics'));
                selectoption2 .add(new SelectOption('Finance','Finance'));

                    }
              else if( Selected1 == '2'){
                   selectoption2 .add(new SelectOption('Healthcare','Healthcare')); 
                   selectoption2 .add(new SelectOption('Chemicals','Chemicals'));

                    } 
         
}
         
        
    public void getRec(){
        accounts = new list<account>();
           accounts = [SELECT name, owner.name FROM account where Industry =: Selected2];   
    }
        
        }
i hope it helps you.
      Let me inform if it helps you and kindly mark it best answer if it helps you so it make proper solution for others
thanks
    sfdcmonkey.com

 
This was selected as the best answer
Ajay K DubediAjay K Dubedi
It works fine in my Org, are you sure you have implemented the code as it is pasted over here.
Please check again.
 
NiknitNiknit
Hi Ajay, i am sure , not working
NiknitNiknit
Hi Piyush, your code worked , but when i try with pageblocktable, it doesnt work, may i know is it like that, only with datatable it is working.
sfdcMonkey.comsfdcMonkey.com
hi , use below code : 
<apex:page sidebar="false"  Controller="TickController" >
    
<apex:form>

    <apex:actionFunction action="{!createDependPick}" name="generateDependPick" reRender="pick2,IdTable" />
    <apex:actionFunction action="{!getRec}" name="getRec" reRender="IdTable" />
    
     


    Select the Pick1:

    <apex:selectList id="pick1" value="{!Selected1}" size="1" onchange="generateDependPick()">

        <apex:selectOptions value="{!selectoption1}">

        </apex:selectOptions>

    </apex:selectList>

    


    Select the Pick2:

    <apex:selectList id="pick2" value="{!Selected2}" size="1" onchange="getRec()">

        <apex:selectOptions value="{!selectoption2}">

        </apex:selectOptions>
    </apex:selectList>        
    
    <apex:outputPanel id="IdTable">
        
         <apex:pageBlock title="My Content">

        <apex:pageBlockTable value="{!accounts}" var="item">

            <apex:column value="{!item.name}"/>
            <apex:column value="{!item.owner.name}"/>

        </apex:pageBlockTable>

      </apex:pageBlock>
        
    </apex:outputPanel>

    </apex:form>
            </apex:page>
apex :
same as above

output:
User-added image


i hope it helps you.
Let me inform if it helps you and kindly mark it best answer if it helps you
thanks
NiknitNiknit
Yes Piyush its working Thank you , just a last bother to you, why is it necessary to use outputpanel here in both cases, i was doing the same thing with pageblocktable but without the outputpanel.
sfdcMonkey.comsfdcMonkey.com
yes you can give a id direct to pageblocktabl, for refresh the table, in some case we need to use outputpanel where we can not give id to a element for refresh
Hopes it helps you
Thanks
NiknitNiknit
I did use ID in pageblocktable but it didnt refresh, it only works when we use outputpanel with pageblocktable, so when you say  in some case we need to use outputpanel where we can not give id to a element for refresh , does that mean refreshing table with pageblocktable doesnt work with id?
sfdcMonkey.comsfdcMonkey.com
check below code without outputpanel, its work for me : 
<apex:page sidebar="false"  Controller="TickController" >
    
<apex:form>

    <apex:actionFunction action="{!createDependPick}" name="generateDependPick" reRender="pick2,IdTable" />
    <apex:actionFunction action="{!getRec}" name="getRec" reRender="IdTable" />
    
     


    Select the Pick1:

    <apex:selectList id="pick1" value="{!Selected1}" size="1" onchange="generateDependPick()">

        <apex:selectOptions value="{!selectoption1}">

        </apex:selectOptions>

    </apex:selectList>

    


    Select the Pick2:

    <apex:selectList id="pick2" value="{!Selected2}" size="1" onchange="getRec()">

        <apex:selectOptions value="{!selectoption2}">

        </apex:selectOptions>
    </apex:selectList>        
    
  
        
         <apex:pageBlock title="My Content" >

        <apex:pageBlockTable value="{!accounts}" var="item" id="IdTable">

            <apex:column value="{!item.name}"/>
            <apex:column value="{!item.owner.name}"/>

        </apex:pageBlockTable>

      </apex:pageBlock>
        


    </apex:form>
            </apex:page>

Thanks
NiknitNiknit
It gives me some error, but thats fine, Thanks Piyush and Ajay for the help