Diagram not displaying

[Omar]

Hi,

I am trying to run the example https://docs.telerik.com/devtools/aspnet-ajax/controls/diagram/server-side-programming

But the output is as shown in the attached picture.

Can anyone inform me what I am missing?

 

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //RadDiagram2.Visible = true;
            //RadDiagram2.DataSource = GetShapes();
            //RadDiagram2.ConnectionDataSource = GetConnections();
            //RadDiagram2.DataBind();
        }

        RadDiagram RadDiagram1 = new RadDiagram();

        // General diagram settings
        RadDiagram1.Width = 800;
        RadDiagram1.Height = 600;
        RadDiagram1.ShapeDefaultsSettings.Width = 140;
        RadDiagram1.ShapeDefaultsSettings.Height = 30;
        RadDiagram1.ShapeDefaultsSettings.StrokeSettings.Color = "#fff";
        Form.Controls.Add(RadDiagram1);

        // Layout settings
        RadDiagram1.LayoutSettings.Enabled = true;
        RadDiagram1.LayoutSettings.Type = Telerik.Web.UI.Diagram.LayoutType.Layered;
        RadDiagram1.LayoutSettings.Subtype = Telerik.Web.UI.Diagram.LayoutSubtype.Right;
        RadDiagram1.LayoutSettings.VerticalSeparation = 20;
        RadDiagram1.LayoutSettings.HorizontalSeparation = 30;

        // Programmatic creation of shapes and connections
        AddDiagramShape("Shape1", "#8CB20F", "Shape 1", "#fff", RadDiagram1);
        AddDiagramShape("Shape2", "#F8C43A", "Shape 2", "#fff", RadDiagram1);
        AddDiagramShape("Shape3", "#F18100", "Shape 3", "#fff", RadDiagram1);
        ConnectDiagramShapes("Shape1", "Shape3", RadDiagram1);
        ConnectDiagramShapes("Shape2", "Shape3", RadDiagram1);


    }

    protected void AddDiagramShape(string shapeID, string backgroundColor, string contentText, string contentColor, RadDiagram diagram)
    {
        var shape = new DiagramShape()
        {
            Id = shapeID,
        };
        shape.ContentSettings.Text = contentText;
        shape.ContentSettings.Color = contentColor;
        shape.FillSettings.Color = backgroundColor;
        diagram.ShapesCollection.Add(shape);
    }

    protected void ConnectDiagramShapes(string startShapeID, string endShapeID, RadDiagram diagram)
    {
        var connection = new DiagramConnection();
        connection.FromSettings.ShapeId = startShapeID;
        connection.ToSettings.ShapeId = endShapeID;
        diagram.ConnectionsCollection.Add(connection);
    }

 

 

Regards,

Omar

 

[Omar]

any help

[Omar]

I Have even used the following example, and the diagram still not showing.

 

 protected void Page_Load(object sender, EventArgs e)
        {
            RadDiagram1.DataSource = GetShapes();
            RadDiagram1.ConnectionDataSource = GetConnections();
            RadDiagram1.DataBind();
        }

        private IEnumerable GetShapes()
        {
            return new[] {
                new {id="Shape1", text="Shape 1", type="circle", x=100, y=300, width=300, height=100},
                new {id="Shape2", text="Shape 2", type="rectangle", x=200, y=100, width=200, height=200},
                new {id="Shape3", text="Shape 3", type="circle", x=300, y=300, width=300, height=100},
                new {id="Shape4", text="Shape 4", type="rectangle", x=400, y=100, width=200, height=200},
                new {id="Shape5", text="Shape 5", type="circle", x=500, y=300, width=300, height=100}
            };
        }

        private IEnumerable GetConnections()
        {
            return new[] {
                new {sourceShapeId="Shape2", sourceConnector="auto", targetShapeId="Shape1", targetConnector="auto", startCapField=Telerik.Web.UI.Diagram.ConnectionStartCap.FilledCircle,
                    endCapField=Telerik.Web.UI.Diagram.ConnectionEndCap.ArrowEnd},
                new {sourceShapeId="Shape2", sourceConnector="auto", targetShapeId="Shape3", targetConnector="auto", startCapField=Telerik.Web.UI.Diagram.ConnectionStartCap.FilledCircle,
                    endCapField=Telerik.Web.UI.Diagram.ConnectionEndCap.ArrowEnd},
                new {sourceShapeId="Shape4", sourceConnector="auto", targetShapeId="Shape5", targetConnector="auto", startCapField=Telerik.Web.UI.Diagram.ConnectionStartCap.FilledCircle,
                    endCapField=Telerik.Web.UI.Diagram.ConnectionEndCap.ArrowEnd}
            };
        }

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DiagramDataBinding.aspx.cs" Inherits="WebApplication4.DiagramDataBinding" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
            <telerik:RadDiagram ID="RadDiagram1" runat="server">
                <BindingSettings>
                    <ShapeSettings DataContentTextField="text" DataIdField="id" DataTypeField="type"
                        DataXField="x" DataYField="y" />
                </BindingSettings>
            </telerik:RadDiagram>
        </div>
    </form>
</body>
</html>

[Vessy]

Hi, Omar,

I have prepared a sample project demonstrated the setup of both of the linked diagrams (with bound and dynamically created shapes) and the diagrams are shown properly at my end.

For convenience, I am attaching my test project to this reply. Can you test it and see whether you face the same issue with them?

Regards,
Vessy
Progress Telerik

[Omar]

Hello,

 I appreciate your assistance.

I successfully tested your example, and it functions properly. However, upon copying the identical code to my test application, it fails to work.

Our college possesses a single license, and we initially tested it on my colleague's computer. Despite replicating your code exactly in our test project, it still doesn't function.

The version he is using is V 2019.1.215.45.

 I require confirmation of its functionality within our specific setup. If it proves effective, I will proceed with purchasing a license.

 

Please see the attached image, it shows the code and the output which is a blank page.

 Best regards,

Omar

[Omar]

Hi,

I have replaced our existing Telerik.Web.UI.dll with the copied one from your example, and the issue was resolved.

Does this indicate that the problem lies within version 2019.1.215.45?

Best regards,

Omar

[Vessy]

Hi, Omar,

Thanks a lot for the update. I tested the diagram with the mentioned version of the controls and indeed it appears empty with it due to several JavaScript errors thrown on the page.

I tested the diagram with the next released version (2019.2.514.45) an the diagram was again rendered properly, so it seems that the problem was specific to version 2019.1.215.45 and is resolved immediately after it.

I hope the provided information will be helpful for you.

[Omar]

I will purchase the latest version.

Thanks for the help.

Regards,

Omar

[Vessy]

You are most welcome, Omar!

Regards,

Vessy