Advanced Collapse/Expand using JS - Urgent

[shishir4u]

Hi,

I found this link where we can implement the expand/collapse feature in Reports using Javascript : http://support.cognos.com/supported/tti/public/docs/cognos_pp_reporting_collapsi ble_hierarchies_using_scripting.zip?

The collapse/expand option is working fine except for one possible issue. When i am clicking on the + sign at the top of the hierarchy,it is expanding the entire hierarchy rather than just showing the immediate children,I basically want a scenario where on clicking the parent i should be able to see its children and on further clicking the children i should be able to see its grandchildren and by collapsing the row at any level it should collapse all its children recursively. Can you please tell me how can i tweak the javascript code to achieve the same ?

Thanks,
Shishir.

[imts]

Can u post the script here ?

Regards,
Tarun

[shishir4u]

Ya sure . Here is the script.

<script>
// These settings you can change to modify the report processing
var UOM="px"; // Set to unit of measure for padding
var INDENT_SIZE=20; // Set to indent padding step size. Setting to 20 means the padding steps are 20,40,60,80. These have to match the padding applied to the report objects
var UOM_SIZE = UOM.length;
function stripTrailing(string,num) {
if ( string == "") {return parseInt(0);} else {return
parseInt(string.substring(0,string.length-num));}
}

function ExpandCollapse( el )
{
// Grab the ROW that was clicked and the TABLE that contains it
var tr = el.parentElement.parentElement;
var tbl = tr.parentElement.parentElement;
// Set the alternating display values for hiding/showing the row
var sDisplay = ( el.src.indexOf( "minus" ) == -1 ) ? "" : "none";
var sDisplayReverse = ( el.src.indexOf( "minus" ) == -1 ) ? "none" :"";
//Switch the icon for the clicked row
el.src = "../pat/images/PropertyGroup_" + ( el.src.indexOf( "minus") == -1 ? "minus" : "plus" ) + ".gif"; //
// Starting with the row below the clicked row, start checking each row
for ( var i = tr.rowIndex + 1; i < tbl.rows.length; i++ )
{
// Set the Current row indicator and the left padding value
var trCurrent = tbl.rows( i );//assigns the current row number to trCurrent -->skp
var trCurrentLeft = trCurrent.cells(0).style.paddingLeft; //determines the padding that the first cell of this row has with the left margin -->skp
// if the current row contains an IMG in it, it's a clickable level and we either have to stop processing,
// or reset the icons to a + as it's being collapsed

//If the current row has both child and has image at the beginning -->skp
if ( trCurrent.cells( 0 ).firstChild && trCurrent.cells( 0).getElementsByTagName( "IMG" ).length )
{
// If the current row is at the same level or above in the tree, then stop processing
// else reset all the signs below it, essentially collapsing all branches underneath the one that is beig collapsed.
if ( stripTrailing(trCurrentLeft , UOM_SIZE) <=
stripTrailing(tr.cells(0).style.paddingLeft , UOM_SIZE) )
{ break; }
else
{
if (el.src.indexOf( "minus" ) == -1 )//collapse all undern-neath
{
trCurrent.cells(0).getElementsByTagName("IMG").item(0).src =
"../pat/images/PropertyGroup_plus.gif";
}



}
}

// Now, we determine if the row should be hidden or shown.
if ( eval(stripTrailing(tr.cells(0).style.paddingLeft, UOM_SIZE)
+ INDENT_SIZE) < stripTrailing(trCurrentLeft, UOM_SIZE) &&
el.src.indexOf( "minus" ) > 0 )
{
trCurrent.style.display = sDisplayReverse;
} else
{
trCurrent.style.display = sDisplay;
}
}
}

function StartHidden(el)
{
var tbl=el.parentElement.parentElement.parentElement.parentElement;
for (var i = 0; i < tbl.rows.length; i++)
{
var trCurrent = tbl.rows(i);
if (trCurrent.cells(0).style.paddingLeft.indexOf(UOM) > -1)
{
trCurrent.style.display = "none";
}
}
}
</script>

But you might like to look at document too that i am attaching because the logic in the javascript in kind of based on it.

Thanks a lot,
Shishir.