Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
ShowAll Questionssorted byDate Posted
mxalix258

# Two column visualforce page

Hi all,

Is it possible to iterate through records in visualforce and place them into parallel columns?

For example, instead of it being:

Name    Number     Location
Name    Number     Location

It would be:

Name   Number    Location       Name    Number    Location

Name   Number    Location       Name    Number    Location

It would fill the first column going down, then continue of the top of the second column.

I'm a newbie to VF, but you might be able to this with an array with concatenation.   Here is the pseudocode for 2 solutions.  The 2nd one just uses to parallel Divs, but if users don't see the difference, do you really care?

Sorry for the pseudo code, but theory is faster than results  :)

Example list of 50 records (make sure you process the LAST record if not even numbered)

//   Basically you store each "row" in an array and concatenate the cells.

Solution #1

===========

Dim TableCell as String array((list.size+1)/2)

For (x = 1 to (list.size / 2)) {

TableCell[x] = "<tr><td>" + [data] + </td>

}

For (x = (list.size / 2)+1 to list.size) {

// Offset by 50 and complete the 2nd half

TableCell[x-(list.size/2)] = TableCell[x-(list.size/2)] + "<td>" + [data] + </td> + </tr>

// Double check the array index pointer above to make sure it places the 51st item into the 1st array item correctly.

}

//Verify the last Record was added -> Do this on yur own (being lazy)

//Print the table

Output "<table>";

For x = 1 to list.size {

output TableCell[x] + "/r/n"

}

Output "</table>"

Solution #2

===========

use 2 parallel DIVs or Spans.  Simpler, but two different tables and 2 different divs

output <Div><table>

For (x = 1 to (list.size / 2)) {

output "<tr><td>" + [data] + </td> + </tr>

}

Output </table> </div>

output <Div2><table>

For (x = (list.size / 2)+1 to list.size) {

output "<tr><td>" + [data] + </td> + </tr>

}

Output </table></div2>

SFF

Sure, just create an apex:panelGrid with columns="2" and then create an apex:datatable with each panel. It's up to you, of course, to ensure that the number of records in each datatable's list is equal - you can't use the same list for each datatable.

Hope this helps,

Deepthi B
Hello,

Please check the below sample code:
```<apex:page standardController="Account" recordSetVar="acc">
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection columns="2">
<apex:repeat var="v" value="{!acc}">
<apex:pageBlockSectionItem >
<apex:inputField value="{!v.Name}"/>
<apex:inputField value="{!v.Industry}"/>
</apex:pageBlockSectionItem>
</apex:repeat>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>```