attach onclick/ng-click event to element in grid databound event

Question

I have a TypeCtrl ES6 class angular controller which uses a kendo datagrid directive and has template for grid config options , In the template for the grid, i need to call a method from the TypeCtrl class. I need to attach an onclick or ng-click event to the span within the row of the template. However teh function that needs to be triggered on click belongs to the TypeCtrl class. How can i get the context of TypeCtrl within the databound event of teh kendo grid. I see that "this" points to the kendo grid here,

Here is what i have, please let me know as to how i can access teh controller method within the databound event

//Grid options defined in Class TypeCTrl along with openSub method

    class TypeCtrl{
        constructor() {}
        $onInit() {
            this.gridOptions = {
            name: 'test',
            dataBound: function(e) {
                //Find the span and on click , attach the typectrl controller's opensub method
                let grid = this
                let item = grid.tbody.find('#testClick');
                let value = item.innerHTML;
                item.on('click', this.openSub(value);

            }
            columns: [{
                    field: 'subscriptionName',
                    hidden: true,
                    groupHeaderTemplate: function(dataItem) {
                        let temp;
                        let sname = dataItem.value;
                        if (sname) {
                            temp = '<span id="testClick">' + sname + '</span>';
                        }
                        return temp;
                    }.bind(this)
                }, {
                    field: 'name',//Todo: show icons
                    title: 'name'
                }, {
                    field: 'version',
                    title: 'version'
                }]
            }
        }

            openSub(name) {
                alert('thisis a box');
            }
        }

        TypeCtrl.$inject = ['$scope'];

    angular.module('core').controller('TypeCtrl', TypeCtrl);

    export default TypeCtrl;

I see that when i click on the span tag, the context of this is lost and opensub method is not called. I ned to get to the opensub method when clicked on the row template , can i do this in the dataBound function??

or any other way s?

voskhod voskhod · Accepted Answer · 2017-07-20T06:43:17

The common approach is to build AngularJS app with components. If you create a component that contains your grid, then you'll be able to call openSub() method from the template: ng-click="$ctrl.openSub()". In this case, this in your method will point to the TypeCtrl.

attach onclick/ng-click event to element in grid databound event

1 Answers