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

Creating Grid Structure in Visual force




I need to create one Grid Structure in Visualforce page. The row Headings and Column headings will get populatetd from 2 lists. Can anybody please tell me how to achieve this..


I will give one example. Say, I have a list of Strings containings Account Names and another List containing Contact Names. Now, I need to keep Account Names in rows and Contact names in columns. At least I am trying to acheve this before proceeding further.


Please help..


Thanks in advance,





I'm not sure exactly what you're trying to do, but I'd suggest that you build your strucutre in Apex and use a datatable or repeat to present it i.e. use apex to create a list of lists of strings (List<List<String>>) .


How is the data going to look? Some thing like this?


  ContactName1 ContactName2









The Grid should look like this :


Acc/Contact            Con1                  Con2             Con3


Acc1                     <Some Text>  <Some Text>  <Some Text>


Acc2                     <Some Text>  <Some Text>  <Some Text>


Acc3                     <Some Text>  <Some Text>  <Some Text>



Acc1, Acc2, Acc3 are kept in List accNames and Con1, COn2,Con3 are kept in List conNames, say.


Please find the sample code, which we are trying to use for this..


<apex:page standardController="Opportunity" extensions="GridViewController">
<apex:form >
<apex:pageBlock >
<apex:pageBlockTable id="row" value="{!rowGrid}" var="i">
    <apex:column headerValue="Directory/UDAC">
        <apex:outputText value="{!i}">
        <apex:repeat id="columns" value="{!columnGrid}" var="k" >








I would rely more on Apex and less on VisualForce e.g.


1. Initialise the lists in Apex


public class myController { public List<List<String>> matrix{get;set;} public myController(){ matrix = new List<List<String>>(); List<Contact> contactList = [SELECT id, firstname FROM contact]; system.debug(contactList); List<Account> accountList = [select id, name FROM Account]; system.debug(accountList); List<String> row = new List<String>(); // You know that the top left String will be empty row.add('Acc/Contact'); // setup list of contact labels at top of grid/matrix for(Integer i = 0; i<contactList.size(); i++){ System.debug(contactList[i].firstname); row.add(contactList[i].firstname); } // add the first row to the grid matrix.add(row); System.debug(matrix); // Setup list of account labels in rows of grid for(Integer j=0; j<accountList.size(); j++){ row = new List<String>(); System.debug(accountList[j].name); row.add(accountList[j].name); matrix.add(row); } system.debug(matrix); } }



2. Fetch the list in you visualforce


<apex:page controller="myController"> <table> <apex:repeat value="{!matrix}" var="r"> <tr> <apex:repeat value="{!r}" var="c"> <td>{!c}</td> </apex:repeat> </tr> </apex:repeat> </table> </apex:page>


That shoudl help with the initial setup at least.






Hi, Thanks a lot for your help on this..





i am nt able to retrive data but i am getting only 1st row and column only can u give any suggesstion regarding this .


Hi Wes,


It is a great example, thank you for sharing with the community. Do you mind adding a sample code to populate the table? For example if Contact First Name = 'Jack' and the Account Name = 'Acme' (From your example)


What would be the best way of adding text on the intersaction cell?


Thanks a lot.


up ! I need an answer too ;) 


Hello guys,


Any chance to get an example code for populating the table? :)


Many thanks!


Hi all,


I solved a problem (or at least, turned it up into an easier way) 


Don't bother with Apex tag in your visualforce page. Simply use HTML tag to build your grid. 

Add an in to the <table> tag 


Then, use jquery and Ajax to fill your table with values from a method you have in your controller.


It's hard, but it works. 


Good luck !


Can you post a sample for the solution?


Many Thanks.