0

Decided to abort the use of a multiselect picker and use separate checkboxes each with its own action. However now if I only want to show 2 charts in the first panel grid and then start hiding then rerender a chart in any of the other panelgrids those charts render in the UI of the first panelgrid unless I refresh the page or save it. So I am rendering the entire set of panelgrids to avoid this behavior.

Updated the current code below to reflect this. Anybody have an idea as to how I can reload just the panelgrid affected when unchecking a checkbox field ?

(original question) I have a 3x3 array of charts using panelGrids and using a multiselect picklist to render (exclude) charts . Using this single multi select picklist how can I use the actionSupport to determine which panel to reRender so I don't have to reRender the entire set of charts which takes more time to reload ? I'd like to do this using if statements in the apex component for action support instead of doing this in a controller.

Updated code:

<apex:page standardController="Audit__c" showHeader="true"  extensions="AuditReportController">
<apex:variable var="audit" value="{!Audit__c}" /> 
<apex:form rendered="{!audit.Total_Samples__c>0}" >  
<apex:pageBlock mode="maindetail"  title="Personal Auto Analytics" rendered="true" >

<apex:pageBlockSection id="section1" showheader="false" title="My Content Section" columns="18"> 

<font color='blue'>Select report charts to display (click Save Report Settings to retain your selection.)</font>
<!-- Start of html table holding checkbox listing -->
<table id="t01" style="width:80%;border-collapse: collapse;"  >

  <tr> 
   <td width="30%">     <apex:inputField label="Vehicle Model Year" value="{!audit.Chart_Vehicle_Model_Year__c}" > 
             <apex:actionSupport event="onchange" reRender="Panel0" />
             </apex:inputField> 
   </td>

    <td width="30%">    <apex:inputField label="Rating Tier" value="{!audit.Chart_Rating_Tier__c}"> 
             <apex:actionSupport event="onchange" reRender="Panel0" />
             </apex:inputField>   
    </td>
    <td width="30%">    <apex:inputField label="Credit Score" value="{!audit.Chart_Credit_Score__c}"> 
             <apex:actionSupport event="onchange" reRender="Panel0" />
             </apex:inputField>    
    </td>

    <td width="30%">    <apex:inputField label="Driver Age" value="{!audit.Chart_Age_of_Insured_Drivers__c}">    
             <apex:actionSupport event="onchange" reRender="Panel0" />
             </apex:inputField>      
    </td>
    <td width="30%">    <apex:inputField label="Driver Gender" value="{!audit.Chart_Driver_Gender__c}">    
             <apex:actionSupport event="onchange" reRender="Panel0" />
             </apex:inputField>      
    </td>    
    <td width="30%">    <apex:inputField label="Driver Marital Status" value="{!audit.Chart_Marital_Status_of_Drivers__c}">    
             <apex:actionSupport event="onchange" reRender="Panel0" />
             </apex:inputField>      
    </td>    

    <td width="30%">    <apex:inputField label="BI/PD Liability Limits" value="{!audit.Chart_BI_PD_Liability_Limits__c}">    
             <apex:actionSupport event="onchange" reRender="Panel0" />
             </apex:inputField>      
    </td>
    <td width="30%">    <apex:inputField label="Comp Deductibles" value="{!audit.Chart_Comp_Deductibles__c}">    
             <apex:actionSupport event="onchange" reRender="Panel0" />
             </apex:inputField>        
    </td>    
    <td width="30%">    <apex:inputField label="Collision Deductibles" value="{!audit.Chart_Collision_Deductibles__c}">    
             <apex:actionSupport event="onchange" reRender="Panel0" />
             </apex:inputField>        
    </td>    
  </tr>     

</table>    

</apex:pageBlockSection>

<apex:outputPanel id="Panel0" layout="none" rendered="{!audit.Total_Samples__c>0}" >

<!-- GENERAL INFORMATION -->      
 <b>GENERAL INFORMATION</b>
     <HR COLOR="orange" WIDTH="65%"  ALIGN="LEFT"> </hr>

   <apex:outputPanel id="Panel1" >
    <apex:panelGrid columns="3" id="Grid1">

            <analytics:reportChart reportId="00O16000007LVFN" size="tiny" showRefreshButton="true" cacheResults="true"  filter="[{column:'Audit__c.Name',operator:'equals',value:'{!Audit__c.Name}'}]" rendered="{!audit.Chart_Vehicle_Model_Year__c}" />
            <analytics:reportChart reportId="00O16000007LVFJ" size="tiny" showRefreshButton="true" cacheResults="true"  filter="[{column:'Audit__c.Name',operator:'equals',value:'{!Audit__c.Name}'}]" rendered="{!audit.Chart_Rating_Tier__c}" />
            <analytics:reportChart reportId="00O16000007LVFE" size="tiny" showRefreshButton="true" cacheResults="true"  filter="[{column:'Audit__c.Name',operator:'equals',value:'{!Audit__c.Name}'}]" rendered="{!audit.Chart_Credit_Score__c}" /> 
   </apex:panelGrid>
   </apex:outputPanel>

        <br></br>
<!-- DEMOGRAPHIC DISTRIBUTION -->
 <b>DEMOGRAPHIC DISTRIBUTION</b>
     <HR COLOR="orange" WIDTH="65%"  ALIGN="LEFT"> </hr> 
   <apex:outputPanel id="Panel2" >     
        <apex:panelGrid columns="3" id="Grid2">

              <analytics:reportChart reportId="00O16000007LVFD" size="tiny" showRefreshButton="true" cacheResults="true" filter="[{column:'Audit__c.Name',operator:'equals',value:'{!Audit__c.Name}'}]" rendered="{!audit.Chart_Age_of_Insured_Drivers__c}" /> 
              <analytics:reportChart reportId="00O16000007LVFF" size="tiny" showRefreshButton="true" cacheResults="true"  filter="[{column:'Audit__c.Name',operator:'equals',value:'{!Audit__c.Name}'}]" rendered="{!audit.Chart_Driver_Gender__c}" />
              <analytics:reportChart reportId="00O16000007LVFH" size="tiny" showRefreshButton="true" cacheResults="true"  filter="[{column:'Audit__c.Name',operator:'equals',value:'{!Audit__c.Name}'}]" rendered="{!audit.Chart_Marital_Status_of_Drivers__c}" />

        </apex:panelGrid>
   </apex:outputPanel>      

        <br></br>
<!-- LIMITS & DEDUCTIBLES -->
 <b>LIMITS and DEDUCTIBLES</b>
     <HR COLOR="orange" WIDTH="65%"  ALIGN="LEFT"> </hr>

   <apex:outputPanel id="Panel3" >          
        <apex:panelGrid columns="3" id="Grid3">                   

              <analytics:reportChart reportId="00O16000007LVFM" size="tiny" showRefreshButton="true" cacheResults="true" filter="[{column:'Audit__c.Name',operator:'equals',value:'{!Audit__c.Name}'}]" rendered="{!audit.Chart_BI_PD_Liability_Limits__c}" /> 
              <analytics:reportChart reportId="00O16000007LVtq" size="tiny" showRefreshButton="true" cacheResults="true"  filter="[{column:'Audit__c.Name',operator:'equals',value:'{!Audit__c.Name}'}]" rendered="{!audit.Chart_Comp_Deductibles__c}" /> 
              <analytics:reportChart reportId="00O16000007LVuZ" size="tiny" showRefreshButton="true" cacheResults="true"  filter="[{column:'Audit__c.Name',operator:'equals',value:'{!Audit__c.Name}'}]" rendered="{!audit.Chart_Collision_Deductibles__c}" />

        </apex:panelGrid>
   </apex:outputPanel>       
 </apex:outputPanel>
</apex:pageBlock>
</apex:form> 
</apex:page>
0

You'll need to call a Javascript function from your ActionSupport (I believe using onSubmit). The Javascript function will contain the logic determining which panels to rerender, and you will need an ActionFunctions for each panel, which will re-render that panel. The javascript function will call the appropriate ActionFunction based on its logic.

The hard part is that in order to tell what changed in the multipicklist, you will need to store the value in a controller variable, and then update that variable in the javascript function after it's been compared to the new value.

Hope that makes sense and I'm not misrepresenting anything. One way to simplify the Visualforce end of this is to do some more in the controller - you could create a boolean value for each Panel, populate them from the multipicklist in the controller, and then create a selectCheckbox for each Panel, with the boolean determining the default value. That way, each checkbox can have its own ActionSupport with a separate re-render.

The disadvantage is that you need to hard code a boolean for each panel into the controller, but since you would need to update the visualforce page anyway when a new panel is added, it might not be that big of a deal.

| improve this answer | |
  • Thanks. I aborted the use of a multiselect picker. Instead now I have a separate checkbox and action . But now when I rerender these charts they reload in the same panelgrid . When I save the page they all fall into the proper UI corresponding to the correct panelgrid. So I have to rerender the entire set of charts (rerender Panel1) which adds more latency. Very weird behavior. – rickmac Mar 9 '15 at 15:39
  • Can you edit the original post with your new code? – thereistonsonenotany Mar 9 '15 at 15:47
  • It is. I replaced the entire original code. It no longer uses a picklist. – rickmac Mar 10 '15 at 17:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.