row selection with Liferay AUI datatable - liferay

Question

I have a Liferay-AUI databable, for which I would like to allow single row selection, and further invoke a script as each row is selected. The script would need to identify which row was just selected and take some action.
Here is an example of current implementation. Suggestions on how to add the above requirements would be appreciated.
<div id="productsTable"></div>
<aui:script use="datatable,datatable-sort,datatable-scroll,datatable-highlight,datatable-selection,liferay-portlet-url">
var roleColumns = [ {
label : 'Providing Role Name',
key : 'providerRoleName',
sortable : true,
allowHTML : true,
formatter : function(o) {
var renderURL = Liferay.PortletURL
.createURL('<%= productDetailUrl %>');
renderURL.setParameter('productId', o.data.productId);
return '<a href="' + renderURL.toString() + '">'
+ o.data.providerRoleName + '</a>';
}
}, {
label : 'Cardinality',
key : 'cardinality',
sortable : true
} ];
new A.DataTable({
columns : roleColumns,
rowSelect: 'mousedown',
data : <%=renderRequest.getAttribute("roles")%>,
scrollable : "xy",
height : "400px",
width : '100%',
sort : 'true',
highlightRows : true
}).plug(A.Plugin.DataTableSelection, {
selectRow : true
}).render('#productsTable');
</aui:script>

Answer 1

I have a strong suspicion this is not the "correct" way to do it - however I was able to isolate DOM node of the row being clicked on this this code.
<aui:script use="datatable,datatable-sort,datatable-scroll,datatable-highlight,datatable-selection,liferay-portlet-url">
var roleColumns = [ {
label : 'Providing Role Name',
key : 'providerRoleName',
sortable : true,
allowHTML : true,
formatter : function(o) {
var renderURL = Liferay.PortletURL
.createURL('<%= productDetailUrl %>');
renderURL.setParameter('productId', o.data.productId);
return '<a href="' + renderURL.toString() + '">'
+ o.data.providerRoleName + '</a>';
}
}, {
label : 'Cardinality',
key : 'cardinality',
sortable : true
} ];
new A.DataTable({
columns : roleColumns,
rowSelect: 'mousedown',
data : <%=renderRequest.getAttribute("roles")%>,
scrollable : "xy",
height : "400px",
width : '100%',
sort : 'true',
highlightRows : true
}).plug(A.Plugin.DataTableSelection, {
selectRow : true
}).render('#productsTable');
A.delegate('click', function(e) {
console.log(e.currentTarget.getDOMNode());
}, '#productsTable', 'tr', myDataTable);
</aui:script>
All is the same except for my addition at the bottoms
A.delegate('click', function(e) {
console.log(e.currentTarget.getDOMNode());
}, '#productsTable', 'tr', myDataTable);
You can also isolate the dataset
A.delegate('click', function(e) {
console.log(e.currentTarget.getData("yui3-record"));
}, '#productsTable', 'tr', myDataTable);

Answer 2

The purpose of this exercise has been to allow for master/detail display within the same page, where the detail changes as a row in the master table is selected. I chose to put a radio button in the first column of the table, as depicted below, and clicking on the radio buttons invokes an action method within the portlet to update row selection and associated detail.
var columns = [
{
label : ' ',
sortable : false,
allowHTML : true,
formatter : function(o) {
if (o.data.isSelected)
return '<img src="/html/icons/radiobutton-checked.png" width="15" height="15" border="0" />';
var renderURL = Liferay.PortletURL.createURL('<%= partnerDetailUrl %>');
renderURL.setParameter('productLineItemRoleId', o.data.id);
return '<img src="/html/icons/radiobutton-unchecked.png" width="15" height="15" border="0" />';
}
},
....
];
I understand the best solution is to use javascript to dynamically update only certain parts of the page, not to perform a form-post with each radio button click. But this works for now, and I can move on to more pressing issues ;).
Thanks,
Randy