Freeze Columns in Tabular Form/ Report (Classical Report)

Introduction

This post is about “How to Freeze/Fix Column Header Row of a Classic Report” which would be very useful when the number of report columns/rows are more per screen.

Steps to follow

Step 1: Create a classic report and provide a static id to the report.

Step 2: Create a custom report template. Add the below mentioned codes while creating the template in the respective section.

Before Rows:

<table cellpadding=”0″ border=”0″ cellspacing=”0″ summary=”” #REPORT_ATTRIBUTES# id=”report_#REGION_STATIC_ID#”>#TOP_PAGINATION#

</div></td><td><div id=”rh_#REGION_STATIC_ID#”>

</div></td></tr><tr><td><div id=”lb_#REGION_STATIC_ID#”>

</div></td><td><div id=”rb_#REGION_STATIC_ID#”>

Column Heading Template:

<th#ALIGNMENT# align=”center” id=”#COLUMN_HEADER_NAME#” class=”header”>#COLUMN_HEADER#</th>

Before Each Row:

Column Template 1:

<td#ALIGNMENT# align=”center” headers=”#COLUMN_HEADER_NAME#” class=”data”>#COLUMN_VALUE#</td>

After Each Row:

</tr>

After Rows:

</table></div><div class=”CVS”>#EXTERNAL_LINK##CSV_LINK#</div></td></tr>

#PAGINATION#

</table>

Pagination Sub-template: This piece of code will be the same as in other template.

Step 3: Put the below piece of code in the JavaScript > Function and Global Variable Declaration section of the page.

Code:

(function($){$.fn.htmldbDscroll=function(opt){

opt=$.extend({

width:1250,

height:280,

freezeColumns:1,

freezeRows:1,

addCellWidth:50,

addRowHeight:2,

addTblWidth:12,

scrollWidth:18

},opt);

if(opt.freezeColumns<1&&opt.freezeRows<1){

return this;

}

return this.each(function(i){

var lId=this.id.substr(6)

/* styles */

$(“#lh”+lId).css({“right”:”0″,”bottom”:”0″}).parent().css({“right”:”0″,”bottom”:”0″});

$(“#rh”+lId).css({“overflow-x”:”hidden”,”width”:opt.width-opt.scrollWidth,”left”:”0″,”bottom”:”0″}).parent().css({“bottom”:”0″});

$(“#lb”+lId).css({“overflow-y”:”hidden”,”height”:opt.height-opt.scrollWidth,”right”:”0″,”top”:”0″}).parent().css({“right”:”0″,”top”:”0″,”vertical-align”:”top”});

$(“#rb”+lId).css({“overflow”:”scroll”,”width”:opt.width,”height”:opt.height});

/* report cell width */

if(opt.freezeRows>0){

$(“#rb”+lId).find(“tr:first,tr:eq(“+opt.freezeRows+”)”).children().each(function(){

var w=$(this).width()+opt.addCellWidth;

$(this).width(w);

});

}else{

$(“#rb”+lId).find(“tr:first”).children().each(function(){

var w=$(this).width()+opt.addCellWidth;

$(this).width(w);

});

}

/* row process */

if(opt.freezeColumns>0){

$(“#rb”+lId).find(“tr”).each(function(j){

var t1=$(this);

/* set row height and copy row */

var h=t1.height()+opt.addRowHeight;

t1.height(h);

var t2=t1.clone().empty().append(t1.children(“:lt(“+opt.freezeColumns+”)”));

if(j>(opt.freezeRows-1)){

$(“#lb”+lId).children().append(t2);

}else{

$(“#rh”+lId).children().append(t1);

$(“#lh”+lId).children().append(t2);

}

});

}else{

for(var j=0;j<=(opt.freezeRows-1);j++){

$(“#rh”+lId).children().append($(“#rb”+lId).find(“tr:eq(“+j+”)”));

}

/* table width */

if(opt.freezeColumns>0){

if($(“#lh”+lId).children().width()>$(“#lb”+lId).children().width()){

var w=$(“#lh”+lId).children().width();

$(“#lb”+lId).children().width(w);

$(“#lh”+lId).children().width(w);

}else{

var w=$(“#lb”+lId).children().width();

$(“#lh”+lId).children().width(w);

$(“#lb”+lId).children().width(w);

}

if($(“#rh”+lId).children().width()>$(“#rb”+lId).children().width()){

var h=$(“#rh”+lId).children().width()+opt.addTblWidth;

$(“#rb”+lId).children().width(h);

$(“#rh”+lId).children().width(h);

}else{

var h=$(“#lb”+lId).children().width()+opt.addTblWidth;

$(“#rh”+lId).children().width(h);

$(“#rb”+lId).children().width(h);

}

$(“#rh”+lId).children().css({“table-layout”:”fixed”});

$(“#rb”+lId).children().css({“table-layout”:”fixed”});

/* scroll */

$(“#rb”+lId).scroll(function(){

$(“#rh”+lId).scrollLeft(this.scrollLeft);

$(“#lb”+lId).scrollTop(this.scrollTop);

});

}})(jQuery);

Step 4: Create a Dynamic action with the settings, as mentioned below.

Create “set scroll” dynamic action with event as “After Refresh” and Region as your classic report region.
Create Action as “Execute Javascript Code” and apply the below mentioned code.

$(“#report_NADD_PIPELINE”).htmldbDscroll({freezeColumns:1});

Where NADD_PIPELINE is the STATIC_ID of my classic report.

Note:

In the above function “freezeColumns:1” will fix the 1st column. In case you need to fix the first 2 or 3 columns, then change its numbering to 2 or 3 accordingly

(ex: freezeColumns:2).

Call To Action:

For Oracle apex development and customization please do visit our company website https://doyensys.com/

Conclusion

Using the above mentioned, you can freeze the column headers. Using the above mentioned, you can freeze the column headers.

Rajan Chandru