How to insert div tag around a report elements like a table

A Nishant

I cannot figure out how to insert a div tag around a table.

kclark

What are you trying to do with the table?

A Nishant

I was not able to add scroll bar to the table, so I thought of putting it into a div element and then set the div's overflow property to 'auto'.
Anyway, div might be required for various things, so whats the easiest way of doing this in birt?

Tubal

I think the HTML Emitter in 4.2 is what has the bug, and is why the scrollable cell isn't working.<br />
<br />
There is no way to add a div around a table or cell.<br />
<br />
You can add an id to an element by using the 'bookmark' property, and then use jquery to modify the css or property of the element.<br />
<br />
So for example, select your cell (or row, or table, etc) and click on the bookmark property in the property window, and name it. if your bookmark property was set to 'myElementId' then the html element would show something like <td id="myElementId"....>.<br />
<br />
Then with jquery, you could do something like<br />
<br />
<pre class='_prettyXprint _lang-auto _linenums:0'>$("#myElementId").css('overflow','auto');</pre>
<br />
As kclark mentioned, you could also use an html text element. Anything you put in the text element, will show up in your html code.<br />
<br />
So in a table cell, you could add a text element, select HTML format, and then add whatever you want.<br />
<br />
The code in the html text element might be something like:<br />
<br />
<pre class='_prettyXprint _lang-auto _linenums:0'><div style="overflow:auto"><VALUE-OF>row["myRow"]</VALUE-OF></div></pre>
<br />
And it should show whatever value you have in myRow. I'm not sure if this will solve your autoscroll issue or not.<br />
<br />
Keep in mind this is only relevant if your report is rendered in HTML format.

johnw

To add a DIV tag around a table or cell, use the Bookmark property. It will add a DIV around the element with the id being whatever the Bookmark expression evaluates to.

A Nishant

<blockquote class='ipsBlockquote' data-author="'Tubal'" data-cid="116671" data-time="1368309003" data-date="11 May 2013 - 02:50 PM"><p>
I think the HTML Emitter in 4.2 is what has the bug, and is why the scrollable cell isn't working.<br />
<br />
There is no way to add a div around a table or cell.<br />
<br />
You can add an id to an element by using the 'bookmark' property, and then use jquery to modify the css or property of the element.<br />
<br />
So for example, select your cell (or row, or table, etc) and click on the bookmark property in the property window, and name it. if your bookmark property was set to 'myElementId' then the html element would show something like <td id="myElementId"....>.<br />
<br />
Then with jquery, you could do something like<br />
<br />
<pre class='_prettyXprint _lang-auto _linenums:0'>$("#myElementId").css('overflow','auto');</pre>
<br />
As kclark mentioned, you could also use an html text element. Anything you put in the text element, will show up in your html code.<br />
<br />
So in a table cell, you could add a text element, select HTML format, and then add whatever you want.<br />
<br />
The code in the html text element might be something like:<br />
<br />
<pre class='_prettyXprint _lang-auto _linenums:0'><div style="overflow:auto"><VALUE-OF>row["myRow"]</VALUE-OF></div></pre>
<br />
And it should show whatever value you have in myRow. I'm not sure if this will solve your autoscroll issue or not.<br />
<br />
Keep in mind this is only relevant if your report is rendered in HTML format.<br /></p></blockquote>
<br />
I was successful in adding adding a div tag and putting the table into it by writing javascript in text element.<br />
But now I am not able to add classname to the div in javascript.<br />
I have linked a css file to the report according to the following tutorial :<br />
<a class='bbc_url' href='http://help.eclipse.org/galileo/index.jsp?topic=/org.eclipse.birt.doc/birt/format.7.4.html'>http://help.eclipse.org/galileo/index.jsp?topic=/org.eclipse.birt.doc/birt/format.7.4.html</a><br />
<br />
After linking the css I wrote following javascript : <br />
<br />
<br />
<script><br />
<br />
var divForNavigator = document.createElement("div"); //a new div element<br />
divForNavigator.className = 'x-panel-header'; //add class to div element<br />
var navigatorCell = document.getElementById("navigatorCell");//the parent element to which div is to be appended<br />
var navigator = document.getElementById("navigator");// the child element which is to be appended to div<br />
navigatorCell.appendChild(divForNavigator);//append div to parent element<br />
divForNavigator.appendChild(navigator);// append child element to div<br />
<br />
</script><br />
<br />
But here problem is that, the style class which I have added to div is not reflecting in the preview of the report.