+ Start a Discussion
bohemianguy100bohemianguy100 

iterate horizontally using repeat

I'm trying to find a way to iterate over my content horizontally for three columns and once the three columns have been reached, the content moves to a new row.

 

I've tried using a panelGrid and repeat control and a combination or html markup and a repeat control, but I can't get the content to break into three separate columns.

 

Here is my VF page using html table and repeat control:

 

<apex:page standardController="Opportunity" extensions="SalesCoachActivityController">
	<apex:form >
		<apex:outputPanel layout="block" style="overflow:auto;height:190px;">
			<table cellpadding="10">
				<tr>
                	<apex:repeat value="{!Activities}" var="act">
                		<td>
                			<apex:outputLink value="{!act.Content_URL__c}" target="_blank">{!act.Name}</apex:outputLink>
                		</td>
					</apex:repeat>
            	</tr>
			</table>
		</apex:outputPanel>
	</apex:form>
</apex:page>

 Is there a way to iterate over a list and display the content into three columns and then break into a new row once you reach the third column until all records have been displayed?

Best Answer chosen by Admin (Salesforce Developers) 
cvuyyurucvuyyuru

You can also do like this.

 

With the help of Java script and no controller.

 

In this example, I inserted data into table with Hyperlink alloted to it.

 

This table takes only 3 rows.

 

 

<apex:page standardController="Contact" recordSetVar="Contact">
<script>
var arraddress= new Array();
var arrid= new Array();
var i=0;
var j=0;
document.write('<table border="1px"><tr>');
</script>
<apex:form >
 <apex:repeat value="{!Contact}" var="a">
 
    <script>
    //alert('second');
    arraddress[i]='{!a.name}';
    arrid[i]='{!a.id}'
    document.write('<td><a href="https://ap1.salesforce.com/'+arrid[i]+'">'+arraddress[i]+'</a></td>');
    j++;
    i++;
    if(j == 3)
    {
        document.write('</tr>');
        j=0;
        document.write('<tr>');
    }
   
    </script>
    
 </apex:repeat>
    <script>
        document.write('</tr></table>');
    </script>
</apex:form>

</apex:page>

 

All Answers

My OwnMy Own

 There is no option for displaying the repeater data in no of columns. 

 

If you want to achieve this have 2 or more repeaters in the output panel, Control the display of the additional repeaters and           bind the data accordingly.  

 

         

bohemianguy100bohemianguy100

Do you have an example code snippet or perhaps a link to an example online?

 

Thanks.

My OwnMy Own
Try with this.  change the limit of your SOQL from 10,20,30 like that. so that you are  able to view the data. Happy Coding :) 
Page : 
<apex:page controller="MultiRepeatController">
     <apex:pageBlock >
        <apex:pageBlockSection columns="3">    
                <apex:pageBlockSectionItem >    
                    <apex:repeat value="{!lst1}" var="set1" rendered="{!IsList1}">
                           <apex:outputLabel value="{!set1.Name}" /> <br></br> 
                    </apex:repeat>  
                </apex:pageBlockSectionItem>
                
                 <apex:pageBlockSectionItem >
                    <apex:repeat value="{!lst2}" var="set2" rendered="{!IsList2}">
                           <apex:outputLabel value="{!set2.Phone}" /> <br></br>
                    </apex:repeat> 
                 </apex:pageBlockSectionItem> 
                 
                 <apex:pageBlockSectionItem >
                        <apex:repeat value="{!lst3}" var="set3" rendered="{!IsList3}">
                               <apex:outputLabel value="{!set3.Fax}" /> <br></br>
                        </apex:repeat>  
                 </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
     </apex:pageBlock>
</apex:page>

 Controller

public with sharing class MultiRepeatController {

    public List<Contact> lst1 {get;set;}
    public List<Contact> lst2 {get;set;}    
    public List<Contact> lst3 {get;set;}  
    
    public boolean IsList1 {get;set;}  
    public boolean IsList2 {get;set;}  
    public boolean IsList3 {get;set;}  
    
    public MultiRepeatController(){
    
         this.lst1 = new List<Contact>();  
         this.lst2 = new List<Contact>(); 
         this.lst3 = new List<Contact>();   
         
         this.IsList1 = false;
         this.IsList2 = false;
         this.IsList3 = false;  
         
         Integer iCount = 0; 
         
         // Dump the data to List object
         for(Contact obj : [select Name,Phone,Fax from Contact limit 1000]){
             if(iCount > 0 && iCount < 10)
                    lst1.add(obj); 
             
              if(iCount > 10 && iCount < 20)
                    lst2.add(obj); 
              
              if(iCount > 20 && iCount < 50)
                    lst3.add(obj); 
                    
           iCount++;   
         }
         
         if(!lst1.isEmpty())
             IsList1 = true; 
 
         if(!lst1.isEmpty())
             IsList2 = true;      

         if(!lst1.isEmpty())
             IsList3 = true; 
    } 
}

 

cvuyyurucvuyyuru

You can also do like this.

 

With the help of Java script and no controller.

 

In this example, I inserted data into table with Hyperlink alloted to it.

 

This table takes only 3 rows.

 

 

<apex:page standardController="Contact" recordSetVar="Contact">
<script>
var arraddress= new Array();
var arrid= new Array();
var i=0;
var j=0;
document.write('<table border="1px"><tr>');
</script>
<apex:form >
 <apex:repeat value="{!Contact}" var="a">
 
    <script>
    //alert('second');
    arraddress[i]='{!a.name}';
    arrid[i]='{!a.id}'
    document.write('<td><a href="https://ap1.salesforce.com/'+arrid[i]+'">'+arraddress[i]+'</a></td>');
    j++;
    i++;
    if(j == 3)
    {
        document.write('</tr>');
        j=0;
        document.write('<tr>');
    }
   
    </script>
    
 </apex:repeat>
    <script>
        document.write('</tr></table>');
    </script>
</apex:form>

</apex:page>

 

This was selected as the best answer
bohemianguy100bohemianguy100

Thanks for the help.  Both methods worked as I needed.  I appreciate both solutions! 

 

Thank you!

DemiraliDemirali

How can I add image to that? 

 

 

 

<apex:page controller="propinReferences"  sidebar="false"   contentType="text/html" >
<script>
var arraddress= new Array();
var arrid= new Array();
var ref= new Array();
var i=0;
var j=0;
document.write('<table border="0px"><tr>');
</script>
<apex:form >
 <apex:repeat value="{!referenceaccounts}" var="acct">
 
    <script>
    //alert('second');
    arraddress[i]='{!acct.name}';
    arrid[i]='{!acct.id}';
    ref[i]='{!acct.Logo_URL__c}'

   <!-- This would be usual link to an image on visualforce='<apex:image url="{!acct.Logo_URL__c}" width="50px" height="50px"/>'-->
        document.write('<td><a href="https://ap1.salesforce.com/'+arrid[i]+'">'+ arraddress[i]+'</a></td>');
     
     j++;
    i++;
    if(j == 5)
   
    {
        document.write('</tr>');
        j=0;
        document.write('<tr>');
    }
   
    </script>
    
 </apex:repeat>
    <script>
        document.write('</tr></table>');
    </script>
</apex:form>

</apex:page>