Jump to content

BIRT Developer Center Download


File Information

  • Submitted: Mar 08 2016 04:15 PM
  • Last Updated: Mar 09 2016 03:13 PM
  • File Size: 62.32KB
  • Views: 3634
  • Downloads: 62
  • Approved by: Clement Wong
  • Approved on: 09 March 2016 - 03:13 PM
  • Summary: Freeze headers, or have fixed headers so that when you scroll down, they stay put.
  • Content Type: Designs & Code
  • BIRT Version: 4.5

Download Freezing Header Columns for a Cross Tab

- - - - -
crosstab freeze freeze row stickyHeader Excel like freeze header freeze column header fixed header freeze header

This blog (http://blogs.opentex...ed-row-headers/) showed how to fix row headers.

There wasn't one for fixing the position of column headers. So in answering this post about freezing column headers (http://developer.act...hp?/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.

Attached is an OS BIRT 4.5.0 example using the stickyHeader JavaScript library (https://github.com/k...68/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.

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.

There's a few modifications to the prototype.js version of the script (https://github.com/k...prototype.js).We are using the prototype.js version because the OS BIRT Viewer is based on prototype.js.

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 () {

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.

  • 997 Total Files
  • 8 Total Categories
  • 153 Total Authors
  • 31706 Total Downloads
  • Joyplot in iHub Latest File
  • Clement Wong Latest Submitter

0 user(s) are online (in the past 1 minutes)

0 members, 0 guests, 0 anonymous users