You need to sign in to do that
Don't have an account?
Sakshi Chauhan
dynamic render of table inside output panel on command link click inside master table
I have two objects..master and child.
I am generating html table inside pageblock section for master record with end column as command link "Show/Hide" which should display sub panel having child records table and hide them on same link click.
Below is table in visualforce:
<apex:form id="forma">
<apex:outPutPanel>
<table class="list" style="width:100%;" border="0" cellpadding="0" cellspacing="0">
<thead>
blah blah...
</thead>
<tbody>
<apex:repeat value="{!ProductItemListWrapper}" var="pr" >
<tr class="dataRow even first " data-id="<%= {!pr.ProdId} %>" onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}" style="{!IF(qL.subItemsCount>0,'background-color: lightblue','')}">
<td >adnkand </td>
<td> abc </td>
<td class="dataCell " width="5%">
<apex:commandLink id="show" styleClass="sakshi" action="{!createBreakdownList}" rendered="{!IF(qL.subItemsCount>0,'true','false')}" value="Show" rerender="return false" >
<apex:param value="{!qL.quoteLineItemId}" assignTo="{!qLItemID}" name="param"/>
</apex:commandLink>
</tr>
<tr>
<td colspan="18">
<apex:outputPanel id="thePanel">
<div id="{!qL.quoteLineItemId}" >
<table class="list" style="width:100%;" border="0" cellpadding="0" cellspacing="0">
<tr class="dataRow even first " >
<th class="headerRow "> <div>Unit </div></th>
<th class="headerRow "> Length</th>
<th class="headerRow "> Quantity</th>
</tr>
<apex:repeat value="{!qlItemB}" var="qlBrkdown" id="breakdownList">
<tr>
<td class="dataCell " colspan="1"><span class="sectionCControls" >{!qlBrkdown.Unit__c} </span></td>
<td class="dataCell " colspan="1"><span class="sectionCControls" >{!qlBrkdown.Length__c} </span> </td>
<td class="dataCell " colspan="1"><span class="sectionCControls" >{!qlBrkdown.Quantity__c}</span> </td>
</tr>
</apex:repeat>
</table>
</div>
</apex:outputPanel>
</td>
</tr>
</apex:outputPanel>
below is my jquery:
var jQuery = $.noConflict(true);
jQuery(document).ready(function($){
$("[id$='thePanel']").hide();
$("[id$='show']").click(function(event){
var link = $(this);
var id = $(this).closest("tr").data("id");
$("[id$='thePanel']").slideToggle('200', function() {
if ($(this).is(":visible")) {
link.text('Hide');
} else {
createsubList();
link.text('Show');
}
});
event.preventDefault();
});
});
Please any one can suggest me approach to the same .
I am generating html table inside pageblock section for master record with end column as command link "Show/Hide" which should display sub panel having child records table and hide them on same link click.
Below is table in visualforce:
<apex:form id="forma">
<apex:outPutPanel>
<table class="list" style="width:100%;" border="0" cellpadding="0" cellspacing="0">
<thead>
blah blah...
</thead>
<tbody>
<apex:repeat value="{!ProductItemListWrapper}" var="pr" >
<tr class="dataRow even first " data-id="<%= {!pr.ProdId} %>" onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}" style="{!IF(qL.subItemsCount>0,'background-color: lightblue','')}">
<td >adnkand </td>
<td> abc </td>
<td class="dataCell " width="5%">
<apex:commandLink id="show" styleClass="sakshi" action="{!createBreakdownList}" rendered="{!IF(qL.subItemsCount>0,'true','false')}" value="Show" rerender="return false" >
<apex:param value="{!qL.quoteLineItemId}" assignTo="{!qLItemID}" name="param"/>
</apex:commandLink>
</tr>
<tr>
<td colspan="18">
<apex:outputPanel id="thePanel">
<div id="{!qL.quoteLineItemId}" >
<table class="list" style="width:100%;" border="0" cellpadding="0" cellspacing="0">
<tr class="dataRow even first " >
<th class="headerRow "> <div>Unit </div></th>
<th class="headerRow "> Length</th>
<th class="headerRow "> Quantity</th>
</tr>
<apex:repeat value="{!qlItemB}" var="qlBrkdown" id="breakdownList">
<tr>
<td class="dataCell " colspan="1"><span class="sectionCControls" >{!qlBrkdown.Unit__c} </span></td>
<td class="dataCell " colspan="1"><span class="sectionCControls" >{!qlBrkdown.Length__c} </span> </td>
<td class="dataCell " colspan="1"><span class="sectionCControls" >{!qlBrkdown.Quantity__c}</span> </td>
</tr>
</apex:repeat>
</table>
</div>
</apex:outputPanel>
</td>
</tr>
</apex:outputPanel>
below is my jquery:
var jQuery = $.noConflict(true);
jQuery(document).ready(function($){
$("[id$='thePanel']").hide();
$("[id$='show']").click(function(event){
var link = $(this);
var id = $(this).closest("tr").data("id");
$("[id$='thePanel']").slideToggle('200', function() {
if ($(this).is(":visible")) {
link.text('Hide');
} else {
createsubList();
link.text('Show');
}
});
event.preventDefault();
});
});
Please any one can suggest me approach to the same .
James Loghry
Add an id to the apex:outputPanel and use the rerender="youridgoeshere" attribute in the apex:commandLink tag. Additionally, check that your createBreakdownList method is returning a null PageReference. Also, keep in mind that ids are case sensitive in Visualforce ("yourId" is different than "yourid")