# Row click event

Simple example to bind a click event on each row of the DataTable with the help of rowCallback.

<tabset>

> Please click on a row

You clicked on: {{ showCase.message }}

> Please click on a row

You clicked on: {{ showCase.message }}

angular.module('showcase.rowClickEvent', ['datatables']) .controller('RowClickEventCtrl', RowClickEventCtrl); function RowClickEventCtrl($scope, DTOptionsBuilder, DTColumnBuilder) { var vm = this; vm.message = ''; vm.someClickHandler = someClickHandler; vm.dtOptions = DTOptionsBuilder.fromSource('data.json') .withPaginationType('full_numbers') .withOption('rowCallback', rowCallback); vm.dtColumns = [ DTColumnBuilder.newColumn('id').withTitle('ID'), DTColumnBuilder.newColumn('firstName').withTitle('First name'), DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible() ]; function someClickHandler(info) { vm.message = info.id + ' - ' + info.firstName; } function rowCallback(nRow, aData, iDisplayIndex, iDisplayIndexFull) { // Unbind first in order to avoid any duplicate handler (see https://github.com/l-lin/angular-datatables/issues/87) $('td', nRow).unbind('click'); $('td', nRow).bind('click', function() { $scope.$apply(function() { vm.someClickHandler(aData); }); }); return nRow; } }
</tabset>