Attach click Event Handler for Custom Commands in AngularJS Grid

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product Version	2017.3.913

Description

How can I attach a handler for the click event of a custom button to a function that is defined in the scope of a Kendo UI Grid in AngularJS projects?

Solution

The following example demonstrates how to apply the necessary approach.

    <div id="example" ng-app="KendoDemos">
        <div ng-controller="MyCtrl">
            <kendo-grid options="mainGridOptions">            
        </kendo-grid>
        </div>
    </div>

    <script>
        angular.module("KendoDemos", ["kendo.directives"])
            .controller("MyCtrl", function ($scope, $window) {          
                $scope.clickHandler = function (e) {
                    var scope = this.$angular_scope;
                    var winObj = scope.returnWindow(); //getting reference to the window object
                    var tr = $(e.target).closest("tr"); // get the current table row (tr)
            // get the data bound to the current table row
          var data = this.dataItem(tr);
          console.log(data.uid);
                    return false;
                }

                $scope.returnWindow = function () {
                    return $window;
                }

                $scope.mainGridOptions = {
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                        },
                        pageSize: 5,
                        serverPaging: true,
                        serverSorting: true
                    },
                    sortable: true,
                    pageable: true,
                    columns: [{
                        command: [{
                            name: "customButton",
                            click: $scope.clickHandler
                        }]
                    }]
                };
            })
    </script>