December
13th
2013

Javascript callback on row click event with Primefaces datatable
by

Today with Primefaces, there is no way to call a Javascript function when an user select a row on a datatable.
The only solution I found is to use the ajax event:

<p:ajax event="rowSelect" oncomplete="doSomething();" />

But sometimes like me, what you want is only execute some codes on the client side, not on the server side by sending a new request. Unfortunately, no event attributes for client side have been implemented yet for the datatable component of Primefaces (at least, the version 3.5). So here is a workaround I found in order to execute some Javascript codes when the user has selected a row:

<p:dataTable var="row" value="#{myBeans.rows}" rowKey="#{row.id}" selectionMode="single" widgetVar="myTable">
	<p:column headerText="...">...</p:column>
</p:dataTable>

 

var f = myTable.onRowClick; // initial callback
myTable.onRowClick = function(event, rowElement) {
	// Call initial callback (we have to use apply because the method is using 'this'.
	f.apply(myTable, [event, rowElement]);
	var selectedRows = myTable.selection; // Array of selected row keys
	doSomething(selection); // Your callback
};