[CLOSED] collapse/expand columns in an html report

May 17, 2011, 03:12 AM

<JG>

I seem to remember several posts requesting a method how to do this.

Have a play.

 
TABLE FILE CAR
PRINT
  COMPUTE '<A onClick="javascript:hide_column(2,2);">Profit<sup>+/-</sup></A>'/D20=RCOST - DCOST;
     DCOST
     RCOST
     SEATS
  COMPUTE '<A onClick="javascript:hide_column(6,2);">Profit 2<sup>*</sup></A>'/D20=RCOST - DCOST;
     DCOST
     RCOST
BY COUNTRY
ON TABLE SET PAGE NOPAGE
ON TABLE HOLD AS CARREP FORMAT HTMTABLE
END
-RUN
-HTMLFORM BEGIN
<html>
<head>
<script>
function initial_hide(hidecols) {
    var cols = hidecols;
    var tbl  = document.getElementsByTagName('TABLE');
    var rows = document.getElementsByTagName('TR');

    for (var row=0; row<rows.length;row++) {
      var cels = rows[row].getElementsByTagName('TD')

	for(i=0; i<cols.length; i++) {
	x=cols[i];
    cels[x].style.display='none';
   }
}
}
function hide_column(col_no,howmany) {
    var stl;
	var whichcol = col_no;
	var celsty;
    var tbl  = document.getElementsByTagName('TABLE');
    var rows = document.getElementsByTagName('TR');

    for (var row=0; row<rows.length;row++) {
      var cels = rows[row].getElementsByTagName('TD')
	  var lastcol = whichcol + howmany ;

    for (var i=whichcol; i<lastcol;i++){
	      celsty = cels[i].style.display;

	      if (celsty=='none') stl = ''; else stl = 'none';
          cels[i].style.display=stl;
	  }
    }
  }
</script>

</head>
<body onLoad="initial_hide([2,3,6,7]);">
!IBI.FIL.CARREP;
</body>
-HTMLFORM END

edited to change 'block' to '' so that it works in both IE and Firefox

This message has been edited. Last edited by: Kerry,

May 17, 2011, 09:22 AM

Francis Mariani

quote:
collapse/expand columns in an html report

Nice!

May 17, 2011, 09:37 AM

Prarie

Very nice!

May 17, 2011, 10:17 AM

ChristianP

Hi JG,
thats, very nice!! Is it possible to collapse rows in a form,(like a datagrid) so that the user can fill the rows if nessecary!!

Regards

Christian

May 17, 2011, 10:19 AM

<JG>

An enhanced version

It changes to background color of the clicked cell when it is expanded or clapsed
and has a mouseover displaying show/hide as appropriate.

 
TABLE FILE CAR
PRINT
     COMPUTE '<A onClick="hide_column(2,2);">Profit</A>'/D20=RCOST - DCOST;
     DCOST
	 RCOST
	 SEATS
	 COMPUTE '<A onClick="hide_column(6,2);">Profit 2</A>'/D20=RCOST - DCOST;
     DCOST
	 RCOST
BY COUNTRY
ON TABLE SET PAGE NOPAGE
ON TABLE HOLD AS CARREP FORMAT HTMTABLE
END
-RUN
-HTMLFORM BEGIN
<html>
<head>
<script>
function initial_hide(linkcols,hidecols) {
var links = linkcols;
var cols = hidecols;
var tbl  = document.getElementsByTagName('TABLE');
var rows = document.getElementsByTagName('TR');
 
var cels = rows[0].getElementsByTagName('TD');
 
 for(i=0; i<links.length; i++) {
 var x=links[i];
 cels[x].style.backgroundColor = 'red';
 cels[x].style.cursor = 'pointer' ;
 cels[x].title="show"
}
 
for (var row=0; row<rows.length;row++) {
var cels = rows[row].getElementsByTagName('TD');
 
 for(i=0; i<cols.length; i++) {
 x=cols[i];
 cels[x].style.display='none';
 
}
}
}
function hide_column(col_no,howmany) {
 var stl;
 var celcol;
 var whichcol = col_no;
 var celsty;
 var celtit;
 
var tbl  = document.getElementsByTagName('TABLE');
var rows = document.getElementsByTagName('TR'); 
var cel0 = rows[0].getElementsByTagName('TD');

 celcol = cel0[whichcol -1].style.backgroundColor;
 if (celcol=='red') {
       celcol = 'green';
    celtit = 'hide';
    }
  else if(celcol=='green') {
       celcol = 'red';
    celtit = 'show';
    }
else {
     celcol = '';
    celtit = '';
 }
 cel0[whichcol -1].style.backgroundColor = celcol;
 cel0[whichcol -1].title=celtit;

for (var row=0; row<rows.length;row++) {
var cels = rows[row].getElementsByTagName('TD')
   var lastcol = whichcol + howmany ;
 
 
for (var i=whichcol; i<lastcol;i++){
       celsty = cels[i].style.display;
if (celsty=='none') stl = ''; else stl = 'none';
       cels[i].style.display=stl;
   }
}
}
</script>

</head>
<body onLoad="initial_hide([1,5],[2,3,6,7]);">
!IBI.FIL.CARREP;
</body>
-HTMLFORM END

Edited to add the pointer cursor as suggested by Waz

This message has been edited. Last edited by: <JG>,

May 17, 2011, 11:02 AM

Norb Eckert

That's pretty cool. Thanks JG!

May 17, 2011, 12:30 PM

<JG>

Thanks, for the kind responses.

Christian, yes you can do it on a row basis for a 'data grid'.

It will take different javascript and how complex that needs to be depends
on is it a single input grid or a grid based on a BY field meaning you have blocks.

WebFOCUS generates strange HTML dependant on the Styling options you use.

May 17, 2011, 05:10 PM

Waz

Don't stop there, perhaps you could finalise the script and sell it to IBI.

I'm saving a copy of this to my Examples APP directrory.

May 17, 2011, 05:17 PM

Waz

By adding

 cels[x].style.cursor = 'pointer' ;

to the initial_hide function, the title will have a hand cursor.

Tried it in IE6, Chrome, Firefox and Safari, and all worked.

Awesome.

This message has been edited. Last edited by: Waz,

May 18, 2011, 02:23 AM

<JG>

quote:
cels[x].style.cursor = 'pointer' ;

Thanks Waz, good suggestion. I've added it to the posted code.

This message has been edited. Last edited by: <JG>,

Prod:	WebFOCUS 7.6.10/8.1.04	Upgrade:	WebFOCUS 8.2.07	OS:	Linux	Outputs:	HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

Prod:	WebFOCUS 7.6.10/8.1.04	Upgrade:	WebFOCUS 8.2.07	OS:	Linux	Outputs:	HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!