[Solved] Kendo Grid and Circular References / BreezeJS Solution?

[Andrew]

I'm rather bugged that binding a kendo grid to a datasource with circular references causes a stack overflow.  I digged into the Kendo code and believe this is a viable solution so I would like to hear thoughts and possibly see it implemented so I don't have to keep track of our custom hack.

From kendo.all.js, line 5166:

var ObservableObject = Observable.extend({
        init: function(value) {
            var that = this,
                member,
                field,
                parent = function() {
                    return that;
                };

            Observable.fn.init.call(this);

            value._objectVisited = true;
            for (field in value) {
                member = value[field]; 
                if (field.charAt(0) != "_" && (member && !member._objectVisited)) {
                    member = that.wrap(member, field, parent);
                }
                 
                that[field] = member;
            }

            that.uid = kendo.guid();
        },

The bold parts are what I added to prevent the recursive call to cause the circular reference / maximum range exceeded / stack overflow death.  Maybe the member expression needs modified slightly but I'm not sure why you can't implement something similar to allow other third parties like Breeze to work flawlessly with the grid.

What am I missing here?  And if this is not the solution, why is there no roadmap to fix this issue?  This seems like something that should be handled on the Kendo end.

[Mihai]

Hello,

I'm not the DataSource expert, but I'm replying about BreezeJS.  We recently opened this repository containing a Breeze-Kendo data source binding.

There is a sample app which demonstrates a Grid with a Breeze data source.  If you want to run the sample you'll need NodeJS and MongoDB.  But if your server is already properly setup for BreezeJS, then you need to load breeze-kendo.js in your app and define your data source as described in usage.

Regards,
Mihai
Telerik

 

 

[Andrew]

I've had no success with the library you mentioned.  Should be a simple swap out, yet when I execute on our end the data gets queried and returned then errors with the following stack:

TypeError: Cannot read property 'toLowerCase' of undefined
at calculateAggregate (http://localhost:5750/Scripts/kendo.all.js:6166:70)
at Object.Query.aggregate (http://localhost:5750/Scripts/kendo.all.js:6138:21)
at calculateAggregates (http://localhost:5750/Scripts/kendo.all.js:6296:22)
at Observable.extend._process (http://localhost:5750/Scripts/kendo.all.js:7632:41)
at Observable.extend.success (http://localhost:5750/Scripts/kendo.all.js:7446:18)
at Object.jQuery.extend.proxy.proxy [as success] (http://localhost:5750/Scripts/jquery-2.0.3.js:731:14)
at http://localhost:5750/Scripts/breeze.kendo.js:68:29
at deferred.promise.then.wrappedCallback (http://localhost:5750/Scripts/angular.js:11319:81)
at deferred.promise.then.wrappedCallback (http://localhost:5750/Scripts/angular.js:11319:81)
at deferred.promise.then.wrappedCallback (http://localhost:5750/Scripts/angular.js:11319:81) undefined



Also, I am not sure why we need this extension.  Ideal solution would be to bind directly to breeze entities without the need of the breeze extension data source.

[Mihai]

Hi,

I'm sorry, I should have mentioned that the breeze-kendo2 repository is experimental and not officially supported.

This said, if you can send me a small test case I can look into it further.

The binding is necessary because Kendo relies on certain API provided by kendo.data.DataSource and Observable objects.  Since it doesn't recognize a Breeze entity, Kendo will convert it into an ObservableObject -- and this fails, as you noticed, when there are circular links.  Your fix may appear to work for displaying the data, but it would most certainly fail for modifying it (i.e. when the grid is editable).

Regards,
Mihai
Telerik

 

 

[John]

I'm using the code from github for breeze-kendo (https://github.com/kendo-labs/breeze-kendo) but I am getting the error shown below. This is a simple view with a grid hitting a breezewebapi. Any ideas? Has anyone else gotten this to work?

TypeError: undefined is not a function
message: "undefined is not a function"
stack: "TypeError: undefined is not a function↵    
at BreezeTransport.$.extend.read (http://localhost:50941/Scripts/kendo/custom/breeze-kendo.js:67:20)↵    
at http://localhost:50941/Scripts/kendo/kendo.all.min.js:11:22041↵    
at ht.extend._queueRequest (http://localhost:50941/Scripts/kendo/kendo.all.min.js:11:24882)↵    
at ht.extend.read (http://localhost:50941/Scripts/kendo/kendo.all.min.js:11:21871)↵    
at ht.extend.query (http://localhost:50941/Scripts/kendo/kendo.all.min.js:11:27758)↵    
at ht.extend._query (http://localhost:50941/Scripts/kendo/kendo.all.min.js:11:28224)↵    
at ht.extend.fetch (http://localhost:50941/Scripts/kendo/kendo.all.min.js:11:28158)↵    
at new ut.ui.DataBoundWidget.extend.init (http://localhost:50941/Scripts/kendo/kendo.all.min.js:28:12380)↵    
at HTMLDivElement.<anonymous> (http://localhost:50941/Scripts/kendo/kendo.all.min.js:10:2045)↵    
at Function.jQuery.extend.each (http://localhost:50941/scripts/jquery-2.1.1.js:375:23)"
get stack: function () { [native code] }
set stack: function () { [native code] }
__proto__: Error

TypeError: undefined is not a function

1. message: "undefined is not a function"
2. stack: "TypeError: undefined is not a function↵ at BreezeTransport.$.extend.read (http://localhost:50941/Scripts/kendo/custom/breeze-kendo.js:67:20)↵ at http://localhost:50941/Scripts/kendo/kendo.all.min.js:11:22041↵ at ht.extend._queueRequest (http://localhost:50941/Scripts/kendo/kendo.all.min.js:11:24882)↵ at ht.extend.read (http://localhost:50941/Scripts/kendo/kendo.all.min.js:11:21871)↵ at ht.extend.query (http://localhost:50941/Scripts/kendo/kendo.all.min.js:11:27758)↵ at ht.extend._query (http://localhost:50941/Scripts/kendo/kendo.all.min.js:11:28224)↵ at ht.extend.fetch (http://localhost:50941/Scripts/kendo/kendo.all.min.js:11:28158)↵ at new ut.ui.DataBoundWidget.extend.init (http://localhost:50941/Scripts/kendo/kendo.all.min.js:28:12380)↵ at HTMLDivElement.<anonymous> (http://localhost:50941/Scripts/kendo/kendo.all.min.js:10:2045)↵ at Function.jQuery.extend.each (http://localhost:50941/scripts/jquery-2.1.1.js:375:23)"
3. get stack: function () { [native code] }
4. set stack: function () { [native code] }
5. __proto__: Error

TypeError: undefined is not a function

1. message: "undefined is not a function"
2. stack: "TypeError: undefined is not a function↵ at BreezeTransport.$.extend.read (http://localhost:50941/Scripts/kendo/custom/breeze-kendo.js:67:20)↵ at http://localhost:50941/Scripts/kendo/kendo.all.min.js:11:22041↵ at ht.extend._queueRequest (http://localhost:50941/Scripts/kendo/kendo.all.min.js:11:24882)↵ at ht.extend.read (http://localhost:50941/Scripts/kendo/kendo.all.min.js:11:21871)↵ at ht.extend.query (http://localhost:50941/Scripts/kendo/kendo.all.min.js:11:27758)↵ at ht.extend._query (http://localhost:50941/Scripts/kendo/kendo.all.min.js:11:28224)↵ at ht.extend.fetch (http://localhost:50941/Scripts/kendo/kendo.all.min.js:11:28158)↵ at new ut.ui.DataBoundWidget.extend.init (http://localhost:50941/Scripts/kendo/kendo.all.min.js:28:12380)↵ at HTMLDivElement.<anonymous> (http://localhost:50941/Scripts/kendo/kendo.all.min.js:10:2045)↵ at Function.jQuery.extend.each (http://localhost:50941/scripts/jquery-2.1.1.js:375:23)"
3. get stack: function () { [native code] }
4. set stack: function () { [native code] }
5. __proto__: Error

[Mihai]

Hi,

Please note that we don't provide official technical support for BreezeJS integration.

The error you pasted doesn't help figuring out the cause.  My suggestion would be to first make sure that your Breeze setup (including server-side) is working properly, before you attempt to integrate it with Kendo.  After that, if you follow the instructions here it should work.

Regards,
Mihai
Telerik