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
SuvraSuvra 

Creating Grid Structure in Visual force

Hi,

 

 

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,

Suvra

wesnoltewesnolte

Hey

 

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

AccName1

AccName2 

 

Cheers,

Wes 

SuvraSuvra

Hi,

 

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:outputText>
    </apex:column>
       <apex:column>
        <apex:repeat id="columns" value="{!columnGrid}" var="k" >
          <td>{!k}</td>
        </apex:repeat>   
    </apex:column>

 </apex:pageBlockTable>  
</apex:pageBlock>
</apex:form>

</apex:page>

 

 

wesnoltewesnolte

Hey

 

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.

 

Cheers,

Wes

 

SuvraSuvra

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

 

Suvra

sekharasekhara

HI,

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

OnurKOnurK

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.

morganeCRMCLOUDERmorganeCRMCLOUDER

up ! I need an answer too ;) 

erikdozsaerikdozsa

Hello guys,

 

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

 

Many thanks!

morganeCRMCLOUDERmorganeCRMCLOUDER

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 !

developer_12345developer_12345

Can you post a sample for the solution?

 

Many Thanks.