CODEWITHSUNDEEP
javascriptjqueryangularjskendo-ui
Stefan Rafael
Stefan Rafael

Reputation: 238

Extend Kendo Widget in Kendo-AngularJS application

I am trying to get my extended Kendo Widget to work with AngularJS.

With Kendo only my extended widget works fine you will see from the code below, but with Angular it wouldn't.

This is my code: http://dojo.telerik.com/AbeZO/7

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kendo Menu Extended</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
    <script>
      (function ($) {

        var MyMenu = window.kendo.ui.Menu.extend({
          init: function (element, options) {
            window.kendo.ui.Menu.fn.init.call(this, element, options);
          },
          options: {
            name: "MyMenu",
          },
          extendedFunctionality: function() {
            return "extended functionality";
          }
        });


        kendo.ui.plugin(MyMenu);

        alert('menu extended');


      })(jQuery);

    </script>

  </head>


  <body>

    <div ng-app="app" ng-controller="MyCtrl">

      <p>Telerik Menu with Angular</p>
      <ul kendo-menu k-data-source="menuData" k-rebind="menuData"></ul>
      <p>My extended Menu with Angular</p>
      <ul kendo-my-menu k-data-source="menuData" k-rebind="menuData"></ul>

    </div>

    <p>My extended menu with Kendo only</p>
    <ul id="kendomymenu"></ul>

    <script>
      $("#kendomymenu").kendoMyMenu({
        dataSource: [
          {
            text: "Item 4",   
          },
          {
            text: "Item 5",
          },
          {
            text: "Item 6",
          }
        ],
        select: function () {
          alert(this.extendedFunctionality());
        },
      });


      angular.module("app", [ "kendo.directives" ]).controller("MyCtrl", function($scope){

        $scope.menuData = [
          {
            text: "Item 1",   
          },
          {
            text: "Item 2",
          },
          {
            text: "Item 3",
          }
        ];
      })
    </script>
  </body>
</html>

How to get it to work?

Upvotes: 4

Views: 722

Answers (1)

Atanas Korchev
Atanas Korchev

Reputation: 30661

The menu is special cased by widget name and that's why its data source isn't assigned. You better create a custom directive for that:

     .directive("kendoMenuDirective", function() {
        return {
        restrict: "A",
        link: function(scope, element, attr) {
           var dataSource = scope.$eval(attr.kDataSource);
           $(element).kendoMyMenu({
              dataSource: dataSource
           });
        }
      };
  });

Here is an updated version of your demo: http://dojo.telerik.com/@korchev/uNiDe

Upvotes: 4

Related Questions