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

4 posts, 0 answers
  1. Oleksa
    Oleksa avatar
    4 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
    522 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
    4 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
    522 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.
Back to Top