AngularJS kendo grid with custom command which includes template doesn't handle events

Question

I have an angularjs - kendo UI grid-based solution. In the controller for the grid I have placed the following code:

$scope.customClick = function(e) {       
    $scope.$apply(
                function() {
                    e.preventDefault();
                    alert('customClick');
                });
}; 

$scope.gridOptions = {
    dataSource: $scope.gridData,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    scrollable: true,
    sortable: true,
    filterable: true,
    selectable: true,
    editable: "inline",
    columns: [
        {
          command :[ {text: "", template: '<input type="checkbox" id="check-all"  />', click: $scope.customClick} ]

        },
        {field: "DocumentKey", title: "Document Key"},
        {field: "Sender", title: "Sender"},
        {field: "Recipient", title: "Recipient"},
        {field: "ChangeDate", title: "ReceivedBy Time"},
        {field: "FlowComment", title: "Comment"},
        {field: "Location", title: "Location"}
        ]
    };

});

Added checkbox is displayed fine, but I don't know how to handle the click event. $scope.customClick is not triggered after clicking on check box.

Answer 1

A fairly old question, the user had probably found a solution long ago, but in case google search gets someone to this question, it's good to have an answer. JavaScript combined with libraries like KendoUI and AngularJS usually allow us to solve problems by using several different approaches, but here is one of them:

Say you have a grid defined like this:
<div kendo-grid="kendo.myGrid" k-options="gridOptions"></div>

Your JavaScript code to define this grid might look like this:

$scope.gridOptions = {
            dataSource: new kendo.data.DataSource({
                data: dataFromSomeLocalVariableMaybe,
                pageSize: 10
            }),
            sortable: true,
            pageable: {
                pageSizes: [10, 20, 50]
            },
            columns: [{
                field: "column1",
                title: "Column 1",
                width: "100px"
            }, {
                field: "column2",
                title: "Column 2",
                width: "120px"
            }, {
                command: [{
                    template: "<span class='k-button' ng-click='doSomething($event)'> Do something</span>"
                }, {
                    template: "<span class='k-button' ng-click='doSomethingElse($event)'> Do something else</span>"
                }],
                title: " ",
                width: "100px"
            }]
        };

Notice the $event that is passed to ng-click call to a function. That $event contains the actual click event data.

If it would be like this, then you would need to have these two functions defined:

$scope.doSomething = function($event) {
    // Get the element which was clicked
    var sender = $event.currentTarget;

    // Get the Kendo grid row which contains the clicked element
    var row = angular.element(sender).closest("tr");

    // Get the data bound item for that row
    var dataItem = $scope.kendo.myGrid.dataItem(row);

    console.log(dataItem);
};

$scope.doSomethingElse = function($event) {
    // Do something else
};

And that's it.