[Solved] Extending the Grid in Angular-Kendo does not work

[DaveJ]

As an example of a sample extend operation, take a look at this link: Make cell readonly in Kendo Grid if condition is met

Using the following code will cause AngularJS to throw the error at the end of this post:

var oEditCell = kendo.ui.Grid.fn.editCell;
var oInit = kendo.ui.Grid.fn.init;
kendo.ui.Grid = kendo.ui.Grid.extend({
    init: function () {
        oInit.apply(this, arguments);
        if (typeof this.options.beforeEdit === "function") {
            this.bind("beforeEdit", this.options.beforeEdit.bind(this));
        }
    },
    editCell: function (cell) {
        var that = this,
            cell = $(cell),
            column = that.columns[that.cellIndex(cell)],
            model = that._modelForContainer(cell),
            event = {
                container: cell,
                model: model,
                field: column.field
            };

        if (model && this.trigger("beforeEdit", event)) {
            // don't edit if prevented in beforeEdit
            if (event.isDefaultPrevented()) return;
        }

        oEditCell.call(this, cell);
    }
});
kendo.ui.plugin(kendo.ui.Grid);

This code will cause the following error in AngularJS:

Error: [$compile:multidir] Multiple directives [kendoGrid, kendoGrid] asking for 'kendoGrid' controller on: <div kendo-grid="">
http://errors.angularjs.org/1.2.15/$compile/multidir?p0=kendoGrid&p1=kendoGrid&p2='kendoGrid'ontroller&p3=%3Cdiv%20kendo-grid%3D%22%22%3E

[DaveJ]

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. 

The solution is probably for the interceptor to check and see if the directive has previously been created. How soon can this be fixed?

[Kiril Nikolov]

Hello Yaron,

Extending the Kendo UI widget is not officially supported and therefore we cannot assist you on this matter. The standard support services cover the built-in functionality of the widgets and when extending the functionality you are on your own and we will not be able to assist you. 

If you think that the issue is in the code that you posted, you can apply your fix and send a pull request to our GitHub repo on the following link:

https://github.com/telerik/kendo-ui-core

Regards,
Kiril Nikolov
Telerik