1

Thanks for your time. i want to display data table records vertically in visual force page,here is my below code. how to achieve this

 <div id="CountrySelection" >
                    <apex:variable var="count" value="{!1}"   />
                     <legend>Country Selection for National Filing Records Creation</legend>
                    <table cellspacing="0" cellpadding="0" class="slds-table slds-table--bordered slds-no-row-hover">

                        <tr>
                            <apex:repeat value="{!lstAllCountries}" var="f"> 
                                <td class="slds-text-heading--label" style="vertical-align: middle;"> <input type="checkbox" id="chk_national_{!count}" value="{!f.Id}" title= "{!f.Name}" style="margin-right: 3px;vertical-align: middle;"/>{!f.Country_code__c}</td>
                                <apex:outputText rendered="{!AND((MOD(count, 8) == 0), (count < lstAllCountries.size))}" value="</tr><tr>" escape="false"/>
                                <apex:variable var="count" value="{!count+1}"/>
                            </apex:repeat>                                        
                        </tr>                                
                    </table>
                </div>

This is displaying like this, enter image description here

i want this to be in vertical orderwise, is it possible?

1
  • You would need to use a wrapper class and structure the data accordingly. It would be much easier in controlling the columns and height instead of trying to display a flat data in desired format. Also your table is not schematically correct because you have some data outside a td.
    – Raul
    Oct 10 '17 at 12:01
1

Change the code to this.

<div id="CountrySelection" >
                    <apex:variable var="count" value="{!1}"   />
                    <legend>Country Selection for National Filing Records Creation</legend>
                    <table cellspacing="0" cellpadding="0" class="slds-table slds-table--bordered slds-no-row-hover">
                    <apex:repeat value="{!lstAllCountries}" var="f"> 
                        <tr>
                        <td class="slds-text-heading--label" style="vertical-align: middle;"> <input type="checkbox" id="chk_national_{!count}" value="{!f.Id}" title= "{!f.Name}" style="margin-right: 3px;vertical-align: middle;"/>{!f.Country_code__c}</td>
                                <apex:outputText rendered="{!AND((MOD(count, 8) == 0), (count < lstAllCountries.size))}" value="</tr><tr>" escape="false"/>
                                <apex:variable var="count" value="{!count+1}"/>                                         
                        </tr> 
                    </apex:repeat>                                
                    </table>
                    </div>

You need to apply the apex:repeat tag before creating a new row (tr tag). See if this helps

1
  • it displaying vertically fine,but it coming in single col . i need atlest 4 col.
    – Elango
    Oct 10 '17 at 11:13

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.