CODEWITHSUNDEEP
angularjskendo-uikendo-mobile
uloco
uloco

Reputation: 2421

Using KendoUI methods in AngularJS

How can I use the methods provided by KendoUI widgets in an AngularJS application? For the configuration of the widgets the directive attributes are used within the markup via k- prefixes, I know. But in the documentation, there are a lot of methods assigned to the widgets. For example the kendo-mobile-tab-strip widget has a switchTo method.

The example shows to use it this way (without angular)

var app = new kendo.mobile.Application();
function onClick() {
  var tabstrip = app.view().footer.find(".km-tabstrip").data("kendoMobileTabStrip");
  tabstrip.switchTo("#bar"); //activate "bar" tab
}

How can I access the app variable in an Angular controller, when I just use a <kendo-mobile-application> directive to initialize the app?

Is there any other (proper) way of using the widget methods? I'm curious of the best practice here, because this all feels not like Angular...

Upvotes: 0

Views: 1701

Answers (2)

kwangsa
kwangsa

Reputation: 1711

I never using kendo mobile application so it might be different but in general to access the kendo object in the $scope object by adding identifier in kendo attribute per example below. 

<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());
   };
 });
</script>

http://docs.telerik.com/kendo-ui/AngularJS/introduction#getting-widget-references

Upvotes: 1

user2943490
user2943490

Reputation: 6940

When you supply a value to the widget's attribute (or to a k-scope-field attribute), that becomes the name of the scope property which you can use to get a reference to the widget.

HTML

<div ng-controller="MainCtrl">
    <div kendo-grid="myGrid"></div>
    <!-- or -->
    <div kendo-grid k-scope-field="myGrid"></div>
</div>

Controller

angular.controller("MainCtrl", function($scope) {
    // the widget is accessible from the scope
    $scope.myGrid.doSomething();
});

You're right, calling methods on widget isn't like Angular. So in most cases you want to be putting this in your own directives, wrapping kendo's widgets. This lets you keep DOM specific code out of your application controllers and contained in directives, where they belong.

HTML

<div ng-controller="MainCtrl">
    <my-grid-directive></my-grid-directive>
</div>

Directive

angular.controller("myGridDirective", function() {
    return {
        template: "<div kendo-grid='myGrid'></div>",
        link: function (scope, element, attrs) {
            scope.myGrid.doSomething();
        }
    };
});

Upvotes: 4

Related Questions