New to Kendo UI for jQuery? Download free 30-day trial

Attach click Event Handler for Custom Commands in AngularJS Grid


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


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?


The following example demonstrates how to apply the necessary approach.

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

        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 = $("tr"); // get the current table row (tr)
            // get the data bound to the current table row
          var data = this.dataItem(tr);
                    return false;

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

                $scope.mainGridOptions = {
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "//"
                        pageSize: 5,
                        serverPaging: true,
                        serverSorting: true
                    sortable: true,
                    pageable: true,
                    columns: [{
                        command: [{
                            name: "customButton",
                            click: $scope.clickHandler
In this article