+ Start a Discussion
goabhigogoabhigo 

Displaying Product family and its products - Similar to Group By clause

Can we display Product family in visualforce page similar to Group by clause? 
I am using PE so I cannot write apex class.
Here is my code:
<table width="100%" border="1" cellpadding="5" cellspacing="0">    
      <tr style="background-color:#C0C0C0;font-weight:bold;">
          <th width="5%" > Sr. </th>
          <th width="40%"> Description </th>
          <th width="20%"> Part Number </th>
          <th width="12%"> Unit Price </th>
          <th width="5%"> Qty </th>
          <th width="18%"> Total </th>
      </tr>
      <apex:repeat value="{!Quote.QuoteLineItems}" var="qFam" >
          <tr style="display:{!IF(qFam.PricebookEntry.Product2.Family == null,'None','')}">
              <td colspan="6" style="background-color:#E8E8E8;">
                  <apex:outputText value="{!qFam.PricebookEntry.Product2.Family}"></apex:outputText>
              </td>
          </tr>
          <apex:repeat value="{!Quote.QuoteLineItems}" var="q">
              <tr>
                  <td align="center"> 
                      <apex:outputText value="{0,number}">
                          <apex:param value="{!q.Sr_No__c}"/> 
                      </apex:outputText>
                  </td>
                  <td> <apex:outputText value="{!q.PricebookEntry.Product2.Name}"/> </td>
                  <td> <apex:outputText value="{!q.PricebookEntry.Product2.ProductCode}"/> </td>
                  <td align="right">
                      <apex:outputText value="{0,number,###,###,###,###.00}">
                          <apex:param value="{!q.UnitPrice}"/>
                      </apex:outputText>
                  </td>
                  <td align="right"> 
                      <apex:outputText value="{0,number}">
                          <apex:param value="{!q.Quantity}"/> 
                      </apex:outputText>
                  </td>
                  <td align="right"> 
                      <apex:outputText value="{0,number,###,###,###,###.00}">
                          <apex:param value="{!q.TotalPrice}"/> 
                      </apex:outputText>
                  </td>
              </tr>
          </apex:repeat>
      </apex:repeat>
  </table>

 

Following is what it displays:
As you can see same product family is repeated as well as the products.
I can get this if I modify this slightly. Please suggest.
d3developerd3developer

The only way that I know you can do what you want to do purely in Visualforce is to through everything up in a table and  do the sorting in Javascript. I did an implementation of a jQuery datatable that did that and is available through the non-profit starter pack.

 

Besides that, the reason things are coming out strangely is that you are iterating through every Quote twice (actually, the number of Quotes x the number of Quotes). For what you are doing you don't actually want the inner repeat at all, just get rid of it and change the inner variable from "q" to "qfam" and you will have accurate if unordered output.

mtbclimbermtbclimber

d3developer is correct. without Apex you would need to do this client side in javascript by building the appropriate javascript data structure and then drawing it into the dom in the fashion you've described.

goabhigogoabhigo

Thanks d3developer. But if I remove inner repeat, with each product its family is repeated. Its much better than the previous page, true. But my problem is not solved yet. I want something like this:

Product Family1:

Product 1

Product2

Product Family2:

Product3

 

Can you kindly post me sample code to put into javascript please?

And what you mean by "I did an implementation of a jQuery datatable that did that and is available through the non-profit starter pack."? How do I get it?

goabhigogoabhigo

Guys, please help me.