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 Answer 1

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .