Kendo Grid:在 Angular 中获取小部件实例 [英] Kendo Grid: Getting widget instance in Angular
问题描述
我试图在我的 Angular Controller 中获取 Kendo 网格的一个实例,所以我可以尝试连接到一些事件(和调用方法)我知道这可能不是最佳实践(并且可能应该使用自定义指令),但根据文档,我们应该能够使用...
<input kendo-datepicker="datePicker" k-on-change="onChange()"><脚本>angular.module("app", [ "kendo.directives" ]).controller("MyCtrl",功能($范围){$scope.onChange = function() {警报($scope.datePicker.value());};
});
所以,我试图对网格做同样的事情.我有以下标记...
<div kendo-grid='grid' k-options="vm.gridOptions"></div>
然后在控制器js文件中..
角度.module("mygrid").controller("Grid", ['$scope', Grid]);功能网格($范围){var gridInstance = $scope.grid;...
可以在这里看到
然而,gridInstance 始终是未定义的.有谁知道我是否应该能够对网格执行此操作,如果可以,为什么上述内容总是返回 undefined?
在此先感谢您的帮助
彼得
两个问题:
- 如果您使用controller as"语法,则需要为要访问的内容添加前缀(在您的情况下,您需要
kendo-grid="vm.grid"
而不是剑道网格=网格"
- 当您的控制器实例化时,Kendo UI 小部件尚不存在(类似问题此处),因此您需要使用全局 Kendo UI 事件等待它
所以你的 Html 变成了:
<div data-ng-controller="Grid as vm"><div kendo-grid="vm.grid" k-options="vm.options"></div><div>{{vm.msg}}</div>
您的应用:
(函数(){angular.module("app", ["kendo.directives"]).controller("Grid", ["$scope", Grid]);功能网格($范围){var vm = 这个;var gridData = [{col1:'数据1',col2:'数据2'}, {col1:'数据1',col2:'数据2'}];vm.options = {数据源:gridData,可真实};$scope.$on("kendoRendered", function (event) {var gridInstance = vm.grid;控制台日志(虚拟机);vm.msg = gridInstance === 未定义?未定义":已定义";});}})();
(更新演示)
I was trying to get an instance of the Kendo grid within my Angular Controller, so I can try and hook up to some events (and call methods) I know this is probably not best practice (and should probably use a custom directive), but according to the documentation, we should be able to use...
<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());
};
});
So, I was trying to do the same with the grid. I have the following markup...
<div ng-controller="Grid">
<div kendo-grid='grid' k-options="vm.gridOptions"></div>
</div>
and then in the controller js file..
angular
.module("mygrid")
.controller("Grid", ['$scope', Grid]);
function Grid($scope) {
var gridInstance = $scope.grid;
...
as can be seen here
However, gridInstance is always undefined. Does anyone know if I shoud be able to do this with the grid, and if so why the above always returns undefined?
Thanks in advance for any help
Peter
Two issues:
- If you use the "controller as" syntax, you need to prefix things you want to access (in your case, you need
kendo-grid="vm.grid"
instead ofkendo-grid="grid"
- When your controller is instantiated, the Kendo UI widget doesn't exist yet (similar question here), so you need to wait on it using a global Kendo UI event
So your Html becomes:
<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>
Your app:
(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";
});
}
})();
这篇关于Kendo Grid:在 Angular 中获取小部件实例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!