[SOLVED] Expand/Collapse crosstab javascript

[TheFrenchGuy]

Hey,

after searching so far for javascript, I'm so close from my need but the issue is the html report is generated with expand rows. Indeed i would like to hide the detail from the start.

Enclosed you will find :
_the html I put before my crosstab
_the html I put to the expand/collapse lvl I wanted
_"capture" which is a screen shot of my report


_"capture1" which is a screen shot of the html output I get at start


_"capture2" which is a screen shot of the html output I would like at start

[TheFrenchGuy]

Sorry about multiple post but can only enclose 1 file.

[TheFrenchGuy]

Could an admin aggregate my attachments into a single post (the first) ?

[TheFrenchGuy]

Nobody can't help me to build dat Javascript ? :(

[bdbits]

Never needed to do this myself, but if I get a little time tomorrow I will try to look at a solution.

Any chance you could upload your report spec as an attachment?

[TheFrenchGuy]

Hello there,

Me report is based on proper cube, don't even know if you could upload it. Btw it's a complex report with lot of imbrications ...
The only issue of the script is the html page load with expand rows since I expect collapse ones.

ps : spec in attachment
ps1: care about hidden objects

[MFGF]

Could an admin aggregate my attachments into a single post (the first) ?

Hi,

I just tried to do this, but sadly it's not something the forum software allows us to do. It appears to impose a restriction of 1 attachment per post with a maximum size of 5MB. I have removed the images you included as attachments and uploaded them to imgbb.com and linked to them from your initial post, but I can't create a single post with the multiple html attachments, sorry.

MF.

[TheFrenchGuy]

Hi,

no pb, thanks for editing

[TheFrenchGuy]

I finally found a solution.

[bayani73]

Hi FrenchGuy,

Could you share solution and past xml to post.  I have a similar that I need to implement.  Would appreciate it.

Thanks!

[TheFrenchGuy]

Hi bayani,

first, past this html before your crosstab :

Code Select Expand

<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.  i.e setting to 20 means the padding steps are 20,40,60,80, etc

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/hal/images/" + ( 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 nad the left padding value
                var trCurrent = tbl.rows( i );
                var trCurrentLeft = trCurrent.cells(0).style.paddingLeft;

                // 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 ( 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 )
                                {
                                        trCurrent.cells(0).getElementsByTagName("IMG").item(0).src = "../pat/hal/images/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;
                }
}
        }

// Init of the images to the "collapse" state at start
var topo1=document.getElementById("topo1"); ExpandCollapse(topo1);
var topo2=document.getElementById("topo2"); ExpandCollapse(topo2);
var topo3=document.getElementById("topo3"); ExpandCollapse(topo3);
var topo4=document.getElementById("topo4"); ExpandCollapse(topo4);
var topo5=document.getElementById("topo5"); ExpandCollapse(topo5);
var topo6=document.getElementById("topo6"); ExpandCollapse(topo6);
var topo7=document.getElementById("topo7"); ExpandCollapse(topo7);
var topo8=document.getElementById("topo8"); ExpandCollapse(topo8);
var topo9=document.getElementById("topo9"); ExpandCollapse(topo9);
var topo10=document.getElementById("topo10"); ExpandCollapse(topo10);
var topo11=document.getElementById("topo11"); ExpandCollapse(topo11);
var topo12=document.getElementById("topo12"); ExpandCollapse(topo12);
var topo13=document.getElementById("topo13"); ExpandCollapse(topo13);
var topo14=document.getElementById("topo14"); ExpandCollapse(topo14);
var topo15=document.getElementById("topo15"); ExpandCollapse(topo15);
var topo16=document.getElementById("topo16"); ExpandCollapse(topo16);
var topo17=document.getElementById("topo17"); ExpandCollapse(topo17);
var topo18=document.getElementById("topo18"); ExpandCollapse(topo18);
var topo19=document.getElementById("topo19"); ExpandCollapse(topo19);
var topo20=document.getElementById("topo20"); ExpandCollapse(topo20);
var topo21=document.getElementById("topo21"); ExpandCollapse(topo21);
var topo22=document.getElementById("topo22"); ExpandCollapse(topo22);
var topo23=document.getElementById("topo23"); ExpandCollapse(topo23);
var topo24=document.getElementById("topo24"); ExpandCollapse(topo24);
var topo25=document.getElementById("topo25"); ExpandCollapse(topo25);
var topo26=document.getElementById("topo26"); ExpandCollapse(topo26);
var topo27=document.getElementById("topo27"); ExpandCollapse(topo27);
var topo28=document.getElementById("topo28"); ExpandCollapse(topo28);
var topo29=document.getElementById("topo29"); ExpandCollapse(topo29);
var topo30=document.getElementById("topo30"); ExpandCollapse(topo30);
var topo31=document.getElementById("topo31"); ExpandCollapse(topo31);


</script>

and second, past this html above the data item you want to expand/collapse (total usually) :

Code Select Expand

<img id='topo1' name='topo1' onclick='ExpandCollapse(this)' src='../pat/hal/images/minus.gif' style='cursor:hand; vertical-align:middle; margin-right:2px'/>

As you can see, you have to create 1 name (topo1, topo2) for each data item you want to collapse. To add more ones, just copy paste the "var topo ...." and replace for example the 31 by 32 and add it to your second data item.

Be carefull, I use path image that I think proper to my system. If you get a weird cross, it's that the path is unreadable.
Moreover, the script is based on the padding cell too. I didn't managed it : I actually didn't use padding in my report. The padding allow multiple expand/collapse level.

If any question, don't hesitate to contact me

[Shruthi]

Hi FrenchGuy,

I have seen your solution for crosstab rows expand/collapse.
I have similar requirement but instead of rows, columns should expand & collapse.
Could u help me in doing this.

Thanks!

[sdf]

Hi TheFrenchGuy,

Can you explain a little further the script you provided.
Does topo indicates each line item?
Can this handle 4 levels hierarchy?

Im wondering if this is applicable to below sample:

Item 1
         item1.1
                item1.1.1
                item1.1.2
                item1.1.3
Item 2
         item2.1
                item2.1.1
                item2.1.2
          item2.2
                item2.2.1
Item 3
         item3.1
                item3.1.1
                item3.1.2
                       item3.1.2.1


please advise


sdf