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

10 posts, 0 answers
  1. Oleksa
    Oleksa avatar
    7 posts
    Member since:
    Apr 2019

    Posted 03 Jul Link to this post

    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!

  2. Georgi
    Admin
    Georgi avatar
    558 posts

    Posted 05 Jul Link to this post

    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.
  3. Oleksa
    Oleksa avatar
    7 posts
    Member since:
    Apr 2019

    Posted 11 Jul in reply to Georgi Link to this post

    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();
  4. Georgi
    Admin
    Georgi avatar
    558 posts

    Posted 15 Jul Link to this post

    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.
  5. Oleksa
    Oleksa avatar
    7 posts
    Member since:
    Apr 2019

    Posted 01 Aug in reply to Georgi Link to this post

    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

  6. Georgi
    Admin
    Georgi avatar
    558 posts

    Posted 05 Aug Link to this post

    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.
  7. Oleksa
    Oleksa avatar
    7 posts
    Member since:
    Apr 2019

    Posted 07 Aug in reply to Georgi Link to this post

    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.

  8. Georgi
    Admin
    Georgi avatar
    558 posts

    Posted 08 Aug Link to this post

    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.
  9. Oleksa
    Oleksa avatar
    7 posts
    Member since:
    Apr 2019

    Posted 09 Aug in reply to Georgi Link to this post

    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.

  10. Georgi
    Admin
    Georgi avatar
    558 posts

    Posted 13 Aug Link to this post

    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.
Back to Top