Javascript error on first attempt to get Diagram working

[Stig]

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

[Stig]

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)

[Vessy]

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

[Stig]

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>

 

 

 

 

[Stig]

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

 

[Stig]

Version is 2018.1.220.40 (Dev)

 

[Vessy]

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