0

The Vf page is currently displaying the products one under the another, that is one product per row, I want to display 3 products per row,I was using panelgrid before when i was explicitly stating each product instead of using repeat,so keeping that in mind i used it again.I read repeat needs to be inside panelgrid, but it still doesn't make any changes to it, it is still same as before, one product per row.

below is all the code, the page is displaying all the products available

VF PAGE

      <style>
             p{

                 color:blue;
              }

             h3{
                 font-size: 15px;
                 color:#280000  ;
               }


              body{
                background-image:url("{!$Resource.BGcheck2}");
                background-repeat:repeat;
              }

     </style>


  <Apex:form >


  <apex:outputText value="{!usermode}  {!Name}" style="float:right;font-weight:bold;color:black;font-size:16px;text-align:left;" />

        <br/><p style="font-size:19px;font-weight:bold;"> Products available today </p><br/>


        <apex:panelGrid columns="3" >  
            <apex:repeat value="{!prodlist}" var="prod">

             <apex:commandLink action="{!prod1button}">

             <apex:param name="prodid"
                         value="{!prod.Productid__c}"
                         assignTo="{!prodid}"/>



            <br/>
            <h3>{!prod.name}(Gray)</h3> 
            </apex:commandlink>
            <p>{!prod.Price__c}</p>
          </apex:repeat>
          </apex:panelgrid>



  </apex:form>
</apex:page>

Class

public Class productslistpage{

    public list<inventory__c> prodlist{get; set;} 
    public string PID{get; set;}
    public string name{get; set;}
    public string usermode{get; set;}
    public String prodid {get; set;}
    public String prodpic {get; set;}
    public String prodpage {get; set;}  
    public String finale {get; set;}  
    integer f;

public productslistpage(){
    prodlist = new list<inventory__c>();

    prodpic = 'testprod1';
    this.name = ApexPages.currentPage().getParameters().get('Name');
    this.usermode = ApexPages.currentPage().getParameters().get('usermode');
    prodlist = [Select prodpic__c,ButtonName__c,Name, Price__c, Stocks__c,productid__c from Inventory__c];
}     

         PageReference pg;

public pagereference prod1button(){
        f=0;
      for(inventory__c product : prodlist)  
      {
          if (product.productid__c == prodid){
              prodpage =  '/apex/' + product.buttonname__c;
                f=1;
          }
     } 


       if(f==1)
       pg = new PageReference(prodpage);  
       else
       pg = new PageReference('/apex/testprodpage');  



      return pg;
     }
}
1
  • As per the documentation for apex:panelGrid, you can't achieve this using apex:repeat inside apex:panelGrid. – jagmohan Aug 16 '17 at 10:17
1

As per the documentation for apex:panelGrid, you can't achieve this using apex:repeat inside apex:panelGrid.

Note that if an <apex:repeat> component is used within an <apex:panelGrid> component, all content generated by the <apex:repeat> component is placed in a single <apex:panelGrid> cell.

However, you can achieve the desired output using <apex:pageBlockSection> and <apex:pageBlockSectionItem>.

Here is an example:

// sample class

public class PanelGridClass {

    public List<Integer> numbers {get; set;}

    public PanelGridClass(){
        numbers = new List<Integer>();
        for(Integer i=1; i<=15; i++){
            numbers.add(i);
        }
    }
}

// Visualforce page

<apex:page controller="PanelGridClass">
    <apex:pageBlock>
        <apex:pageBlockSection columns="3">
            <apex:repeat value="{!numbers}" var="myNum">
                <apex:pageBlockSectionItem>
                    {!myNum}
                </apex:pageBlockSectionItem>
            </apex:repeat>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

// output

enter image description here

Hope this helps.

0

apex:pageBlockSectionItem will be useful in this case. Modify the code starting with to this.

<apex:pageBlock>
        <apex:pageBlockSection columns="3">
            <apex:repeat value="{!prodlist}" var="prod">
                <apex:pageBlockSectionItem>
                <apex:param name="prodid"
                     value="{!prod.Productid__c}"
                     assignTo="{!prodid}"/>
                <br/>
                <h3>{!prod.name}(Gray)</h3> 
                <p>{!prod.Price__c}</p>
            </apex:pageBlockSectionItem>
        </apex:repeat>
    </apex:pageBlockSection>
</apex:pageBlock>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.