Recently, I've been working on integrating Kendo UI with AngularJS. Despite being new to AngularJS, I'm trying my best to follow the guidelines. However, I've encountered an issue that I can't seem to solve - I am unable to obtain a reference to my Kendo UI grid. I've checked several similar queries on Stack Overflow, but none of them have provided a solution. One key difference in my code is that I am using controllerAs instead of $scope.
Here is the controller code for the DataGrid:
'use strict';
angular
.module('ayotaWebFeApp.datagrid')
.controller('DataGridController', DataGridController);
DataGridController.$inject = ['$scope','$routeParams', 'datagriddataservice'];
function DataGridController($scope, $routeParams, dataservice) {
console.info('DataGridController instantiated.');
var vm = this;
vm.grid = {};
vm.dataTitle = $routeParams.datatype;
// Other controller functions go here...
}
For the HTML part, the following code is used:
<div class="datagrid-container">
<h2>{{vm.dataTitle}}</h2>
<div class="datagrid-grid">
<div kendo-grid="vm.grid"
k-options="vm.dataGridOptions"
k-ng-delay="vm.dataGridOptions"
datagrid-resize />
</div>
</div>
So far, I can only get a reference to the Kendo UI grid through the event sender in the onDataBound function. If you have any suggestions or solutions to this issue, I would greatly appreciate it.