Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
mxalix258mxalix258 

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.

 

Thanks for your help.

SoCal AdminSoCal Admin

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>

 
SFFSFF

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 BDeepthi 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>