kendo ui自定义小部件角度指令

Question

I have extended kendo grid

(function($) {
 var MyGrid = kendo.ui.Grid.extend({
    init: function(element, options) {
        kendo.ui.Grid.fn.init.call(this, element, options);
    },
    options: {
        name: 'MyGrid'
     }
    })
    kendo.ui.plugin(MyGrid);
    })(jQuery);

How to use custom widget in angular way.

Currently I am able to see the new directive is creating successfully, but not interpolating.

Answer 1

According to the telerik forum discussion here:

http://www.telerik.com/forums/extending-the-grid-in-angular-kendo-does-not-work

The problem seems to be in this block of code in kendo.angular.js:

 defadvice(kendo.ui, "plugin", function(klass, register, prefix){ this.next(); pendingPatches = $.grep(pendingPatches, function(args){ return !defadvice.apply(null, args); }); createDirectives(klass, prefix == "Mobile"); }); 

This causes all calls to kendo.ui.plugin() to be intercepted and for createDirectives() to be called on the passed in class. The problem is that a kendoGrid directive has already been created for the default non-extended grid, and so when kendo.ui.plugin() is called again for the new extended grid, a second kendoGrid directive is created which causes AngularJS to throw a multiple directive error.

As you can read in the official answer, Telerik doesn't support user-extended widgets.

All this being said, I'm currently investigating using Angular decorators to actually extend the directives created by Kendo for its widgets, as described here:

https://coderwall.com/p/-8vjxa/cleanly-extend-3rd-party-angularjs-directives