AngularJS kendo grid with a custom command that includes a template, does not handle events

Question

I have an angularjs grid based solution - kendo UI. In the controller for the grid, I 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"}
        ]
    };

});

The added checkboxdisplayed is fine, but I don’t know how to handle the click event. $scope.customClickdoes not start after clicking on the checkbox.

Answer 1

, , , , , Google - , . JavaScript , KendoUI AngularJS, , , :

, , :
<div kendo-grid="kendo.myGrid" k-options="gridOptions"></div>

JavaScript :

$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"
            }]
        };

$event, ng-click . $ .

, :

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

.

Answer 2

$scope.

: { command : {text: "", click:customClick}, template: '<input type="checkbox" id="check-all"/>}

Answer 3

In your command template, the ng directive must be specified, in your case ng-change to enter a flag that points to your target function:

{           
  command :[{
   text: "", 
   template: '<input type="checkbox" id="check-all" ng-change="customClick"/>' 
  }]         
}