Introduction:
In this Document we will discuss how to freeze
list report column header and crosstab report column header as well as its rows
by creating a single custom JavaScript class in cognos report studio through
HTML object.
Steps:
1)
Open
a report studio.
2)
Select
a blank report
3)
Drag
table having 1 ROWS and 2 COLUMN.
4)
Drag
block from tool box object in to both columns.
5)
In
first column drag list and in second column drag crosstab report from tool box.
6)
Drag
relevant data items into both crosstab and list report according to our
requirement.
7)
Drag
an HTML item from toolbox at the start of the table and write a code in it .
<style>
freezeColumns
{
vertical-align:
top;
padding:
4px 5px 4px 6px;
background-image:
url(../reportstyles/images/silver_grad.png);
background-position:
left top;
background-repeat:
repeat-x;
background-color:
#E7E5E5;
color:
#333333;
border:
1px solid silver;
top:
expression(parentNode.parentNode.parentNode.parentNode.scrollTop-1);
position:
relative;
}
.freezeCorner
{
font-weight:
bold;
vertical-align:
top;
text-align:
center;
padding:
4px 5px 4px 6px;
background-color:
#FFFFFF;
color:
#444444;
border:
none;
top:
expression(parentNode.parentNode.parentNode.parentNode.scrollTop-1);
left:
expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position:
relative;
z-index:10;
}
.freezeRows
{
vertical-align:
top;
padding:
4px 5px 4px 6px;
background-image:
url(../reportstyles/images/silver_grad.png);
background-position:
left top;
background-repeat:
repeat-x;
background-color:
#E7E5E5;
color:
#333333;
border:
1px solid silver;
left:
expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position:
relative;
}
</style>
8)
Select
the list reports and crosstab report and set the property of ‘rows per page’
1000.
9)
Navigate
to Page Explorer à Classes; copy the code below to
your clipboard,
10)
And
then from the Edit menu, click Paste.
<RSClipboardFragment
version="2.0">
<classStyle
name="freezeColumns" label="freezeColumns"/>
<classStyle
name="freezeRows" label="freezeRows"/>
<classStyle
name="freezeCorner" label="freezeCorner"/>
</RSClipboardFragment>
11)
You
can see three new classes, freezeColumns,
freezeRows, and freezeCorner in
the Local Classes pane.
12)
Local
Classes pane with three new classes pasted in from the system clipboard.
13) Select
the list report Block object, and then in the Properties pane, open the Size
& overflow property.
14) Set
Height to 10 cm, Width to 10 cm, and then select Use scrollbars only when
necessary.
15) Select
the Crosstab report Block object, and then in the Properties pane, open the
Size & overflow property.
16) Set
Height to 15cm, Width to 12 cm, and then select Use scrollbars only when
necessary.
17) Select
each column header one by one in list report and from the properties pane
select classes’ property and change
the class as freeze columns.
18) Select
each column header one by one in crosstab report and from the properties pane
select classes’ property and change
the class as freeze columns
19) Select
each row header one by one in crosstab report and from
the properties pane select classes’
property and change the class as a freeze rows.
20) Save
this report and run the report.
For Further visit: http://www.segmentbi.com/
For starters, please edit this page. You are going to drive the inexperienced mad by your omission of a "." period for your first class of freezeColumn. Without the period "." all is for not. Also, newer versions of Cognos will not allow to you choose options of "Use scrollbars on when necessary" on a list or cross tab object. You can set this for things like blocks and the like, but not lists and or crosstabs.
ReplyDeleteNow I see that you actually changed the block size and overflow and not the list and or crosstab object, itself. It is important, though, for audience to know that they just can't tack on the "freezeColumns" class. The list column cell global class must, first be removed, in order for this to work.
ReplyDeleteOK. Another problem..... This code is essentially applying relative positioning to a 'th' element. IE will listen to this, however, Firefox will not. So, this does NOT work in Firefox. It does work in IE, quite nicely. I'm working on a Firefox solution. I'm trying to wrap the 'th' elements with 'div's. Once that is done, apply relative p'ositioning to the 'div's and change the 'divs' to display:block. This seems like it will work. If it does, I'll post.
ReplyDelete