Kendo UI with AngularJS

6 posts, 2 answers
  1. Daniel
    Daniel avatar
    12 posts
    Member since:
    Sep 2013

    Posted 24 Oct 2013 Link to this post

    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.
  2. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 25 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Daniel
    Daniel avatar
    12 posts
    Member since:
    Sep 2013

    Posted 25 Oct 2013 Link to this post

    Atanas,

    Thank you for your help. This approach looks pretty straight forward. We will give it a try.
  4. Daniel
    Daniel avatar
    12 posts
    Member since:
    Sep 2013

    Posted 25 Oct 2013 Link to this post

    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.
  5. Daniel
    Daniel avatar
    12 posts
    Member since:
    Sep 2013

    Posted 27 Oct 2013 Link to this post

    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
  6. Answer
    Daniel
    Daniel avatar
    12 posts
    Member since:
    Sep 2013

    Posted 28 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top