Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Zach Gavin DelacroixZach Gavin Delacroix 

Alternate populate columns in visualforce

Hi Experts,

I'm trying to alternately populate the columns in my visualforce page with the Account Records. I'm not sure how to do it though.

Here's my page which returns a simple Table with Rows and Columns. 
<apex:page controller="accountController">
  
  <table style="Border:Solid 1px">
      <tr>
          <td style="Border:Solid 1px;background-color:green">
              Column 1
          </td>
          <td style="Border:Solid 1px;background-color:green">
              Column 2
          </td>
          <td style="Border:Solid 1px;background-color:green">
              index
          </td>
      </tr>
      <apex:repeat value="{!wAcc}" var="a">
      <tr>
          <td style="Border:Solid 1px">
              <apex:outputText value="{!a.name}"/>
          </td>
          <td style="Border:Solid 1px">

          </td>
          <td style="Border:Solid 1px">

          </td>
      </tr>
      </apex:repeat>
  </table>
</apex:page>

I have the controller named "accountController" which simply contains a list of Accounts.

When I call this in visualforce, it will only return the table below. What I would like to do is to have the first record in the list to go to the 1st column of first row, then the second record go to the second column of first row, then 3rd record goes to the 1st column in the second row and so on. How do I go about it?

User-added image

Thanks in advance :)







 
Best Answer chosen by Zach Gavin Delacroix
Sumit Kumar Singh 9Sumit Kumar Singh 9
Hello, 

Sometimes, we get issues while rendring as PDF. 
I would sugeest you to modify your controller logic a bit

The controller would be -  
public class accountController{

   public list<table> tablelist {get;set;}
   public accountController(){
         List <Account> AccList = [select id, name from Account]; 
         tablelist = new list<table>();
         integer counter;
         for(integer i=0; i<AccList.size(); i++){
             table  tb = new table();
             tb.column1 = AccList[i].name;
             counter = ++i;
             tb.column2 = (counter < AccList.size()) ? AccList[counter].name : '';    
             tablelist.add(tb);  
         }
     }

    public class table {
        public string column1{get;set;}
        public string column2{get;set;}
    }   
}
And the Visualforce page would be -  
<apex:page controller="accountController" renderAs="pdf">
    <table style="Border:Solid 1px">
        <tr>
          <td style="Border:Solid 1px;background-color:green">
              Column 1
          </td>
          <td style="Border:Solid 1px;background-color:green">
              Column 2
          </td>
      </tr>
    <apex:repeat value="{!tablelist}" var="record">
        <tr>
            <td style="Border:Solid 1px"> {!record.column1} </td>
            <td style="Border:Solid 1px"> {!record.column2} </td>
        </tr>
    </apex:repeat>
    </table>
</apex:page>
Pls let me know, if you have any further issues - 


Thanks, 
Sumit Kumar Singh




 

All Answers

Sumit Kumar Singh 9Sumit Kumar Singh 9
Hello Zach,

You can try this - 
  
<apex:page controller="accountController">
  
  <apex:variable value="{!0}" var="counter"/>
    <table style="Border:Solid 1px">
        <tr>
          <td style="Border:Solid 1px;background-color:green">
              Column 1
          </td>
          <td style="Border:Solid 1px;background-color:green">
              Column 2
          </td>
      </tr>
    <apex:repeat value="{!wAcc}" var="record">
        <apex:outputPanel rendered="{!mod(counter,2)=0}">
            <apex:outputText escape="false" value="<tr>"/>
                <td style="Border:Solid 1px">{!record.name}</td>
        </apex:outputPanel>
        <apex:outputPanel rendered="{!mod(counter,2)=1}">
                <td style="Border:Solid 1px">{!record.name}</td>
            <apex:outputText escape="false" value="</tr>"/>
        </apex:outputPanel>
        <apex:variable value="{!counter+1}" var="counter"/>
    </apex:repeat>
    </table>
 
</apex:page>

It should work fine for you.  

Dont forget to mark best answer if it solves your problem.

Thanks, 
Sumit Kuamr Singh
Zach Gavin DelacroixZach Gavin Delacroix
Thanks a lot Sumit! It worked perfectly for me :)

I'm newbie so I'm not sure how it worked that way though, could you please explain the lines that you have added for my future reference?

I don't want to copy and paste a code without understanding them..

Thank you very much!

-Zach
Sumit Kumar Singh 9Sumit Kumar Singh 9
<apex:variable value="{!0}" var="counter"/>
This line is smilar to initialization  i.e we are initializing the counter value with zero. 
<apex:variable value="{!counter+1}" var="counter"/>
Here, we are incrementing the counter value by 1, something similar to counter++. 
<apex:outputPanel rendered="{!mod(counter,2)=0}">
            <apex:outputText escape="false" value="<tr>"/>
                <td style="Border:Solid 1px">{!record.name}</td>
        </apex:outputPanel>
This block will get rendered when the "counter" is even. As "mod" (something similar "%" in C) function returns the remainder. So, this will produce output, something like this - 

<tr>
    <td> Account Name
    </td>
  
<apex:outputPanel rendered="{!mod(counter,2)=1}">
                <td style="Border:Solid 1px">{!record.name}</td>
            <apex:outputText escape="false" value="</tr>"/>
</apex:outputPanel>
This block will get rendered when the "counter" is odd. So, this will produce output, something like this - 

    <td> Account Name
    </td>
​</tr>

Hope, that helps you.

Thanks, 
Sumit Kumar Singh



 
Zach Gavin DelacroixZach Gavin Delacroix
This is so cool Sir Amit! You helped me a lot today :)

Thank you so much you're one of the Best!
Sumit Kumar Singh 9Sumit Kumar Singh 9
Glad to know that! but my name is Sumit not Amit. Anyway, Amit is my elder's brother name :)

Thanks, 
Sumit Kumar Singh
 
Zach Gavin DelacroixZach Gavin Delacroix
My Apologies sir Sumit for getting your name wrong. :)

By the way, I have a follow up question on this approach that you did.

When I do it in a PDF rendered visualforce, it returns me a different result.

Here's the result below.

User-added image

Thanks
Sumit Kumar Singh 9Sumit Kumar Singh 9
Hello, 

Sometimes, we get issues while rendring as PDF. 
I would sugeest you to modify your controller logic a bit

The controller would be -  
public class accountController{

   public list<table> tablelist {get;set;}
   public accountController(){
         List <Account> AccList = [select id, name from Account]; 
         tablelist = new list<table>();
         integer counter;
         for(integer i=0; i<AccList.size(); i++){
             table  tb = new table();
             tb.column1 = AccList[i].name;
             counter = ++i;
             tb.column2 = (counter < AccList.size()) ? AccList[counter].name : '';    
             tablelist.add(tb);  
         }
     }

    public class table {
        public string column1{get;set;}
        public string column2{get;set;}
    }   
}
And the Visualforce page would be -  
<apex:page controller="accountController" renderAs="pdf">
    <table style="Border:Solid 1px">
        <tr>
          <td style="Border:Solid 1px;background-color:green">
              Column 1
          </td>
          <td style="Border:Solid 1px;background-color:green">
              Column 2
          </td>
      </tr>
    <apex:repeat value="{!tablelist}" var="record">
        <tr>
            <td style="Border:Solid 1px"> {!record.column1} </td>
            <td style="Border:Solid 1px"> {!record.column2} </td>
        </tr>
    </apex:repeat>
    </table>
</apex:page>
Pls let me know, if you have any further issues - 


Thanks, 
Sumit Kumar Singh




 
This was selected as the best answer
Zach Gavin DelacroixZach Gavin Delacroix
Thanks again Sumit! You are awesome and very helpful!