UI-Grid with button in custom cell template - How to cancel row select event?

Question

I am using ui-Grid v 3.0.1.

I have a custom cell template for a particular column which displays a button in each row. I have attached a ng-click attribute which calls the appScope to trigger some action.

All works beautifully.

However, the clicking of the custom template button also causes the selection of the row in question to be toggled.

I need to prevent this from happening.

i.e. a click to the custom template button should leave the current row's selection status as it was.

I suspect I need to cancel the row selection event somehow.

Can anyone point me in the right direction?

vm.gridOptions = {
        data: "vm.myGridData",
        columnDefs: [
            { field: "Col1", displayName: "Col1", width: 100 },
            { field: "Col2", displayName: "Col2", width: 200 },
            { name: " ", cellTemplate: "<div><button ng-click='grid.appScope.displayRecord(row.entity)'><i class='fa fa-search'></i></button></div>" }
        ],
        enableRowSelection: true,
        enableSelectAll: true,
        showGridFooter: true,
        multiSelect: true,
        enableSorting: true,
        enableFiltering: true,
        enableFullRowSelection: true,
        enableRowHeaderSelection: true
    };

Answer 1

Just add

$event.stopPropagation();

to the ng-click attribute as you can see in this plunker.

You can chain javascript calls inside your ng-click attribute just by writing them one next to another with a ; as a separator like this:

ng-click = "instructionOne(); instructionTwo(argument); $event.stopPropagation();"