Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ 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.