javascript - AngularJS kendo grid with custom command which includes template doesn't handle events - Stack Overflow

admin管理员组

文章数量:1289788

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: [
        {
          mand :[ {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.

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: [
        {
          mand :[ {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.

• javascript
• angularjs
• kendo-grid

Share Improve this question Follow edited Mar 24, 2014 at 18:13 Ryan Kohn 13.5k1414 gold badges5959 silver badges8181 bronze badges asked Mar 24, 2014 at 17:47 user3456616user3456616 4111 silver badge33 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

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 bined 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"
            }, {
                mand: [{
                    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.

Omit $scope.

It should as follows: { mand : {text: "", click:customClick}, template: '<input type="checkbox" id="check-all"/>}

Your mand template should include ng directive, in your case ng-change for the checkbox input, which would point to your target function:

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

本文标签：