Kendo UI with AngularJS

[Daniel]

Hello,

We have an MVC4 project in which we are using Kendo UI with AngularJS. What is the best way to propagate Kendo events back to Angular? I guess we could manually create handlers for all the events we want to handle in Angular, but I was wondering if there is a more efficient way of doing this.

Thank you.
Daniel D.

[Atanas Korchev]

Hi Daniel,

 If you are using the anguler kendo open source library you can handle events like this:

// controller
function HomeCtrl($scope) {
  $scope.thingsOptions = {
    dataSource: {
      data: [{ name: "Thing 1", id: 1 },
             { name: "Thing 2", id: 2 },
             { name: "Thing 3", id: 3 }]
    },
    dataTextField: "name",
    dataValueField: "id",
    optionLabel: "Select A Thing"
  };

  $scope.thingsChange = function(e) {
    console.log(e.sender.text());
  };
}

// markup
<select kendo-drop-down-list k-options="thingsOptions" k-on-change="thingsChange(kendoEvent)"></select>

If not you have no other option but use regular JavaScript functions to handle Kendo UI events.

Regards,
Atanas Korchev
Telerik

[Daniel]

Atanas,

Thank you for your help. This approach looks pretty straight forward. We will give it a try.

[Daniel]

Another question I meant to ask is: suppose that we have a Kendo UI extension wrapped into an Angular directive. Is there a way to handle the extension's events in the directive itself instead in the controller. We are trying to create reusable pieces of code that would be used across the application and do not want to duplicate  the event handler in every controller. As you can imagine, as the application grows, this model could become very difficult to maintain if every controller has its own copy of the code.

Thank you.

[Daniel]

We can basically map the events inside the link function of the directive:

var app = angular.module("kendoddltest", ['kendo.directives'])

app.directive("ddltest", function(){
    return {
        restrict: "E",
        template: "<select kendo-drop-down-list k-options=\"list\" ></select>",
        link: function (scope, elem, attr) {
            //create the handler
            elem.bind("change", function (e) {
                alert('You selected: ' + e.target.value);
            })
        }
    }
})

However, in this case we lose the ability to use the Kendo specific events. We are limited to the regular HTML events.

Is there a way to handle the Kendo events this way?

Thanks,
Daniel

[Atanas Korchev]

Hello,

 You can then use the bind method of the dropdownlist to attach its events:

        link: function (scope, elem, attr) {

            //create the handler

            elem.data("kendoDropDownList").bind("change", function (e) {

                alert('You selected: ' + e.target.value);

            })

        }

Regards,
Atanas Korchev
Telerik