This is a migrated thread and some comments may be shown as answers.

Getting "TypeError: Cannot read property 'updateOptionsFromModel' of undefined" every time I'm trying to update the saved before object

9 Answers 161 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Oleksa
Top achievements
Rank 1
Oleksa asked on 03 Jul 2019, 04:18 PM

When two shapes are connected by a connection and the "Konfiguration" dialog of the connection is opened and one presses "+Text" then an element is added to the dialog.

 

If one now saves the entire workflow and reload the workflow and open the connection's "Konfiguration" dialog and press "+Text" nothing happens and the following error pops up in the browser console:

TypeError: Cannot read property 'updateOptionsFromModel' of undefined

 

After closing and re-opening the "Konfiguration" dialog the previously added element is now displayed.

 

Was wondering if anyone had such an issue before and found the solution.

Thank you in advance!

9 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 05 Jul 2019, 11:57 AM
Hi Oleksa,

Looking at the provided screenshots I assume that you are using some sort of a custom editor for the connections. Please correct me if I am wrong.

Could you please provide us with your configuration of the diagram? Or even better, if possible, could you please assemble a small sample which demonstrates the behavior?

Thanks in advance for your cooperation.
 

Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Oleksa
Top achievements
Rank 1
answered on 11 Jul 2019, 09:41 AM

Hello Georgi,

No, that's not the custom editor. We used "kendoWindow" component to manage connection configurations.

I'm sorry, there is a huge amount of code to reproduce and assemble it in dojo. If you need anything else, please let me know.

Please find below the Diagrams configuration:

var kendoDiagram = diagram.kendoDiagram({
        dataSource: shapesDataSource,
        connectionsDataSource: connectionsDataSource,
        shapeDefaults: {
            visual: visualTemplate,
            content: {
                template: '#= typeof dataItem.customData === "undefined" || typeof dataItem.customData.status === "undefined" || dataItem.customData.status === "" ? dataItem.text : dataItem.customData.status #'
            },
            editable: {
                tools: [
                    {
                        type: 'button',
                        text: 'Konfiguration',
                        click: function () {
 
                            var selected = diagram.getKendoDiagram().select()[0];
                            //console.log(selected.dataItem.customData.newAttributes);
                            manageShapeConfig(selected);
 
                            setTimeout(function() {
                                if($('#fieldlist').length) {
                                    $('#fieldlist input:first').focus();
                                }
                            }, 800);
 
                        }
                    },
                    {
                        'name': 'delete'
                    }
                ],
                connect: true
            }
        },
        connectionDefaults: {
            editable: {
                tools: [
                    {
                        type: 'button',
                        text: 'Konfiguration',
                        click: function () {
 
                            var selected = diagram.getKendoDiagram().select();
                            //console.log(selected.dataItem.customData.conditions);
 
                            for (var i = 0; i < selected.length; i++) {
                                manageConnectionConfig(selected[i]);
                            }
                        }
                    },
                    {
                        'name': 'delete'
                    }
                ],
                connect: true
            },
            endCap: 'ArrowEnd',
            type: "polyline"
        },
        dragEnd: function(e) {
 
            var el = e.connections[0];
 
            if (typeof el !== 'undefined') {
                var source = el.sourceConnector,
                    target = el.targetConnector;
 
                if( typeof source == 'undefined' || typeof target == 'undefined') {
                    //console.log('connection is not connected both sides!');
                    el.options.stroke.color = '#ff0000';
                    el.options.hover.stroke.color = '#ff0000';
                } else {
                    el.options.stroke.color = '#2e2e2e';
                    el.options.hover.stroke.color = '#2e2e2e';
                }
            }
        },
        change: function (e) {
            var element = e.added[0];
            if (element && element instanceof kendo.dataviz.diagram.Shape) {
                var dataItem = element.dataItem;
                var point = new kendo.dataviz.diagram.Point(dataItem.x, dataItem.y);
                element.position(point);
//            } else if (element && element instanceof kendo.dataviz.diagram.Connection) {
//                console.log(" CONNECTION ");
            }
        },
        editable: {
            tools: false
        },
        select: function() {
            //var selected = diagram.getKendoDiagram().select()[0];
            //
            //setTimeout(function() {
            //    console.log(selected);
            //    console.log(sel.dataItem.customData.commentRequired);
            //    console.log(sel.dataItem.customData.roleRequired);
            //    console.log(sel.dataItem.customData.interruptAutomatism);
            //}, 3000);
        }
    }).getKendoDiagram();
0
Georgi
Telerik team
answered on 15 Jul 2019, 10:49 AM
Hi Oleksa,

I have examined the provided configuration and I did not notice anything that might cause an issue. I believe that the issue occurs when you handle the editing. Unfortunately it would be hard to pinpoint what is causing the issue without debugging it, so a sample would be really useful. Nevertheless, if assembling a sample is not possible, I would need to examine your logic where editing is handled in the custom window.


Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Oleksa
Top achievements
Rank 1
answered on 01 Aug 2019, 10:35 AM

Hello Georgi,

I was just thinking on reproducing the issue with DOJO, but realised that's not possible, since the issue appears when you load the object from saved data :(

Regards,

Oleksa

0
Georgi
Telerik team
answered on 05 Aug 2019, 08:08 AM
Hi Oleksa,

Would it be possible to use some static data to simulate the saved data? Could you please try to recreate the behavior using some in-memory data?


Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Oleksa
Top achievements
Rank 1
answered on 07 Aug 2019, 09:06 AM

That's odd, I just re-created it in DOJO the way it's implemented in our environment and it looks like it works without any problem. That means, that the issue is not reproducible and it looks like it lays on connectionsDataSource settings.

Here is the one I have:

var connectionsDataSource = new kendo.data.DataSource({
            transport: {
                read: function (o) {
                    $.when(configLoaded)
                        .done(function () {
                            o.success(config.connections);
                        })
                        .fail(function () {
                            o.error();
                        });
 
                    console.log('read object', o.data);
                    console.log(config.connections);
                },
                create: function (o) {
                    o.data.id = connectionsDataSource.total();
                    o.data.customData = {};
                    o.success(o.data);
                },
                update: function (o) {
                    o.success(o.data);
                },
                destroy: function (o) {
                    o.success(o.data);
                }
            },
            schema: {
                model: {
                    id: 'id',
                    fields: {
                        id: {type: 'number'},
                        customData: {type: 'default', editable: false},
                        from: {type: 'number'},
                        to: {type: 'number'},
                        fromConnector: {type: 'string'},
                        toConnector: {type: 'string'}
                    }
                }
            }
        });

 

If you can give any advise, that would be much appreciated.

0
Georgi
Telerik team
answered on 08 Aug 2019, 01:46 PM
Hi Oleksa,

I have examined the configuration in the provided sample and I did not notice anything that might cause an issue.

If the same configuration does not work in your project, the issue is related to the environment. Does the issue replicate if you paste the code from the dojo in your sample?


Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Oleksa
Top achievements
Rank 1
answered on 09 Aug 2019, 01:49 PM

Hello Georgi,

The issue is now fixed, it was depending on the data structure we've got on the server, so I had to use schema.parse method for DataSource configuration to correctly fetch the data.

 

p.s. would be much appreciated if you could update your docs with a bit more samples for DataSource schema configuration.

0
Georgi
Telerik team
answered on 13 Aug 2019, 10:19 AM
Hello Oleksa,

There is an example for each property of the dataSource schema in the docs:


Would share with us exactly what kind of examples you would like?


Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Diagram
Asked by
Oleksa
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Oleksa
Top achievements
Rank 1
Share this question
or