CODEWITHSUNDEEP
angularjsangular-ui-grid
user2209634
user2209634

Reputation: 649

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

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
    };

Upvotes: 3

Views: 5297

Answers (1)

imbalind
imbalind

Reputation: 1182

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();"

Upvotes: 5

Related Questions