Home Analytics DevShare
The community of Analytics developers are invited to follow and participate in the developer network.
OpenText technical experts collaborate with supported customers and partners in the Magellan product area.

Freeze headers, or have fixed headers so that when you scroll down, they stay put.

Clement WongClement Wong EM mod
edited March 9, 2016 in DevShare
This blog (http://blogs.opentext.com/how-to-scrolling-crosstab-with-fixed-row-headers/) showed how to fix row headers.<br />
<br />
There wasn't one for fixing the position of column headers. So in answering this post about freezing column headers (http://developer.actuate.com/community/forum/index.php?/topic/38979), I thought I would post this to the DevShare so that someone could use it, or improve upon it. It's is a prototype and I'm sure there are other ways of doing this. So please improve it.<br />
<br />
Attached is an OS BIRT 4.5.0 example using the stickyHeader JavaScript library (https://github.com/kingkool68/stickyHeader) as a base to fix the column headers for a cross tab. The magic happens in the HTML report item (red color) that contains the <SCRIPT> contents. It is located in the first cell so that it can be called on other pages.<br />
<br />
In the example, there are two header rows to fix or make sticky. In the generated HTML, we need to pull these two <TR> from the <TBODY>, and move them into a newly created <THEAD>. We'll also need to add the stickyheader class to the table so that the JavaScript from stickyHeader will work. This is all wrapped in a callback with a head.js load of the CSS.<br />
<br />
There's a few modifications to the prototype.js version of the script (https://github.com/kingkool68/stickyHeader/blob/master/stickyheader.prototype.js). We are using the prototype.js version because the OS BIRT Viewer is based on prototype.js.<br />
<br />
One of those modification was to change the event observations from the window to the DIV 'document', among others. From Event.observe(window,'scroll',function() { to document.getElementById('Document').onscroll = function () {<br />
<br />
To test this example, run the report, make your browser's window shorter so that you'll get a vertical scroll bar. Then scroll down and you'll see the fixed (<DIV>) header appear.

Clement Wong
Principal Analytics Architect

OpenText Corporation
http://www.actuate.com | http://www.opentext.com

Sign In or Register to comment.