This is a migrated thread and some comments may be shown as answers.

Auto-layout causes diagram to be upside down

3 Answers 181 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Christopher
Top achievements
Rank 1
Christopher asked on 01 Jun 2012, 09:41 PM
When we use the auto-layout functionality in our application our diagram ends up upside down. The code we are using for adding shapes and connectors is below. Any ideas on how to make the layout start with our start block on top and then layout downward. I tried added the End block after the start and that did not fix it. Are there any other layouts we can try?

private void PopulateDiagram()
        {
            processingDiagram.Clear();
 
            RadDiagramShape ppEnd = new RadDiagramShape()
            {
                Content = "End",
                Width = 100,
                Height = 50,
                Geometry = ShapeFactory.GetShapeGeometry(CommonShapeType.CloudShape)
            };
            processingDiagram.AddShape(ppEnd);
 
            RadDiagramShape ppStart = new RadDiagramShape()
            {
                ContentTemplate = Resources["PreprocessingStartTemplate"] as DataTemplate,
                Width = 100,
                Height = 50,
                Geometry = ShapeFactory.GetShapeGeometry(CommonShapeType.CloudShape)
            };
            processingDiagram.AddShape(ppStart);
 
            foreach (PreprocessorSegment segment in SelectedEngine.PreprocessorSegments)
            {
                RadDiagramShape segmentStart = new RadDiagramShape()
                {
                    Content = segment.Node,
                    Width = 100,
                    Height = 50,
                    Geometry = ShapeFactory.GetShapeGeometry(CommonShapeType.EllipseShape)
                };
                processingDiagram.AddShape(segmentStart);
 
                RadDiagramConnection connection = new RadDiagramConnection()
                {
                    Source = ppStart,
                    SourceConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Bottom,
                    Target = segmentStart,
                    TargetConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Top,
                };
                processingDiagram.AddConnection(connection);
 
                List<string> unusedOutputs = new List<string>();
                Dictionary<string, RadDiagramShape> outputShapes = new Dictionary<string, RadDiagramShape>();
                Dictionary<PreprocessorAlgorithmInstance, RadDiagramShape> algShapes = new Dictionary<PreprocessorAlgorithmInstance, RadDiagramShape>();
                foreach (PreprocessorAlgorithmInstance alg in segment.Algorithms)
                {
                    RadDiagramShape algShape = new RadDiagramShape()
                    {
                        Content = alg,
                        ContentTemplate = Resources["PreprocessingAlgorithmInstanceTemplate"] as DataTemplate,
                        Width = 100,
                        Height = 50,
                        Geometry = ShapeFactory.GetShapeGeometry(CommonShapeType.RectangleShape)
                    };
 
                    unusedOutputs.Add(alg.Output);
                    outputShapes[alg.Output] = algShape;
                    algShapes[alg] = algShape;
                    processingDiagram.AddShape(algShape);
                }
 
                // Connections from Inputs to Outputs.
                foreach (PreprocessorAlgorithmInstance alg in segment.Algorithms)
                {
                    foreach (string input in alg.Inputs)
                    {
                        if (outputShapes.ContainsKey(input))
                        {
                            RadDiagramConnection cn = new RadDiagramConnection()
                            {
                                Content = input,
                                Source = outputShapes[input],
                                SourceConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Bottom,
                                Target = algShapes[alg],
                                TargetConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Top,
                                TargetCapType = Telerik.Windows.Diagrams.Core.CapType.Arrow1Filled
                            };
                            processingDiagram.AddConnection(cn);
                            unusedOutputs.Remove(input);
                        }
                        else
                        {
                            RadDiagramConnection cn = new RadDiagramConnection()
                            {
                                Content = input,
                                Source = segmentStart,
                                SourceConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Bottom,
                                Target = algShapes[alg],
                                TargetConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Top,
                                TargetCapType = Telerik.Windows.Diagrams.Core.CapType.Arrow1Filled
                            };
                            processingDiagram.AddConnection(cn);
                        }
                    }
                }
 
                foreach (string output in unusedOutputs)
                {
                    RadDiagramConnection cn = new RadDiagramConnection()
                    {
                        Content = output,
                        Source = outputShapes[output],
                        SourceConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Bottom,
                        Target = ppEnd,
                        TargetConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Top,
                        TargetCapType = Telerik.Windows.Diagrams.Core.CapType.Arrow1Filled
                    };
                    processingDiagram.AddConnection(cn);
                }
            }
 
            processingDiagram.Layout();
        }

3 Answers, 1 is accepted

Sort by
0
Alex Fidanov
Telerik team
answered on 04 Jun 2012, 07:44 AM
Hi,

 We are currently using a generic algorithm, which does not support modifying the orientation of the layout. However, for Q2 2012, we are providing a lot of customizations to the layout algorithm (i.e. TopDown, LeftRight, etc.) so you will be able to achieve oriented layout. So stay tuned for the release, which is just around the corner.

Regards,
Alex Fidanov
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Nazli
Top achievements
Rank 1
answered on 31 Oct 2014, 08:18 AM
Hello,

I am also getting the same result for my RadDiagram after using AutoLayout. I want the orgChart to be in a top-down approach rather then bottom-up. Is there any way I can keep using AutoLayout property while indicating it to be in a top-down layout?

Sincerely,
0
Peshito
Telerik team
answered on 04 Nov 2014, 08:09 AM
Hi Nazli,

You can take a look at our Layout SDK example where shapes layout, different layout types and customizing the layout with properties are demonstrated.

Hope this helps.

Regards,
Peshito
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Diagram
Asked by
Christopher
Top achievements
Rank 1
Answers by
Alex Fidanov
Telerik team
Nazli
Top achievements
Rank 1
Peshito
Telerik team
Share this question
or