DataSource save doesn't work after pushUpdate

[Christopher]

Hey folks,

i have a websocket delivers updates for my datasource. So if i get an update, i do a pushUpdate on the datasource an it is also displayed in my grid. But when i edit the specific dataItem i get the following error after clicking on "save". How do i fix this error or is there any workaround? 

Thanks so far.

Chris

 

kendo.all.js:4571 Uncaught TypeError: i.wrap is not a function
    at init (kendo.all.js:4571)
    at init._checkValidity (kendo.all.js:22720)
    at init.validateInput (kendo.all.js:22641)
    at init._validate (kendo.all.js:40512)
    at r.proxy (jquery-1.12.4.js:529)
    at r.trigger (kendo.all.js:124)
    at r.set (kendo.all.js:4637)
    at r.set (kendo.all.js:4803)
    at init.set (kendo.all.js:8280)
    at init.change (kendo.all.js:8480)

 

 

var ObservableObject = Observable.extend({
            init: function (value) {
                var that = this, member, field, parent = function () {
                        return that;
                    };
                Observable.fn.init.call(this);
                this._handlers = {};
                for (field in value) {
                    member = value[field];
                    if (typeof member === 'object' && member && !member.getTime && field.charAt(0) != '_') {
                        member = that.wrap(member, field, parent); //error here
                    }
                    that[field] = member;
                }
                that.uid = kendo.guid();
            },

 

 

[Konstantin Dikov]

Hello Christopher,

Using the following demo as a reference, after updating an existing item with the pushUpdate method, updating the same row with the Grid editing and clicking on the "Save changes" button does not replicate the error:

• http://demos.telerik.com/kendo-ui/grid/editing

With that in mind, please provide a dojo example replicating the issue, so we can debug it locally.



Regards,
Konstantin Dikov
Progress Telerik

[Christopher]

Hi Konstantin,

thanks for the example. There i found where i made a mistake.

 

Regards,

Chris

[Vedad]

Hi,

I don't know if Christopher is still available, but it would be nice if he could point out to what his problem was. 
For some reason I experience exactly the same problem. 

 

Thanks

 

[Silviya Stoyanova]

Hello, Vedad,

I am not sure if Christopher is following the forum threads.

I came across another thread with an identical JavaScript error here. I suspect that there is a possibility for it to be related to the error you are experiencing. To be certain we would need a way of replicating the error locally. It would be great if you could provide more details about the DataSource, as well as a dojo example for troubleshooting and further assistance.

Thank you,

Kind Regards, Silviya Stoyanova Progress Telerik

[Vedad]

Hi Siviya,

thank you for quick response. Problem is that I have pretty complex widget and datasource, so its not easy for me to replicate it on dojo. 

However, process is quite similar to one Christopher described, with slight difference that I use gantt widget. 

Basically, my process and use case is following. I have gantt widget which gets updated in two ways:

1. Manually through widget itself

2. Based on websocket notification

Say, I update task in gantt and extend duration for 2 weeks by updating end date. After update happens on server, I get normal response through datasource, but with slight delay, I get notification from server via websocket that something else has changed on this task (say deadline brach risk). Based on this notification, I retrieve desired task from datasource and do pushUpdate on it. 

After pushUpdate is completed, manual change on widget throw mentioned error:

    lib.js?t=1583425860503:71077 Uncaught TypeError: that.wrap is not a function
    at init (lib.js?t=1583425860503:71077)
    at init._checkValidity (lib.js?t=1583425860503:90815)
    at init.validateInput (lib.js?t=1583425860503:90736)
    at init._validate (lib.js?t=1583425860503:118985)
    at subclass.proxy (lib.js?t=1583425860503:497)
    at subclass.trigger (lib.js?t=1583425860503:66320)
    at subclass.set (lib.js?t=1583425860503:71143)
    at subclass.set (lib.js?t=1583425860503:71325)
    at init.set (lib.js?t=1583425860503:75109)
    at init.change (lib.js?t=1583425860503:75936)
    at init.proxy (lib.js?t=1583425860503:497)
    at init.trigger (lib.js?t=1583425860503:66320)
    at init._change (lib.js?t=1583425860503:97274)
    at init._blur (lib.js?t=1583425860503:97240)
    at Object.<anonymous> (lib.js?t=1583425860503:105935)
    at fire (lib.js?t=1583425860503:3187)

After this every other edit attempt on the widget results with:

    lib.js?t=1583425860503:71077 Uncaught TypeError: that.wrap is not a function
    at init (lib.js?t=1583425860503:71077)
    at init._checkValidity (lib.js?t=1583425860503:90815)
    at init.validateInput (lib.js?t=1583425860503:90736)
    at init.validate (lib.js?t=1583425860503:90719)
    at init.end (lib.js?t=1583425860503:118993)
    at finishEdit (lib.js?t=1583425860503:179129)

This is piece of code triggered upon websocket notification:
 var ganttDataSource = $("#gantt").data("kendoGantt").dataSource;
var ganttElement = ganttDataSource.get(elementId);
ganttElement.risk = newRisk;
ganttDataSource.pushUpdate(ganttElement);

pushUpdate is finished successfully, but after that any action results in messages I listed above. 
I don't know if this action can be affected with fact that it is triggered as reaction on $scope.$broadcast..

Thank you and regards,

Vedad

[Vedad]

I came up with some additional findings, which may be helpful..

Described problem occurs only if I use dataSource.get(elementId) method to retrieve item and adjust risk and then pushUpdate it back again. 
If I load complete task from server and pushUpdate it, everything stays as expected.

regards, 

Vedad

[Martin]

Hello Vedad,

Thank you for the additional information.

Unfortunately it does not help me discover what might be causing the issue. In order to do so, I need to be able to debug the code locally, so I would be really grateful if you could try to isolate the reported behavior in a runnable sample. I will then be happy to assist you.

Looking forward to your reply.

Regards,
Martin
Progress Telerik

[Vedad]

Hi Martin, 

I apologise for not answering immediately, but I got engaged in other features, so I put aside this part of the app. However, recently I returned to it as more requests for feature came up. I also spent some time debugging this, even on kendo lib level, and I tried all possible combinations I could think of, but result is always the same. If item is changed using pushUpdate, action is completed and gantt is updated, but next attempt to change anything on this item fails. 

I know you requested dojo to reproduce issue, but I have angularjs app with a lot of code which handles different things on widget and I cannot make exact setting or post it anywhere due to code proprietary reasons. 

I was suspecting something is wrong with way I prepare item for pushUpdate so I tried following approaches:

(since result is always the same, I will put it at the end for brevity)

// approach 1 - using datasource get

var ganttItem = dataSource.get(item.id);

ganttItem.parentId = SOME OTHER ITEM ID (This is parent of other item, so it is valid)

ganttDataSource.pushUpdate(ganttItem);

// update completes without issues and gantt is updated as expected

// approach 2 - finding item directly in datasource

find item datasource using any JS approach (I used array.filter)

change item parentId same way item.parentId = XXXXXX;

ganttDataSource.pushUpdate(item);

// push update is completed normally, gantt is updated..

I tried combining other approaches, and always, item is updated correctly, but after that, gantt behaviour is broken.

Errors I get (I tried updating title of the item afterwards):

lib.js:71077 Uncaught TypeError: that.wrap is not a function
    at init (lib.js:71077)
    at init._checkValidity (lib.js:90815)
    at init.validateInput (lib.js:90736)
    at init._validate (lib.js:118985)
    at subclass.proxy (lib.js:497)
    at subclass.trigger (lib.js:66320)
    at subclass.set (lib.js:71143)
    at subclass.set (lib.js:71325)
    at init.set (lib.js:75109)
    at init.change (lib.js:75309)
    at HTMLInputElement.proxy (lib.js:497)
    at HTMLInputElement.dispatch (lib.js:4737)
    at HTMLInputElement.elemData.handle (lib.js:4549)
    at HTMLInputElement.trigger (lib.js:4920)
    at Object.trigger (lib.js:7772)
    at HTMLInputElement.<anonymous> (lib.js:7875)

and then:

lib.js:71077 Uncaught TypeError: that.wrap is not a function
    at init (lib.js:71077)
    at init._checkValidity (lib.js:90815)
    at init.validateInput (lib.js:90736)
    at init.validate (lib.js:90719)
    at init.end (lib.js:118993)
    at finishEdit (lib.js:179129)
    at HTMLDivElement.<anonymous> (lib.js:179174)
    at HTMLDivElement.dispatch (lib.js:4737)
    at HTMLDivElement.elemData.handle (lib.js:4549)

I did debugging of the process as much as I could, and looked for differences in item which works vs one which doesn't, and only obvious difference I see at this part of lib:

 set: function (field, value, initiator) {
                var that = this;
                var dirty = that.dirty;
                if (that.editable(field)) {
                    value = that._parse(field, value);
                    if (!equal(value, that.get(field))) {
                        that.dirty = true;
                        that.dirtyFields[field] = true;
                        if (ObservableObject.fn.set.call(that, field, value, initiator) && !dirty) {
                            that.dirty = dirty;
                            if (!that.dirty) {
                                that.dirtyFields[field] = false;
                            }
                        }
                    } else {
                        that.trigger('equalSet', {
                            field: field,
                            value: value
                        });
                    }
                }
            },

- That -contains changed object, but this time this object has many properties I never set (default: {object default values of properties}, field: {object with all fields definitions} and some other as well).

I tried removing these in runtime, and then continuing updating, but it always fails with the same error. 

[Martin]

Hello Vedad,

The error could be related to this issue, however I cannot be sure without being able to debug the code. Could you please share some code snippets of the dataSource implementation so that I can try to reproduce the error? 

Looking forward to your reply.

Regards,
Martin
Progress Telerik

[Vedad]

Hi Marin, 

Thank you for the reply.

As I wrote, there is a lot of local code for our gantt setup, so I have no chance to even build an example. 

I have found "hard' workaround. I basically get object from data source (not clone), recreate object with same properties and it passes through without side effect afterwards.

Although I didn't came to the point where I can be 100% sure, but I think problem is related to the fact that almost all of properties needed for gantt + our additional, are mapped through model..so I suspect some parsing issue happens between update and observable..

However, my workaround is functioning for now, but if I catch some time, I will try to make reproducible Dojo and post it.

Thank you very much.

 

[Martin]

Hello Vedad,

I am glad that you were able to come up with a solution. If at some point you are able to provide an example, please share it so that we can do further investigation on the matter.

Have a nice week!

Regards,
Martin
Progress Telerik