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; } } }

How to dynamically create hyperlink header for all columns of a table?

mehdiesteghamat

<p>hi All,</p>
<p> </p>
<p>I have a report table with many columns (around 200). I would like to add a sort hyper link / button to each column header <strong>dynamically automatically</strong> for each column header (e.g. using onPrepare event, by adding Text box, and embed a button inside it to call a Javascript function which is going to pass values to the report URL (the column and the direction)). </p>
<p> </p>
<p>I have already checked the thrill-through technique, however, I would like to be able to do it dynamically as part of initialize or onPrepare for all columns of the report.</p>
<p> </p>
<p><a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/files/file/1021-dynamic-column-sorting/'>http://developer.actuate.com/community/forum/index.php?/files/file/1021-dynamic-column-sorting/</a></p>
<p> </p>
<p>I am not allowed to use Design Engine.

</p>
<p> </p>
<p>Please let me know if there is any way.</p>
<p> </p>
<p>Thank you,</p>

Find more posts tagged with

Comments

mehdiesteghamat

<p>Just one more ask...is it possible to set the sort key in beforeFactory?!</p>
<p> </p>
<p>I mean sth like :</p>
<p> </p>
<p>table.getListProperty("sort").get(0).setProperty("key","row[\"Entity\"]");</p>
<p> </p>
<p>Thanks for valuable comments if any.</p>
<p> </p>
<p>Soosho</p>

mehdiesteghamat

<p>hi All,</p>
<p> </p>
<p>Since no body provided any answer, I think I am one of the weird users of the BIRT engine. </p>
<p> </p>
<p>So the answer is to add an image link underneath the column header label using a the typical method which is to use a text box.</p>
<p> </p>
<p>Since my report is pretty huge (120 columns), I was lazy enough to not do it manually. As such, I created them as part of the onPrepare method of the main report table. I followed the below mentioned steps:</p>
<p> </p>
<p>1) First, you need to create text element using the element factory:</p>
<p> </p>
<p> var newText = reportContext.getDesignHandle().getElementFactory().newTextItem("sortLink_" + columnList);</p>
<div> </div>
<p> 2) Then set the content type to HTML using another text element where you set its content type to HTML manually as you can see</p>
<p>below. (sorry I was lazy and I wasn't patient enough to find the constant value)</p>
<p> </p>
<div style="margin-left:80px;">newText.setContentType(FilterForm.getContentType());</div>
<div style="margin-left:80px;"> </div>
<div>3) Then set the text for the new text element to some HTML tag which will redirect the user to the same report with new sort direction and column name. </div>
<div> </div>
<div> </div>
<div>
<div>sortIconTag = "<img src=\"" + ( columnList == params["SortKey"].value ? ((params["SortDir"].value == "asc") ? "images/des.gif": "images/asc.gif" ): "images/asc.gif") + "\" alt=\"HTML tutorial\" style=\"width:15px;height:15px;border:0;\">";</div>
<div>newText.content = "<a onclick=\"reportSort('" + columnList +"');\">" + sortIconTag + "</a>";</div>
<div> </div>
<div> </div>
<div>4) find the i-th cell of the header and add the new element to it.</div>
<div> </div>
<div> </div>
<div>ch1 = myTable.getCell(0,-1,1,i+1);</div>
<div>ch1.getContent().add(newText);</div>
<div> </div>
<div> </div>
<div>5) Below you can JavaScript code to call the report with the new column and sort direction.</div>
<div> </div>
<div>
<div>function reportSort(col)//,dir)</div>
<div>{</div>
<div>var outURL = collectCorrentSate()</div>
<div> </div>
<div>// if same column selected</div>
<div>var oldCol = document.getElementById("SortKey_displayText").value;</div>
<div>if (oldCol == col)</div>
<div>{</div>
<div>var dir = document.getElementById("SortDir_displayText").value;</div>
<div>if (dir == "asc")</div>
<div>{</div>
<div>dir = "des";</div>
<div>}</div>
<div>else if (dir == "des")</div>
<div>{</div>
<div>dir = "asc";</div>
<div>}</div>
<div>}</div>
<div>else</div>
<div>{</div>
<div>dir = "asc";</div>
<div>}</div>
<div> </div>
<div>//var outURL = window.location.href;</div>
<div>// //alert("sort col: " + col + " Dir: " + dir);</div>
<div>outURL = AddParamToURL(outURL, "SortKey", col);<span> </span></div>
<div>outURL = AddParamToURL(outURL, "SortDir", dir);<span> </span></div>
<div>window.location.assign(outURL);</div>
<div>}</div>
<div> </div>
<div>Hope you find it helpful.</div>
<div> </div>
<div>Soo</div>
</div>
</div>

JFreeman

<p>Sorry for the delay in getting to you on this one.</p>
<p>Thank you for providing the solution you found.</p>
<p> </p>
<p> </p>
<p>Let us know if you have additional questions.</p>