function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
MattMet86MattMet86 

Visualforce - Display list as multi-column grid

I am trying to get a list of records to display as a group of tiles in a grid style layout. I however cannot get the second record to display in the second column. 

Here is my code:
<apex:repeat value="{!metric}" var="PM"> 
    <apex:outputPanel layout="block" >
        <apex:panelgrid>
                    <apex:image url="{!PM.Badge_Image__c}" styleClass="imageStyle"/>
                    <apex:outputpanel>
                        <apex:panelGroup styleClass="dataStlye"  >
                            <apex:outputText value="{!PM.Performance_Badge__c}"/><br/>
                            <apex:outputText value="{!PM.Name}"/><br/>
                            <apex:outputText value="{!PM.Points__c}"/><br/>
                            <apex:outputText value="{!PM.Earned_Date__c}"/><br/>
                        </apex:panelGroup>
                    </apex:outputpanel>
               </apex:panelgrid>
    </apex:outputPanel> 
      </apex:repeat>

I currently get this:
User-added image

I want this:
User-added image

Any ideas? 
 
scottbcovertscottbcovert
Hi MattMet86,

Basically I think you want to use the columns attribute in apex:panelGrid and probably move the apex:repeat tag.
 
<apex:outputPanel layout="block">
    <apex:panelgrid columns="{!metric.size}">
        <apex:repeat value="{!metric}" var="PM">             
            <apex:panelGroup>
                <apex:image url="{!PM.Badge_Image__c}" styleClass="imageStyle"/><br/>
                <apex:outputText value="{!PM.Performance_Badge__c}" styleClass="dataStlye"/><br/>
                <apex:outputText value="{!PM.Name}" styleClass="dataStlye"/><br/>
                <apex:outputText value="{!PM.Points__c}" styleClass="dataStlye"/><br/>
                <apex:outputText value="{!PM.Earned_Date__c} styleClass="dataStlye""/><br/>
            </apex:panelGroup>
        </apex:repeat>    
    </apex:panelgrid>
</apex:outputPanel>

I didn't actually run this to test it and you might need to do some styling changes, but I think this should get you going in the right direction. Good luck!
 
MattMet86MattMet86
Thanks Scottbcovert but that doesn't work. I still get both records in one column instead of a single record in two columns. 

FYI, I had to change the <apex:panelgrid columns="{!metric.size}"> to <apex:panelgrid columns="2"> as it doesn't recognize size. 
I also had to fix the instances of the word datastyle as you flipped two letters :)
 
scottbcovertscottbcovert
Looks like panelGrid and repeat just don't play well together; try using a table instead:

https://developer.salesforce.com/forums/?id=906F000000095MBIAY