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

[Oleksa]

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!

[Georgi]

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

[Oleksa]

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();

[Georgi]

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

[Oleksa]

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

[Georgi]

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

[Oleksa]

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.

[Georgi]

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

[Oleksa]

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.

[Georgi]

Hello Oleksa,

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

• https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/schema

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


Regards,
Georgi
Progress Telerik