+ Start a Discussion
SATHISH REDDY.SATHISH REDDY. 

Visualforce - Expandable table rows showing inner table (No Aura)

Hello everyone,

I'm have a table which shows the list of Opportunities. I want to show an inner table whenever an opportunity row is clicked. Similar to the following. However, i'm unable to achieve this & not sure what i might be missing. Please share your inputs. Thanks in advance!
<table>
                        <thead >
                            <tr>
                                <th>Opportunity</th>
                                <th>Type</th>
                                <th>Start</th>
                                <th>End</th>
                                <th>Budget</th>
                                <th>More ($)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <apex:repeat value="{!wrap}">
                                <tr>
                                    <td>{!wrap.a}</td>
                                    <td>{!wrap.b}</td>
                                    <td>{!wrap.c}</td>
                                    <td>{!wrap.d}</td>
                                    <td>{!wrap.e}</td>
                                    <td>{!wrap.f}</td>
                                </tr>
                                
                                <!--Inner Table-->
                                <tr>
                                    <div>
                                    <table id="newtable">
                                        <thead id="newth">
                                            <tr>
                                                <th colspan="1">Jan</th>
                                                <th colspan="1">Feb</th>
                                                <th colspan="1">Mar</th>
                                                <th colspan="1">Apr</th>
                                                <th colspan="1">May</th>
                                                <th colspan="1">Jun</th>
                                                <th colspan="1">Jul</th>
                                                <th colspan="1">Aug</th>
                                                <th colspan="1">Sep</th>
                                                <th colspan="1">Oct</th>
                                                <th colspan="1">Nov</th>
                                                <th colspan="1">Dec</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                
                                        </tbody>
                                    </table>
                                    </div>
                                </tr>                                    
                            </apex:repeat>
                        </tbody>
                    </table>

I'm trying to something similar & even tried the following example which didnt work. 
https://www.soliantconsulting.com/blog/multi-tiered-tables-in-visualforce/?unapproved=382305&moderation-hash=7a67877d361da32c66a3507d496a06c3#comment-382305
Sanjay Bhati 95Sanjay Bhati 95
Hi 

You can use the Jquery data table to implement your functionality. Please follow the below url.
https://datatables.net/examples/server_side/row_details.html

Let me know if it does not work for you.
 
SATHISH REDDY.SATHISH REDDY.
@Sanjay - I tried that & it doesn't seem to work. Can you pls help me applying it for above logic. Really appreciate your help!
Dushyant SonwarDushyant Sonwar
I think you are trying to implement this plugin.
http://www.htmldrive.net/items/show/141/Expand-table-rows-with-Jquery-jExpand-plugin

Just change the internal data according to your need using apex repeat 

Example:
http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/
 
<apex:page>
<head>
 
	<style type="text/css">
        body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
        #report { border-collapse:collapse;}
        #report h4 { margin:0px; padding:0px;}
        #report img { float:right;}
        #report ul { margin:10px 0 10px 40px; padding:0px;}
        #report th { background:#7CB8E2 url(http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}
        #report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
        #report tr.odd td { background:#fff url(http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/row_bkg.png) repeat-x scroll center left; cursor:pointer; }
        #report div.arrow { background:transparent url(http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
        #report div.up { background-position:0px 0px;}
    </style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">  
			$(document).ready(function(){
				$("#report tr:odd").addClass("odd");
				$("#report tr:not(.odd)").hide();
				$("#report tr:first-child").show();
				
				$("#report tr.odd").click(function(){
					$(this).next("tr").toggle();
					$(this).find(".arrow").toggleClass("up");
				});
				//$("#report").jExpand();
			});
		</script>
</head>
<table id="report">
        <tr>
            <th>Country</th>
            <th>Population</th>
            <th>Area</th>
            <th>Official languages</th>
            <th></th>
        </tr>
        <tr>
            <td>United States of America</td>
            <td>306,939,000</td>
            <td>9,826,630 km2</td>
            <td>English</td>
            <td><div class="arrow"></div></td>
        </tr>
        <tr>
            <td colspan="5">
                <img src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" />
                <h4>Additional information</h4>
                <ul>
                    <li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li>
                    <li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li>
                    <li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li>
                 </ul>   
            </td>
        </tr>
        <tr>
            <td>United Kingdom </td>
            <td>61,612,300</td>
            <td>244,820 km2</td>
            <td>English</td>
            <td><div class="arrow"></div></td>
        </tr>
        <tr>
            <td colspan="5">
                <img src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/125px-Flag_of_the_United_Kingdom.svg.png" alt="Flag of UK" />
                <h4>Additional information</h4>
                <ul>
                    <li><a href="http://en.wikipedia.org/wiki/United_kingdom">UK on Wikipedia</a></li>
                    <li><a href="http://www.visitbritain.com/">Official tourist guide to Britain</a></li>
                    <li><a href="http://www.statistics.gov.uk/StatBase/Product.asp?vlnk=5703">Official 
                        Yearbook of the United Kingdom</a></li>
                </ul>
                
            </td>
        </tr>
        <tr>
            <td>India</td>
            <td>1,147,995,904</td>
            <td>3,287,240 km2</td>
            <td>Hindi, English</td>
            <td><div class="arrow"></div></td>
        </tr>
        <tr>
            <td colspan="5">
                <img src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/125px-Flag_of_India.svg.png" alt="Flag of India" />
                <h4>Additional information</h4>
                <ul>
                    <li><a href="http://en.wikipedia.org/wiki/India">India on Wikipedia</a></li>
                    <li><a href="http://india.gov.in/">Government of India</a></li>
                    <li><a href="http://wikitravel.org/en/India">India travel guide</a></li>
                 </ul>   
            
            </td>
        </tr>
        <tr>
            <td>Canada</td>
            <td>33,718,000</td>
            <td>9,984,670 km2</td>
            <td>English, French</td>
            <td><div class="arrow"></div></td>
        </tr>
        <tr>
            <td colspan="5">
                <img src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/125px-Flag_of_Canada.svg.png" alt="Flag of Canada" />
                <h4>Additional information</h4>
                <ul>
                    <li><a href="http://en.wikipedia.org/wiki/Canada">Canada on Wikipedia</a></li>
                    <li><a href="http://atlas.gc.ca/site/index.html" >Official 
                        Government of Canada online Atlas of Canada</a></li>
                    <li><a href="http://wikitravel.org/en/Canada">Canada travel guide</a></li>
                 </ul>   
            </td>
        </tr>
        <tr>
            <td>Germany</td>
            <td>82,060,000</td>
            <td>357,021 km2</td>
            <td>German</td>
            <td><div class="arrow"></div></td>
        </tr>
        <tr>
            <td colspan="5">
                <img src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/125px-Flag_of_Germany.svg.png" alt="Flag of Germany" />
                <h4>Additional information</h4>
                <ul>
                    <li><a href="http://en.wikipedia.org/wiki/Germany">Germany on Wikipedia</a></li>
                    <li><a href="http://www.deutschland.de/home.php?lang=2">Deutschland.de Official Germany portal</a></li>
                    <li><a href="http://www.cometogermany.com/">Germany Travel Info</a></li>
                 </ul>   
            </td>
        </tr>
    </table>
	</html>
</apex:page>

 
Sanjay Bhati 95Sanjay Bhati 95
Hi,

You can try this solution. This is very easy compare to jquery.
https://www.soliantconsulting.com/blog/multi-tiered-tables-in-visualforce/
SATHISH REDDY.SATHISH REDDY.
Yes, that was my initial reference, however the shared code from above link doesn't work.
Dushyant SonwarDushyant Sonwar
Sathish,

Did you try with the code that i shared above?

is it still not working?