1

I have a datatable based on the OpportunityLineItems Object that shows every Product in the Opportunity Record. Now I want only the products to be shown that are selected by a checkbox. Is there a possibility to render only specific rows in pure Visualforce? Something like <apex:DataTable renderrow="{!Oli.Checkbox == True}?

I only have a Professional licence, so Apex Code isnt available. Is there a possibility to only do this in VF on clientside? Maybe JavaScript could also work..

<apex:variable var="index" value="{!1}"/>
           <apex:dataTable width="100%" value="{!Opportunity.OpportunityLineItems}" var="oli" rendered="{!Opportunity.Invoice_Number_c__c== '889698'}">
           <apex:column width="10%" headerClass="tableheaderleft"  styleClass="tablebodycenter">
           <apex:outputLabel value="{!index}."/>
           <apex:variable var="index" value="{!index+1}"/>
           <apex:facet name="header"></apex:facet>
           </apex:column>
           <apex:column width="40%" headerClass="tableheaderleft"  styleClass="tablebodyleft">
           <apex:facet name="header">Bezeichnung</apex:facet>
           <apex:OutputField value="{!oli.Name}"/> <br/>
          <table border="0" width="100%" style="border-collapse: collapse; margin-bottom:10px">
          <tr><td width="30%" style="padding: 0px;line-height: 100%;"><strong>Leistungszeitraum:</strong>&nbsp;<br></br><apex:outputText value="{0, date, dd.MM.yyyy}">
          <apex:param value="{!oli.ServiceDate}" /> </apex:outputText>&nbsp;-&nbsp;<apex:outputText value="{0, date, dd.MM.yyyy}">
          <apex:param value="{!oli.Licensing_Period_Calculated__c}" /> </apex:outputText></td></tr>
          </table>
          </apex:column>
          <apex:column width="10%" headerClass="tableheadercenter" footerClass="tablefootercenter" styleClass="tablebodycenter">
          <apex:facet name="header">Anzahl</apex:facet>
          <apex:OutputField value="{!oli.Quantity}"/>
          <apex:facet name="footer"></apex:facet>
          </apex:column>
          <apex:column width="20%" headerClass="tableheadercenter"  styleClass="tablebodycenter">
          <apex:facet name="header">Einzelbetrag</apex:facet>
          <apex:OutputField value="{!oli.UnitPrice}"/>
          <apex:facet name="footer"></apex:facet>
          </apex:column>
                            
          <apex:column rendered="{!Opportunity.TotalDiscount__c != 0}" headerClass="tableheadercenter" footerClass="tablefootercenter" styleClass="tablebodycenter">
          <apex:facet name="header">Rabatt</apex:facet>
          <apex:OutputField value="{!oli.Discount}"/>
          <apex:facet name="footer"></apex:facet>
          </apex:column>  
                            
          <apex:column width="20%" headerClass="tableheaderright"  styleClass="tablebodyright">
          <apex:facet name="header">Gesamtbetrag</apex:facet>
          <apex:OutputField value="{!oli.TotalPrice}"/>
          <apex:facet name="footer"></apex:facet>
          </apex:column>                                                                                            
         </apex:dataTable>
1

JavaScript is your solution here. You can either render the table completely in JavaScript suing apex:remoteObjects, or you can use a script, either plain JavaScript or via Angular, jQuery, etc to filter the table after rendering. Either way is perfectly feasible.

Here's a jQuery example:

$('[data-checkbox=false]').parents('tr').hide();

Where somewhere in your code you have:

<apex:column ...>
  <span data-checkbox="{!oil.checkbox}"></span>

As a Remote Objects example, you'd need to construct a query, something like:

<script>
  var oppId = "{!JSENCODE($CurrentPage.parameters.id)}";
  var api = new SObjectModel.Opportunity();
  var oppLines = api.retrieve({where:{OpportunityId:{eq: oppId}, Checkbox:{eq:true}});
  // build the table here

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.