Javascript error on first attempt to get Diagram working

7 posts, 0 answers
  1. Stig
    Stig avatar
    13 posts
    Member since:
    Jul 2012

    Posted 23 Mar 2018 Link to this post

    Im trying to get raddiagram to show data, but im having some issues - i think i followed the demo example to the letter, but it still gives me javascript error.

    This is the error:

    Unhandled exception at line 6, column 54851 in http://dev.ordering.pki.dsv.com/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=;;System.Web.Extensions,+Version=4.0.0.0,+Culture=neutral,+PublicKeyToken=31bf3856ad364e35:en-US:59e0a739-153b-40bd-883f-4e212fc43305:ea597d4b:b25378d2;Telerik.Web.UI:en-US:6d514cb9-2739-4112-a25a-b6efc64747ba:16e4e7cd:f7645509:22a6274a:ed16cbdc:88144a7a:24ee1bba:e330518b:33715776:1e771326:8e6f0d33:1f3a7489:6a6d718d:58366029:c128760b:f46195d3:6b3f73b3:4cd1fec6:c442ac3f:d944e0f6:ec7335e:69667591:a4c22f0d:c4143936:5f88c545:71188da4:75e7b247:77613e24:f0c58c30:9b7cc2d2:8d1fecce:2f872eeb:16dc2978:16717659:b3614701:73564252

    0x800a01bd - JavaScript runtime error: Object doesn't support this action

     

    The line, is this one (beautified, for readability:

         $create(Telerik.Web.UI.RadDiagram, {
            "_options": {
                "connections": [{
                    "from": {
                        "shapeId": "General"
                    },
                    "to": {
                        "shapeId": "Draft"
                    }
                }, {
                    "from": {
                        "shapeId": "Draft"
                    },
                    "to": {
                        "shapeId": "Submitted"
                    }
                }, {
                    "from": {
                        "shapeId": "Submitted"
                    },
                    "to": {
                        "shapeId": "Notification"
                    }
                }, {
                    "from": {
                        "shapeId": "Notification"
                    },
                    "to": {
                        "shapeId": "Approved"
                    }
                }, {
                    "from": {
                        "shapeId": "Notification"
                    },
                    "to": {
                        "shapeId": "AutoApproved"
                    }
                }, {
                    "from": {
                        "shapeId": "Approved"
                    },
                    "to": {
                        "shapeId": "KeyGeneration"
                    }
                }, {
                    "from": {
                        "shapeId": "AutoApproved"
                    },
                    "to": {
                        "shapeId": "KeyGeneration"
                    }
                }, {
                    "from": {
                        "shapeId": "KeyGeneration"
                    },
                    "to": {
                        "shapeId": "KeyGenSkipped"
                    }
                }, {
                    "from": {
                        "shapeId": "KeyGeneration"
                    },
                    "to": {
                        "shapeId": "KeyGenerated"
                    }
                }, {
                    "from": {
                        "shapeId": "KeyGenSkipped"
                    },
                    "to": {
                        "shapeId": "CSRInfoCreated"
                    }
                }, {
                    "from": {
                        "shapeId": "KeyGenerated"
                    },
                    "to": {
                        "shapeId": "CSRInfoCreated"
                    }
                }, {
                    "from": {
                        "shapeId": "Approved"
                    },
                    "to": {
                        "shapeId": "SigningCertRetrieved"
                    }
                }, {
                    "from": {
                        "shapeId": "AutoApproved"
                    },
                    "to": {
                        "shapeId": "SigningCertRetrieved"
                    }
                }, {
                    "from": {
                        "shapeId": "SigningCertRetrieved"
                    },
                    "to": {
                        "shapeId": "SigningExecuting"
                    }
                }, {
                    "from": {
                        "shapeId": "SigningExecuting"
                    },
                    "to": {
                        "shapeId": "SigningExecuted"
                    }
                }, {
                    "from": {
                        "shapeId": "SigningExecuted"
                    },
                    "to": {
                        "shapeId": "CodeSignCompleted"
                    }
                }, {
                    "from": {
                        "shapeId": "CSRInfoCreated"
                    },
                    "to": {
                        "shapeId": "ExternalPki"
                    }
                }, {
                    "from": {
                        "shapeId": "CSRInfoCreated"
                    },
                    "to": {
                        "shapeId": "InternalPki"
                    }
                }, {
                    "from": {
                        "shapeId": "ExternalPki"
                    },
                    "to": {
                        "shapeId": "CertReqRecieved"
                    }
                }, {
                    "from": {
                        "shapeId": "InternalPki"
                    },
                    "to": {
                        "shapeId": "CertReqRecieved"
                    }
                }, {
                    "from": {
                        "shapeId": "CertReqRecieved"
                    },
                    "to": {
                        "shapeId": "CertReqExecuted"
                    }
                }, {
                    "from": {
                        "shapeId": "CertReqExecuted"
                    },
                    "to": {
                        "shapeId": "CertExtracted"
                    }
                }, {
                    "from": {
                        "shapeId": "CertExtracted"
                    },
                    "to": {
                        "shapeId": "CertCompleted"
                    }
                }, {
                    "from": {
                        "shapeId": "CertCompleted"
                    },
                    "to": {
                        "shapeId": "CertSend"
                    }
                }, {
                    "from": {
                        "shapeId": "CodeSignCompleted"
                    },
                    "to": {
                        "shapeId": "OrderCompleted"
                    }
                }, {
                    "from": {
                        "shapeId": "CertSend"
                    },
                    "to": {
                        "shapeId": "OrderCompleted"
                    }
                }],
                "shapes": [{
                    "id": "General",
                    "content": {
                        "color": "#fff",
                        "text": "General Info"
                    }
                }, {
                    "id": "Draft",
                    "content": {
                        "color": "#fff",
                        "text": "Draft"
                    }
                }, {
                    "id": "Submitted",
                    "content": {
                        "color": "#fff",
                        "text": "Submitted"
                    }
                }, {
                    "id": "Notification",
                    "content": {
                        "color": "#fff",
                        "text": "Notification"
                    }
                }, {
                    "id": "Approved",
                    "content": {
                        "color": "#fff",
                        "text": "Approved"
                    }
                }, {
                    "id": "AutoApproved",
                    "content": {
                        "color": "#fff",
                        "text": "Auto Approved"
                    }
                }, {
                    "id": "KeyGeneration",
                    "content": {
                        "color": "#fff",
                        "text": "Key Generation"
                    }
                }, {
                    "id": "KeyGenSkipped",
                    "content": {
                        "color": "#fff",
                        "text": "Keygen skipped"
                    }
                }, {
                    "id": "KeyGenerated",
                    "content": {
                        "color": "#fff",
                        "text": "Key generated"
                    }
                }, {
                    "id": "CSRInfoCreated",
                    "content": {
                        "color": "#fff",
                        "text": "CSR Info Created"
                    }
                }, {
                    "id": "SigningCertRetrieved",
                    "content": {
                        "color": "#fff",
                        "text": "Signing Cert retrieved"
                    }
                }, {
                    "id": "SigningExecuting",
                    "content": {
                        "color": "#fff",
                        "text": "Exec Signing process"
                    }
                }, {
                    "id": "SigningExecuted",
                    "content": {
                        "color": "#fff",
                        "text": "Code Signed"
                    }
                }, {
                    "id": "CodeSignCompleted",
                    "content": {
                        "color": "#fff",
                        "text": "Code Signing Completed"
                    }
                }, {
                    "id": "ExternalPki",
                    "content": {
                        "color": "#fff",
                        "text": "External PKI"
                    }
                }, {
                    "id": "InternalPki",
                    "content": {
                        "color": "#fff",
                        "text": "Internal PKI"
                    }
                }, {
                    "id": "CertReqRecieved",
                    "content": {
                        "color": "#fff",
                        "text": "certReq Received"
                    }
                }, {
                    "id": "CertReqExecuted",
                    "content": {
                        "color": "#fff",
                        "text": "certReq Executed"
                    }
                }, {
                    "id": "CertExtracted",
                    "content": {
                        "color": "#fff",
                        "text": "Cert Extracted"
                    }
                }, {
                    "id": "CertCompleted",
                    "content": {
                        "color": "#fff",
                        "text": "Cert Completed"
                    }
                }, {
                    "id": "CertSend",
                    "content": {
                        "color": "#fff",
                        "text": "Cert Send"
                    }
                }, {
                    "id": "CertRejectedByPki",
                    "content": {
                        "color": "#fff",
                        "text": "Cert Rejected by PKI"
                    }
                }, {
                    "id": "CertRejectedByAdmin",
                    "content": {
                        "color": "#fff",
                        "text": "Cert Rejected by Admin"
                    }
                }, {
                    "id": "OrderDeleted",
                    "content": {
                        "color": "#fff",
                        "text": "Order Deleted"
                    }
                }, {
                    "id": "OrderCompleted",
                    "content": {
                        "color": "#fff",
                        "text": "Order Completed"
                    }
                }]
            },
            "clientStateFieldID": "diagramStatus_ClientState"
        }, {
            "load": diagram_load
        }, null, $get("diagramStatus"));

     

     

    The asp page looks like this:

    <telerik:RadDiagram runat="server" ID="diagramStatus" EnableViewState="false" OnItemDataBound="diagramStatus_ItemDataBound" Width="600">
        <ClientEvents OnLoad="diagram_load" />
        <BindingSettings>
            <ConnectionSettings DataFromShapeIdField="FromStatusID" DataToShapeIdField="ToStatusID" />
            <ShapeSettings DataIdField="StatusID" DataContentTextField="StatusText"/>
        </BindingSettings>
    </telerik:RadDiagram>

    Using service binding on pageload:

                    diagramStatus.DataSource = DBClient.GetStatusList()
                    diagramStatus.ConnectionDataSource = DBClient.GetStatusListTree()
                    diagramStatus.DataBind()

    and the ItemDataBound item is directly copied from the demo:

        Protected Sub diagramStatus_ItemDataBound(sender As Object, e As Telerik.Web.UI.Diagram.DiagramItemDataBoundEventArgs)
            Dim shape = TryCast(e.Item, Telerik.Web.UI.DiagramShape)

            If shape IsNot Nothing Then
                shape.ContentSettings.Color = "#fff"
            End If
        End Sub

    Same with the javascript file:

    (function (global, undefined) {
        function diagram_load(sender) {
            var diagram = sender.get_kendoWidget();

            diagram.layout({
                type: "tree",
                subtype: "down",
                roots: [diagram.getShapeById("General")],
                verticalSeparation: 20,
                horizontalSeparation: 30
            });
        }
        global.diagram_load = diagram_load;
    })(window);

     

    Can somebody see what im missing?  everything seems to look good as far as i can tell - but im by no means a javascript expect (infact i hate it ;)

     

    /Stig

  2. Stig
    Stig avatar
    13 posts
    Member since:
    Jul 2012

    Posted 26 Mar 2018 in reply to Stig Link to this post

    Removed the databing, so see what would happen,

     

    And im stilling the javascript error, so its not related to the data, now the javascript call looks like this:

    $create(Telerik.Web.UI.RadDiagram, {"_options":{},"clientStateFieldID":"diagramStatus_ClientState"}, {"load":diagram_load}, null, $get("diagramStatus"));

     

    And the error is still:

    Unhandled exception at line 6, column 54851 in http://dev.ordering.pki.dsv.com/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=;;System.Web.Extensions,+Version=4.0.0.0,+Culture=neutral,+PublicKeyToken=31bf3856ad364e35:en-US:59e0a739-153b-40bd-883f-4e212fc43305:ea597d4b:b25378d2;Telerik.Web.UI:en-US:6d514cb9-2739-4112-a25a-b6efc64747ba:16e4e7cd:f7645509:22a6274a:ed16cbdc:88144a7a:24ee1bba:e330518b:33715776:1e771326:8e6f0d33:1f3a7489:6a6d718d:58366029:c128760b:f46195d3:6b3f73b3:4cd1fec6:c442ac3f:d944e0f6:ec7335e:69667591:a4c22f0d:c4143936:5f88c545:71188da4:75e7b247:77613e24:f0c58c30:9b7cc2d2:8d1fecce:2f872eeb:16dc2978:16717659:b3614701:73564252

    0x800a01bd - JavaScript runtime error: Object doesn't support this action

     

    And i still have no clue whats going wrong here - The javascript file is imported correctly (added an alert("test"); which shows correctly)

  3. Vessy
    Admin
    Vessy avatar
    2127 posts

    Posted 27 Mar 2018 Link to this post

    Hi Stig,

    I tested the provided configuration but no errors were thrown at my end. For convenience I am attaching my test project to this reply - are you abel to reproduce the same issue with it? For my test I used the latest 2018.1.117 version of the contros.

    Regards,
    Vessy
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Stig
    Stig avatar
    13 posts
    Member since:
    Jul 2012

    Posted 28 Mar 2018 in reply to Stig Link to this post

    Yep, Still same error

    Unhandled exception at line 6, column 54851 in http://dev.ordering.pki.dsv.com/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl02_TSM&compress=1&_TSM_CombinedScripts_=;;System.Web.Extensions,+Version=4.0.0.0,+Culture=neutral,+PublicKeyToken=31bf3856ad364e35:en-US:59e0a739-153b-40bd-883f-4e212fc43305:ea597d4b:b25378d2;Telerik.Web.UI,+Version=2018.1.117.45,+Culture=neutral,+PublicKeyToken=121fae78165ba3d4:en-US:6d514cb9-2739-4112-a25a-b6efc64747ba:16e4e7cd:f7645509:24ee1bba:4cd1fec6:c442ac3f:d944e0f6:ec7335e:69667591:a4c22f0d:c4143936:5f88c545:71188da4:75e7b247:77613e24:f0c58c30:9b7cc2d2:8d1fecce:2f872eeb:16dc2978:16717659:b3614701:73564252

    0x800a01bd - JavaScript runtime error: Object doesn't support this action

    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadDiagram, {"_options":{},"clientStateFieldID":"diagramStatus1_ClientState"}, {"load":diagram_load}, null, $get("diagramStatus1"));
    });

     

    Had to give the diagram a new ID for some odd reasons...

     

        <form id="form1" runat="server">
            <telerik:RadScriptManager runat="server"></telerik:RadScriptManager>
            <telerik:RadDiagram ID="diagramStatus1" runat="server" EnableViewState="true"
                OnItemDataBound="diagramStatus1_ItemDataBound"  Width="600">
                <ClientEvents OnLoad="diagram_load" />
                <BindingSettings>
                    <ShapeSettings DataContentTextField="StatusText" DataIdField="StatusID" />

                    <ConnectionSettings DataFromShapeIdField="FromStatusID" DataToShapeIdField="ToStatusID" />
                </BindingSettings>
            </telerik:RadDiagram>        <script>
                function diagram_load(sender) {
                    var diagram = sender.get_kendoWidget();

                    diagram.layout({
                        type: "tree",
                        subtype: "down",
                        roots: [diagram.getShapeById("general")],
                        verticalseparation: 20,
                        horizontalseparation: 30
                    });
                }
            </script>

        </form>

     

     

     

     

  5. Stig
    Stig avatar
    13 posts
    Member since:
    Jul 2012

    Posted 28 Mar 2018 in reply to Stig Link to this post

    Version is 2018.1.220.40 (Dev) acording to the configure toolbox dialog box

     

  6. Stig
    Stig avatar
    13 posts
    Member since:
    Jul 2012

    Posted 28 Mar 2018 in reply to Stig Link to this post

    Version is 2018.1.220.40 (Dev)

     

  7. Vessy
    Admin
    Vessy avatar
    2127 posts

    Posted 02 Apr 2018 Link to this post

    Hi Stig,

    The provided error message states that there is a remaining refference to version 2018.1.117 somewhere in the project. Please, note, that the used by you version (2018.1.220) is not an official release, so it is not fully tested and may bring such problems. Can you switch back to the official version 2017.1.117 and see if the problem persists?


    Regards,
    Vessy
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top