Kendo UI and angular - no widget in $scope

Question

I'm using Kendo UI version 2014.2.716 with AngularJS version 1.2.27, and I made a grid using a directive

<div ng-controller="MyController as ctrl">
    <div id="myGrid" kendo-grid k-options="{some options}"></div>
    <button ng-click="ctrl.doSomething()"></div>
</div>

I read that if you give a name to the grid (like this: kendo-grid="myGridOnScope"), you can access the widget in the controller scope in this way:

myModule.controller('MyController', function($scope) {
   this.doSomething = function() {
       console.log($scope.myGridOnScope);
   }
}

The console.log should log a widget object, but in my case it's undefined. What am I doing wrong? Thanks for the help

Answer 1

I have found out the problem myself, so I'm going to post an answer if someone has the same problem. If you use the controllerAs syntax in AngularJS, you can't just write the name of the widget - you have to prefix it with your controller alias.

Take a look at this example:

<div ng-controller="MyController as ctrl">
    <div kendo-grid="myGridName"></div>
</div>

This will not give you the grid object on the $scope - for that you need to add the ctrl prefix:

<div ng-controller="MyController as ctrl">
    <div kendo-grid="ctrl.myGridName"></div>
</div>

Now you have access to the widget in your controller like this:

angular.module('MyModule',['kendo.directives'])
    .controller('MyController', function($scope){
        // this gives you the widget object
        console.log(this.myGridName);

        // however, this doesn't work
        console.log($scope.myGridName);
});

I hope I helped someone with this post. Cheers,

Answer 2

Try waiting for the event that Kendo emits.

Html

<div kendo-grid="grid" options="gridOptions"></div>

Javascript

$scope.$on("kendoWidgetCreated", function(event, widget){
    if (widget === $scope.grid) {
        console.log($scope.grid);
    }
});

Edit: See this Plunker

Answer 3

It is because angular is too fast and the kendo element doesn't exist when you try to set the options.

I solved this with a watch.

This is my html code:

<div kendo-grid="ListDesign"></div>

And this is my angular code

 $scope.$watch('ListDesign', function () {
        if ($scope.ListDesign != undefined) {
            var gridOptions = {
                columns: columns,
                sortable: {
                    mode: 'multiple',
                    allowUnsort: true
                }
            };
            $scope.ListDesign.setOptions(gridOptions);
            $scope.ListDesign.setDataSource(dataSource);
        }
    });

Does this answer your question?