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>
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 '<a href="' + renderURL.toString() + '"><img src="/html/icons/radiobutton-unchecked.png" width="15" height="15" border="0" /></a>';
}
},
....
];
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