Kendo Grid editable row issue

Question

I have reproduced the issue I am facing in a plunk .

I have a kendo-grid with editable rows.

1. Click edit & click on the value for the column 'Units In Stock', causes the alert pop-up to fire twice.
2. Click on cancel & then click on the same column again, the pop-up opens only once.

Why does this happen & how do I get around this issue, so the pop-up opens only once, even when the row is on edit mode.

$scope.grid.options = {
dataSource: $scope.dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
    "ProductName",
    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
    { field: "UnitsInStock", title:"Units In Stock", width: "120px", template: '<a href="" ng-click="test(dataItem.UnitsInStock)">{{dataItem.UnitsInStock}}</a>'},
    { field: "Discontinued", width: "120px" },
    { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
editable: "inline"
};

Answer 1

The observer behavior is caused by the fact that even though the field is non-editable, the whole edit row is still built when the Grid is in inline editing mode, so the click event handler gets attached twice.

The most straightforward workaround is to call stopImmediatePropagation() on the event data object. Here is a jQuery doc for the same.

Check out this plunk .