IR Report Freeze Column Header Row

Question

In Interactive Report, Can we freeze the column header row ? This is a most wanted requirement asked by customers. More than 50 times requested in past month.
Please help

Answer 1

I have been playing with this problem and came up with this potential solution that has so far worked for me.
Caveats: I am new to this type of coding so check it carefully. It only works with Internet Explorer (its what we use at work). I hope to have a Firefox version someday. Some code used was found online. I gave it proper credit in my usage.
Instrcutions:
In the HTMLHeader of the Edit Page, paste the code shown below. It will lock/freeze the header of an interactive report and (optionally), any number of columns to the left of the report.
To customize it for your needs,
1. edit the line that reads: var LOCKED_COLUMNS=2; to reflect the number of columns to be locked (0 won't lock anycolumns)
2. edit the style section that reads:
<code>
div#apexir_DATA_PANEL
width: 300px; height=200px; overflow: scroll; position:relative; float:left;
</code>
to reflect the width and height for you scrolling window.
3. optionally turn of the pagination (under Pagination in the Report Attribute pagefor the region) if you want to scroll through your entire dataset without paging [possible performance implications].
I tested this with Apex 3.2 and with several themes (1, 3 and8). Hopefully it will work for you.
The code follows:
=====================================
<code>
<script>
// This code copied from: http://javascript.about.com/library/bldom08.htm
document.getElementsByClassName = function(cl)
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++)
var classes = elem.className;
if (myclass.test(classes)) retnode.push(elem[i]);
return retnode;
// End of code copied from: http://javascript.about.com/library/bldom08.htm
var LOCKED_COLUMNS=2;
function applyCSS()
var data_Table=document.getElementsByClassName('apexir_WORKSHEET_DATA');
var tr_Tags=data_Table[0].getElementsByTagName('tr');
for (var i=0;i<tr_Tags.length;i++)
var tab_Cells=tr_Tags[i].childNodes;
for (var j=0; j<LOCKED_COLUMNS; j++)
if (tab_Cells[j].nodeName != 'TD')
{ tab_Cells[j].setAttribute('id', 'Lock_Lateral_Vertical'); }
else
{ tab_Cells[j].setAttribute('id', 'Lock_Lateral'); }
window.onload=applyCSS;
</script>
<!--[if IE]>
<style id="Lock_CSS">
div#apexir_DATA_PANEL
width: 300px; height=200px; overflow: scroll; position:relative; float:left;
table.apexir_WORKSHEET_DATA th
position: relative; z-index: 14; display: table;
top: expression(document.getElementById("apexir_DATA_PANEL").scrollTop-3);
table.apexir_WORKSHEET_DATA td
border: solid 1px grey;
td#Lock_Lateral
background-color: #999999; position: relative; z-index: 15; display: table;
left: expression(document.getElementById("apexir_DATA_PANEL").scrollLeft-3);
th#Lock_Lateral_Vertical
position: relative; z-index: 21; display: inline;
top: expression(document.getElementById("apexir_DATA_PANEL").scrollTop-3);
left: expression(document.getElementById("apexir_DATA_PANEL").scrollLeft-3);
</style>
<![endif]-->
</code>
================================
ackness