I am trying to create a template for a column in my kendo grid. The template includes buttons and I'd like to bind an event to these buttons. The problem I am having is that the template cant reference the scope in controller (at least i think this is the problem).
I have tried using grid.appScope as suggested in this post: AngularJS : How to access scope from ui-grid cell template?. When I tried this, I get a JS error when I click the button that says grid is not defined. I'm not sure how to define grid within the template - I tried using JQuery within the template but that didnt seem to work.
I also tried external-scopes but I believe this has been depricated for grid.appScope: external-scopes no longer works in ui-grid
<div id="myGrid" class="overflow-hidden" kendo-grid="myGrid" k-options="myGridOptions"></div>
$scope.onRadioChange = function (id) { console.log("Here: " + id};
$scope.myGridOptions= {
dataSource: myDataSource,
columns: [
{ field: "buttonfield", template: "<label class=\"btn btn-primary\"> <input type=\"radio\" name=\"options-#:id#\" id=\"myButton\" autocomplete=\"off\" checked ng-click=\"onRadioChange(#:id#)\"> Click me</label>"
],
height: 500,
resizable: false,
editable: false,
selectable: "row",
batch: false,
sortable: true,
scrollable: true
}
The above example results in no errors or feed back. Clicking the button does not log to console and the $scope.onRadioChange function is not being called.
How can I call a function defined in my scope from a kendo template? Is it possible?