jquery - controles - kendo ui free

Kendo Grid: Obtener instancia de widget en Angular

Question

Estaba tratando de obtener una instancia de la grilla Kendo dentro de mi Controlador Angular, así que puedo tratar de conectarme a algunos eventos (y llamar a métodos) Sé que esto probablemente no sea la mejor práctica (y probablemente debería usar una directiva personalizada), pero de acuerdo con la documentación , deberíamos poder usar ...

<div ng-app="app" ng-controller="MyCtrl">
<input kendo-datepicker="datePicker" k-on-change="onChange()">
</div>
<script>
 angular.module("app", [ "kendo.directives" ]).controller("MyCtrl",
   function($scope) {
 $scope.onChange = function() {
 alert($scope.datePicker.value());
};

});

Entonces, estaba tratando de hacer lo mismo con la grilla. Tengo el siguiente marcado ...

<div ng-controller="Grid">
  <div kendo-grid=''grid'' k-options="vm.gridOptions"></div>  
</div>

y luego en el archivo js del controlador.

  angular
    .module("mygrid")
    .controller("Grid", [''$scope'', Grid]);

    function Grid($scope) {             
      var gridInstance = $scope.grid;
      ...

como se puede ver aquí

Sin embargo, gridInstance siempre está indefinido. ¿Alguien sabe si debería poder hacer esto con la grilla, y si es así, por qué lo anterior siempre devuelve indefinido?

Gracias de antemano por cualquier ayuda

Peter

Answer 1

Dos problemas:

1. Si usa la sintaxis de "controlador como", debe prefijar las cosas a las que desea acceder (en su caso, necesita kendo-grid="vm.grid" lugar de kendo-grid="grid"
2. Cuando se crea una instancia de su controlador, el widget Kendo UI aún no existe (pregunta similar aquí ), por lo que debe esperar en él mediante un evento global Kendo UI

Entonces tu Html se convierte en:

<div data-ng-app="app">
    <div data-ng-controller="Grid as vm">
        <div kendo-grid="vm.grid" k-options="vm.options"></div>
        <div>{{vm.msg}}</div>
    </div>
</div>

Tu aplicación:

(function () {
    angular.module("app", ["kendo.directives"])
        .controller("Grid", ["$scope", Grid]);

    function Grid($scope) {
        var vm = this;

        var gridData = [{
            col1: ''data1'',
            col2: ''data2''
        }, {
            col1: ''data1'',
            col2: ''data2''
        }];

        vm.options = {
            dataSource: gridData,
            editable: true
        };

        $scope.$on("kendoRendered", function (event) {
            var gridInstance = vm.grid;
            console.log(vm);
            vm.msg = gridInstance === undefined ? "undefined" : "defined";
        });
    }
})();

( demostración actualizada )