Issue with Dynamic View Panel and onColumnClick (CSJS) event - xpages

Question

Using the Dynamic View Panel and trying in the onColumnClick event with client side JS to get the UNID or NoteID of the row the user clicked on. However, the XPage does not load with the error shown below
Error while executing JavaScript action expression
Script interpreter error, line=1, col=9: [ReferenceError] 'rowData' not found
JavaScript code
1: rowData.getNoteID()
The complete XPage code is shown below. Is there a way to get a handle on the row information to build this event handler? Goal is to use client side JS to open a new tab to show the document the user clicked on.
Howard
<xe:dynamicViewPanel
id="dynamicViewPanel1"
var="rowData"
indexVar="index">
<xe:this.data>
<xp:dominoView
var="view1"
viewName="testview">
</xp:dominoView>
</xe:this.data>
<xp:eventHandler
event="onColumnClick"
submit="false">
<xe:this.script><![CDATA[alert('#{javascript:rowData.getNoteID()}');]]></xe:this.script>
</xp:eventHandler></xe:dynamicViewPanel></xp:view>

Answer 1

You can't calculate row's noteId with alert('#{javascript:rowData.getNoteID()}') in CSJS code as this is executed on server side before all the rows get rendered.
Use rowAttrs property instead. It allows you to add an attribute to rendered table row. You'd add an attribute "noteId":
<xe:this.rowAttrs>
<xp:attr
name="noteId"
value="#{javascript:rowData.getNoteID()}">
</xp:attr>
</xe:this.rowAttrs>
The rendered html looks like this then:
The onColumnClick event is fired on rendered
<a id="view:_id1:dynamicViewPanel1:0:_id3:_internalColumnLink" href="#" ...
You can get this element/node in onColumnClick's CSJS code with thisEvent.target.
From there you "walk" upwards with .parentNode twice and get the element <tr ..> with attribute "noteId".
Finally, read the attribute with .getAttribute("noteId").
This is your example with all changes:
<xe:dynamicViewPanel
id="dynamicViewPanel1"
var="rowData"
indexVar="index">
<xe:this.data>
<xp:dominoView
var="view1"
viewName="testview">
</xp:dominoView>
</xe:this.data>
<xe:this.rowAttrs>
<xp:attr
name="noteId"
value="#{javascript:rowData.getNoteID()}">
</xp:attr>
</xe:this.rowAttrs>
<xp:eventHandler
event="onColumnClick"
submit="false">
<xe:this.script><![CDATA[
alert(thisEvent.target.parentNode.parentNode.getAttribute("noteId"));
]]></xe:this.script>
</xp:eventHandler>
</xe:dynamicViewPanel>