Show Hide Few columns rows in a report

Question

Hi All,
I had requirement to develop an application having a report and based on some condition we need to hide or show few rows on clicking. Please view this report [here |http://apex.oracle.com/pls/otn/f?p=33897:1]
For example if I give CUSTOMER_ID as a hiper link when I click on "1" first 5 rows only should be visible. That is I need to toggle between hidden and shown condition.
I tried using Java Script
<script type="text/javascript">
<!--
function toggle_visiblity(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
//-->
</script>
And then using this script in query selecting the table and enclosing in &lt;div &gt; tag.
It works for a single column but few rows it doesn't work. Can someone please help me here. Thanks in advance.
Thanks & Regards,
Vikas Krishna

Answer 1

Hi
Vikas.
Here is an exmaple using emp (changed the empno to reflct you data so it's 10,11,12,13,100,101 etc...). I created a report with the source as
SELECT FLOOR(empno/10)*10 startid,
       DECODE(CEIL(empno/10)*10,FLOOR(empno/10)*10,CEIL(empno/10)*10+10,CEIL(empno/10)*10) endid,
       DECODE(MOD(empno, 10),0, empno, NULL) empno
     , empno empno1
     , ename
     , job
     , mgr
     , hiredate
     , sal
     , comm
     , deptno
FROM bb_emp
ORDER BY empno1Then I created a new template from scratch and selected named rows. I created Row Template one as
<tr>
<td>#EMPNO#</td>
</tr>
<tr id=row#EMPNO1#>
<td>#EMPNO1#</td><td>#ENAME#</td><td>#JOB#</td><td>#MGR#</td><td>#HIREDATE#</td><td>#SAL#</td><td>#COMM#</td><td>#DEPTNO#</td>
</tr>Then I included js in the header as follows
<script type="text/javascript">
<!--
function toggle_visiblity(startid, endid) {
var i;
var id;
for (i=startid; i<=endid; i+=1)
     id = 'row' + i;
     $x_Toggle(id);
//-->
</script>Then I hid the startid and endid columns in the report attributes and change empno (not empno1) to be a link as follows
javascript:toggle_visiblity(#STARTID#,#ENDID#);This now works as (i think) you wanted. Obviously you'll have to put all you formatting etc. from your theme into the template.
Cheers
Ben
http://www.munkyben.wordpress.com
Don't forget to mark replies helpful or correct ;)