function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
sk kumarsk kumar 

here below my scenario is given..and my doubt is if i select node N1 then it will show only cpu in next slected product node tab. and again if i select cpu or put mouse on it show me cpu configuration deails near the cpu tab...plz help me in this regard!!

<apex:page standardController="Account" extensions="productconfig1">
  <apex:form >
      <apex:pageblock >
          <apex:panelGrid columns="5">
             Select Node &nbsp;<apex:selectList value="{!SelectedNode}" multiselect="false" size="1">
                <apex:selectOption itemValue="N1" itemLabel="N1"/>
                   <apex:selectOption itemValue="N2" itemLabel="N2"/>
                      <apex:selectOption itemValue="N3" itemLabel="N4"/>
                     </apex:selectList>
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Select Product &nbsp;<apex:selectList value="{!SelectedProduct}" multiselect="false" size="1">
              <apex:selectOptions value="{!Product}"/>
           </apex:selectList>
        </apex:panelGrid>
     </apex:pageblock>
  </apex:form>
</apex:page>

classs---

public with sharing class productconfig1
{
Public String SelectedNode{get;set;}
Public String SelectedProduct{get;set;}
public productconfig1(ApexPages.StandardController controller)
{

    }
   
    public List<SelectOption> getProduct() {
        List<SelectOption> ProductOptions = new List<SelectOption>();
        ProductOptions.add(new SelectOption('CPU','CPU'));
        ProductOptions.add(new SelectOption('N/W','N/W'));
        ProductOptions.add(new SelectOption('MONITOR','MONITOR'));

        return ProductOptions ;
    }
}
Best Answer chosen by sk kumar
Virendra ChouhanVirendra Chouhan
Hi sk,

Use this code--
VF page
<apex:page standardController="Account" extensions="productconfig1">
   <apex:form >
    
     <apex:pageblock >
          <apex:panelGrid columns="5">
             Select Node &nbsp;<apex:selectList size="1" value="{!SelectedNode}">
                    <apex:selectOptions value="{!SelectedNodes}"/>
                    <apex:actionSupport event="onchange" reRender="a"/>
                </apex:selectList>    
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Select Product &nbsp;<apex:selectList size="1" value="{!product}" id="a">
                    <apex:selectOptions value="{!products}"/>
                    <apex:actionSupport event="onclick" reRender="Details"/>
                </apex:selectList>
        </apex:panelGrid>
        <apex:outputPanel id="Details">
            <apex:outputText value="The Product you Selected is {!product} "  rendered="{!product != null}" />
        </apex:outputPanel>
     </apex:pageblock>
     
    </apex:form>

</apex:page>


Controller--

public with sharing class productconfig1
{
      Public String SelectedNode{get;set;}
      Public String Product{get;set;}
      Public String SelectedProduct{get;set;}
        
        public productconfig1(ApexPages.StandardController controller){
        
        }
   
    
    public List<SelectOption> getSelectedNodes()
    {
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('None','--- None ---'));        
        options.add(new SelectOption('N1','N1'));
        options.add(new SelectOption('N2','N2'));
        options.add(new SelectOption('N3','N3'));        
        return options;
    } 
    
    public List<SelectOption> getProducts()
    {
        List<SelectOption> options = new List<SelectOption>();
        if(SelectedNode == 'N1')
        {       
            options.add(new SelectOption('CPU','CPU'));
            options.add(new SelectOption('MOUSE','MOUSE'));
        }
        else if(SelectedNode == 'N2')
        {       
            options.add(new SelectOption('N/W','N/W'));
           
        }
        else if(SelectedNode == 'N3')
        {       
            options.add(new SelectOption('MONITOR','MONITOR'));
           
        }
        else
        {
            options.add(new SelectOption('None','--- None ---'));
        }      
        return options;
    }       

  
}

And in this Outputpanel write your product information

<apex:outputPanel id="Details">
            <apex:outputText value="The Product you Selected is {!product} "  rendered="{!product != null}" />
        </apex:outputPanel>


regards
Virendra


 

All Answers

Virendra ChouhanVirendra Chouhan
Hi sk,

Use this code--
VF page
<apex:page standardController="Account" extensions="productconfig1">
   <apex:form >
    
     <apex:pageblock >
          <apex:panelGrid columns="5">
             Select Node &nbsp;<apex:selectList size="1" value="{!SelectedNode}">
                    <apex:selectOptions value="{!SelectedNodes}"/>
                    <apex:actionSupport event="onchange" reRender="a"/>
                </apex:selectList>    
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Select Product &nbsp;<apex:selectList size="1" value="{!product}" id="a">
                    <apex:selectOptions value="{!products}"/>
                    <apex:actionSupport event="onclick" reRender="Details"/>
                </apex:selectList>
        </apex:panelGrid>
        <apex:outputPanel id="Details">
            <apex:outputText value="The Product you Selected is {!product} "  rendered="{!product != null}" />
        </apex:outputPanel>
     </apex:pageblock>
     
    </apex:form>

</apex:page>


Controller--

public with sharing class productconfig1
{
      Public String SelectedNode{get;set;}
      Public String Product{get;set;}
      Public String SelectedProduct{get;set;}
        
        public productconfig1(ApexPages.StandardController controller){
        
        }
   
    
    public List<SelectOption> getSelectedNodes()
    {
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('None','--- None ---'));        
        options.add(new SelectOption('N1','N1'));
        options.add(new SelectOption('N2','N2'));
        options.add(new SelectOption('N3','N3'));        
        return options;
    } 
    
    public List<SelectOption> getProducts()
    {
        List<SelectOption> options = new List<SelectOption>();
        if(SelectedNode == 'N1')
        {       
            options.add(new SelectOption('CPU','CPU'));
            options.add(new SelectOption('MOUSE','MOUSE'));
        }
        else if(SelectedNode == 'N2')
        {       
            options.add(new SelectOption('N/W','N/W'));
           
        }
        else if(SelectedNode == 'N3')
        {       
            options.add(new SelectOption('MONITOR','MONITOR'));
           
        }
        else
        {
            options.add(new SelectOption('None','--- None ---'));
        }      
        return options;
    }       

  
}

And in this Outputpanel write your product information

<apex:outputPanel id="Details">
            <apex:outputText value="The Product you Selected is {!product} "  rendered="{!product != null}" />
        </apex:outputPanel>


regards
Virendra


 

This was selected as the best answer
sk kumarsk kumar
thnx virendra for yr quick response...:)
 but  my requrement is like if i selected  cpu it will show cpu configuration & all deatils of cpu
if i select n/w then it will show n/w details besides the n/w tab
if i select monitor it will show monitor detail

thnx in advance if u solve his problem...kudos