Hi,

How to disable zooming?

Regards,

Omar

Hello,

 I'm a beginner when it comes to working with diagrams.

 I'm wondering if there's a method to automatically rearrange the shapes in the diagram using server-side code. For instance, in the image I've shared, I used x and y coordinates to position the shapes on the diagram. Is there a way to have the shapes auto-arrange themselves as soon as I establish connections between them?

 Best regards,

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

Can anyone help with a database structure to create RadDiagram Shapes and Connectors in the database using co-ordinates to automatically load the diagram.

I couldn't find anything in the demos or docs. For example on the link beloq the sql connections are shown but not what structure is need to create this?

http://demos.telerik.com/aspnet-ajax/diagram/examples/databind/defaultcs.aspx  

Thank you.

I have a diagram with fixed width and height, and on this diagram I have tons of generated shapes in a tree layout.

The shapes cannot be fully displayed in the diagram, only a part of them can be seen. I need to zoom out to shrink all the shapes in order to see the complete picture. However, because there are a lot of shapes, after zooming out, each shape becomes very small and cannot be seen clearly. I hope the diagram can have a horizontal and vertical scrolling feature, so that I can scroll to view the entire picture. I did not find the scrolling feature for the diagram in the documentation.  (Pan and drag are not what I'm looking for.)

How can I implement this?

Thanks.

Hi. New here, still getting my hands on Telerik.

I want to draw a diagram in tree layout, and I followed the documentation, added LayoutSettings.

The shapes and connections for the diagram are generated in C# code.

But what I got was nothing near what is shown in the documentation and demo. The shapes are overlapping each other. The connections between shapes look weird. You can see that in file problem_diagram.png. In fact, I have 8 shapes in this diagram, but the shapes are overlapping at the top left corner, so you can only see 5 shapes. I dragged the shapes so that all shapes can be seen in file dragged_diagram.png.

update: I solved the problem.

Hi,

i would like to know if it is possible to include in the individual 'cells' of a diagram any HTML content or better still other UI controls, such as Cards, even better at runtime.

Thank you