nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

onMouseOver in crosstab

ayyalaraj

Hi,
Can anyone tell me how can I change the color of the row when they put mouse on one of the elements in that row in cross tab report?

Irrespective of data, I need to highlight that row on mouse over. Any immediate solution is highly appreciated.

Thanks,
Sekhar

Find more posts tagged with

Comments

mwilliams

Hi Sekhar, 
 
This post from the devShare does this for a table on mouseOver. You could possibly do the same for a crosstab. I haven't tried it, so I'm not completely sure of it. Let me know. 
 
<a class='bbc_url' href='http://www.birt-exchange.org/devshare/designing-birt-reports/571-mouseover-highlight-for-tables-and-charts/#description'>Mouseover Highlight for Tables and Charts - Designs & Code - BIRT Exchange</a>

JasonW

Take a look at one i just added: 
<a class='bbc_url' href='http://www.birt-exchange.org/devshare/designing-birt-reports/1085-client-side-script-on-crosstabs/#description'>Client Side Script on Crosstabs - Designs & Code - BIRT Exchange</a>

ayyalaraj

Jason,
Thanks for your post and its working perfect. To upgrade this, how can I show this highlight to the entire row when the mouse is placed in one of the columns in that row?
Is it possible in cross tab??

Thanks,
Sekhar

JasonW

You can get the parent row by using
var rowob = e.parentNode.parentNode;
but I could not get it to highlight.

JasonW

This example works on the row but does not save existing row highlights.

Jason

ayyalaraj

Thanks Jason. It works perfect. Thats what exactly I was looking for. But if you could tell me how it works, that will be more helpful.
Thanks Michael too...

Thanks,
Sekhar

JasonW

In the oncreate of the aggregation item i set a a varible
gg = gg+1;
myi = "aggr"+gg;
so it gets incremented for each aggregation data item

myi is initialized in the onPrepare of the crosstab

I then set a bookmark on the aggregation data item with the value of
myi;

This give each element a unique element id in the emitted html.

I then use the text element to call client side script to add mouse events to each one of the data items. This is done using the element id created as discussed above.

The final piece was on the mouse event for a data element is to retrieve the parent row and find all "aggr" ids in the row and hightlight them.

Jason

ayyalaraj

This is awesome.. thanks jason.
Also, in the mean time I got one work around to highlight the row in jsp. This also worked for me. Just want to share with you. This is a complete raw implementation, but it works only when you are viewing reports in html format.
What I did is, when you are getting the stream, manipulate that stream whereever the row of data is there, add onmouseover and onmouseout events to it and define the stylesheet. This works too...

JSP Page:
=========
SolutionHelper.doAction( "samples", "dashboard", "mychart_birt.xaction", "Dashboard", parameterss, outputStream , userSession, messagess, null );
String cont = outputStream.toString();
cont = cont.replace("<tr valign="top" align="left" id=", "<tr valign="top" align="left" onMouseOut="this.className='whiteThing';" onMouseOver="this.className='yellowThing';" id=");

out.println(cont);

Stylesheet:
========


Thanks
Sekhar