+ Start a Discussion
Rakesh KumarRakesh Kumar 

Create Data Grid in Visualforce page?

Hi All,

 

I would like to create a grid on visualforce page.

 

Like

 

Target                col1                 col2                   col3                 col4                  col5     ............... col..n

T1                       row11              row21              row31              row41              row51              row..n          

T2                       row12              row22              row32              row42              row52              row..n     
T3                       row13              row23              row33               row43             row53               row..n     
T4                       row14              row24              row34                row44            row54                row..n   

  
T..n

 

 

Here i have to display dynamically like row 11,row12,row13,row4 according to col1.

 

Please help me to how to iterate the list in such matrix. if you have any idea about apex code then please share me.

 

 

Thanks in Advance

Rakesh

 

Best Answer chosen by Admin (Salesforce Developers) 
Rakesh KumarRakesh Kumar

Hi Abhay,

 

Thanks for your suggestion.

 

According to ur suggestion i tried it but it gives some different type of display by the way

 

I fixed my problem that i am looking for.I would like to share my code that i am using now.

 

Controller.............................

 

 List<Key_Message_vod__c> keyList ;
   List<Key_Message_Status_nov__c> keyStatusList;
   List<Cycle_Plan_Target_vod__c>  targetList{get;set;}
     
   public void myController(){
        keyList = [SELECT Name, Product_vod__c FROM Key_Message_vod__c where Product_vod__c =:productList];
       if(keyList !=null){
             keyStatusList = [SELECT Key_Message_Status_nov__c FROM Key_Message_Status_nov__c where Parent_Key_Message_Report_nov__c =:keyList];           
       }
       targetList= [SELECT Cycle_Plan_Account_vod__r.name FROM Cycle_Plan_Target_vod__c];
   }
   
     public List<Key_Message_vod__c> getRecords()
      {   
          return keyList;
      }
      public List<Key_Message_Status_nov__c> getStatus()
      {   
          return keyStatusList;
      }
      public List<Cycle_Plan_Target_vod__c> getTargetList()
      {   
          return targetList;
      }

 

 

And VF page Code

 

 

  <apex:pageBlock >
     <table border="1" class="main">
        <tr class="thedear">
           <td>
              Target Name
            </td>
            <apex:repeat value="{!Records}" id="repeat1" var="item">
            <td>
                <apex:outputField value="{!item.name}" id="theValue"/>
            </td>
            </apex:repeat>
        </tr>
        <apex:repeat value="{!targetList}" id="repeat2" var="pitem">
        <tr>
            <td><b><apex:outputField value="{!pitem.Cycle_Plan_Account_vod__r.name}" id="theValue"/></b></td>
            <apex:repeat value="{!Status}" id="repeat3" var="item">
                <td>
                    <center><apex:outputField value="{!item.Key_Message_Status_nov__c}" id="theValue"/></center>
                </td>
             </apex:repeat>
         </tr>
          </apex:repeat>
    </table> 

 

 

Rakesh

 

 

All Answers

Abhay AroraAbhay Arora

Hi Rakesh,

 

There are 2 possible approaches for this

1.) Apex Pageblocktable  OR Apex repeat

2.) Wrapper class

 

<apex:pageblockTable value="{!LISTOFITEMS}" var="e">

                                <apex:column headerValue="COL1">
                                    <apex:inputField value="{!e.DATAFORROW1}" />
                                </apex:column>

                                <apex:column headerValue="COL2">
                                    <apex:inputField value="{!e.DATAFORROW1}" />
                                </apex:column>

</apex:pageblockTable>

Rakesh KumarRakesh Kumar

Hi Abhay,

 

Thanks for quick reply.

 

As per as code its oneway dynamic data matrix..

 

here is my code example

 

apex code


public with sharing class NOV_TargetActionClass {

 public void myController(){
        matrix = new List<List<String>>();
       List<Key_Message_vod__c> keyList = [SELECT Name, Product_vod__c FROM Key_Message_vod__c where Product_vod__c =:productList];
       List<Key_Message_Status_nov__c> keyStatusList = [SELECT Key_Message_Status_nov__c FROM Key_Message_Status_nov__c where Parent_Key_Message_Report_nov__c =:keyList];
       List<String> row = new List<String>();
       row.add('Target Name');
       
       for(Integer i = 0; i<keyList.size(); i++){
          row.add(keyList[i].Name);
          
       }
       matrix.add(row);
       
        for(Integer j=0; j<keyStatusList.size(); j++){
             row = new List<String>();
         //  System.debug(keyStatusList[j].Key_Message_Status_nov__c);
           row.add(keyStatusList[j].Key_Message_Status_nov__c);
        }                 
           matrix.add(row);   
   }

}

VF code

 

 
<table border="2">

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

</table>

 

 

i dont know where i am missing ..

 

Rakesh

Abhay AroraAbhay Arora

<table border="2">

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

</table>

 

 

Hope above helps

Abhay AroraAbhay Arora

If this dosent helps lets sumamrize your problem so that i can get you the exact code

 

1.) You have accounts(Rows)

2.) Under each Account You have contacts(Columns)

You want to display the data such as

Account1   Con1 Con2 Con3 Con4 Con5 Con6 Con7 Con8 Con9....ConN

Account2   Con1 Con2 Con3 Con4 Con5 Con6 Con7 Con8 Con9....ConN

Account3   Con1 Con2 Con3 Con4 Con5 Con6 Con7 Con8 Con9....ConN

Account4   Con1 Con2 Con3 Con4 Con5 Con6 Con7 Con8 Con9....ConN

if Above is correct then solution is    

 

<apex:page controller="gridController">
    <apex:repeat value="{!lstAcc}" var="acc">
      <table>
          <tr>
              <td>{!acc.name}</td>
              <td>
                  <table>
                      <tr>
                         <apex:repeat value="{!acc.contacts}" var="con">
                             <td>{!con.name}</td>
                         </apex:repeat>
                      </tr>
                  </table>
              </td>
          </tr>
      </table>
    </apex:repeat>
</apex:page>

 

public with sharing class gridController {
public list<Account> lstAcc{get;set;}
public gridController(){
lstAcc=new list<Account>();
lstAcc=[select id,name,(select  id,name from contacts) from account limit 100];
}
}

 

 

Abhay AroraAbhay Arora

Hi,

 

if your problem is solved mark it as solved

Rakesh KumarRakesh Kumar

Hi Abhay,

 

Thanks for your suggestion.

 

According to ur suggestion i tried it but it gives some different type of display by the way

 

I fixed my problem that i am looking for.I would like to share my code that i am using now.

 

Controller.............................

 

 List<Key_Message_vod__c> keyList ;
   List<Key_Message_Status_nov__c> keyStatusList;
   List<Cycle_Plan_Target_vod__c>  targetList{get;set;}
     
   public void myController(){
        keyList = [SELECT Name, Product_vod__c FROM Key_Message_vod__c where Product_vod__c =:productList];
       if(keyList !=null){
             keyStatusList = [SELECT Key_Message_Status_nov__c FROM Key_Message_Status_nov__c where Parent_Key_Message_Report_nov__c =:keyList];           
       }
       targetList= [SELECT Cycle_Plan_Account_vod__r.name FROM Cycle_Plan_Target_vod__c];
   }
   
     public List<Key_Message_vod__c> getRecords()
      {   
          return keyList;
      }
      public List<Key_Message_Status_nov__c> getStatus()
      {   
          return keyStatusList;
      }
      public List<Cycle_Plan_Target_vod__c> getTargetList()
      {   
          return targetList;
      }

 

 

And VF page Code

 

 

  <apex:pageBlock >
     <table border="1" class="main">
        <tr class="thedear">
           <td>
              Target Name
            </td>
            <apex:repeat value="{!Records}" id="repeat1" var="item">
            <td>
                <apex:outputField value="{!item.name}" id="theValue"/>
            </td>
            </apex:repeat>
        </tr>
        <apex:repeat value="{!targetList}" id="repeat2" var="pitem">
        <tr>
            <td><b><apex:outputField value="{!pitem.Cycle_Plan_Account_vod__r.name}" id="theValue"/></b></td>
            <apex:repeat value="{!Status}" id="repeat3" var="item">
                <td>
                    <center><apex:outputField value="{!item.Key_Message_Status_nov__c}" id="theValue"/></center>
                </td>
             </apex:repeat>
         </tr>
          </apex:repeat>
    </table> 

 

 

Rakesh

 

 

This was selected as the best answer
Abhay AroraAbhay Arora

Hi rakesh,

 

Grt work... Please mark it as solved..

sujathavoonna@gmail.comsujathavoonna@gmail.com
Hi
I have same problem.
Would you please share your javascipt classes.

Thank you
Suja