Layout not producting Org Tree correctly

[Scott]

Hello,

I was able to create a diagram org tree and lay it out with the beta Diagram version and examples, but when I use the new release Layout function It doesn't lay the diagram out as a org tree.

I've included two snapshots; one of the result, the other what I expected.

Could you please look at my code and tell me where I've gone wrong?

Thanks in advance!

var top = new RadDiagramShape() { Width = 100, Height = 100, Content = "Top" };
 top.Geometry = ShapeFactory.GetShapeGeometry(CommonShapeType.RectangleShape);
 TheDiagram.AddShape(top);

 var child1 = new RadDiagramShape() { Width = 100, Height = 100, Content = "Child 1 of Top" };
 child1.Geometry = ShapeFactory.GetShapeGeometry(CommonShapeType.CloudShape);
 TheDiagram.AddShape(child1);

 var child2 = new RadDiagramShape() { Width = 100, Height = 100, Content = "Child 2 of Top" };
 child2.Geometry = ShapeFactory.GetShapeGeometry(CommonShapeType.EllipseShape);
 TheDiagram.AddShape(child2);

 RadDiagramConnection connection = new RadDiagramConnection()
 {
     Source = top,
     SourceConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Bottom,
     Target = child1,
     TargetConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Top,
     SourceCapType = Telerik.Windows.Diagrams.Core.CapType.None,
     TargetCapType = Telerik.Windows.Diagrams.Core.CapType.None,
     ConnectionType = Telerik.Windows.Diagrams.Core.ConnectionType.Polyline
 };
 TheDiagram.AddConnection(connection);

 connection = new RadDiagramConnection()
 {
     Source = top,
     SourceConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Bottom,
     Target = child2,
     TargetConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Top,
     SourceCapType = Telerik.Windows.Diagrams.Core.CapType.None,
     TargetCapType = Telerik.Windows.Diagrams.Core.CapType.None,
     ConnectionType = Telerik.Windows.Diagrams.Core.ConnectionType.Polyline
 };
 TheDiagram.AddConnection(connection);

 TheDiagram.Layout(LayoutType.Tree);
 TheDiagram.AutoFit();

[Petar Mladenov]

Hello Scott,

 Thank you for your interest in this feature. It is best demonstrated in our OrgChart example actually.
Here is what you need in addition to your code:

this.diagram.AddConnection(connection);

            TreeLayoutSettings settings = new TreeLayoutSettings()
            {
                TreeLayoutType = TreeLayoutType.TreeDown,
            };
            settings.Roots.Add(top);
            this.diagram.RoutingService.Router = new OrgTreeRouter(){ConnectionOuterSpacing = 20};
            this.diagram.Layout(LayoutType.Tree,settings);
            this.diagram.AutoFit();

• You have to create settings for the router. You will need TreeDown LayoutType and ConnectionSpacing. You also need to set the root of the layout.
• You need to set the OrgTreeRouter as the default Router. This must be achieved via RoutingService.Router property.

These configurations will be explained in details in our online documentation which will be released till the end of the week. Please excuse us if any inconvenience is caused.

All the best,
Petar Mladenov
the Telerik team

[Scott]

Hello,

Thanks for the speedy reply and resolution. That fixed the issue, but another has come up.

When I try to add one more shape on a level below child1, I receive an exception error when I run Layout.

I have included the Exception Stack Trace at the bottom. I noticed that in the trace that it referenced TipOverTreeRouter instead of TreeDown.

I have bolded the only additions to the code that I sent you before. If I remove those additions the test code works. Do you have a suggestion?

var top = new RadDiagramShape() { Width = 100, Height = 100, Content = "Top" };

 top.Geometry = ShapeFactory.GetShapeGeometry(CommonShapeType.RectangleShape);

 TheDiagram.AddShape(top);

 

 var child1 = new RadDiagramShape() { Width = 100, Height = 100, Content = "Child 1 of Top" };

 child1.Geometry = ShapeFactory.GetShapeGeometry(CommonShapeType.CloudShape);

 TheDiagram.AddShape(child1);

 

 var child2 = new RadDiagramShape() { Width = 100, Height = 100, Content = "Child 2 of Top" };

 child2.Geometry = ShapeFactory.GetShapeGeometry(CommonShapeType.EllipseShape);

 TheDiagram.AddShape(child2);

 

 var level2 = new RadDiagramShape() { Width = 100, Height = 100, Content = "Level 2" };

 level2.Geometry = ShapeFactory.GetShapeGeometry(CommonShapeType.EllipseShape);

 TheDiagram.AddShape(level2);

 

 RadDiagramConnection connection = new RadDiagramConnection()

 {

     Source = top,

     SourceConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Bottom,

     Target = child1,

     TargetConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Top,

     SourceCapType = Telerik.Windows.Diagrams.Core.CapType.None,

     TargetCapType = Telerik.Windows.Diagrams.Core.CapType.None,

     ConnectionType = Telerik.Windows.Diagrams.Core.ConnectionType.Polyline

 };

 TheDiagram.AddConnection(connection);

 

 connection = new RadDiagramConnection()

 {

     Source = top,

     SourceConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Bottom,

     Target = child2,

     TargetConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Top,

     SourceCapType = Telerik.Windows.Diagrams.Core.CapType.None,

     TargetCapType = Telerik.Windows.Diagrams.Core.CapType.None,

     ConnectionType = Telerik.Windows.Diagrams.Core.ConnectionType.Polyline

 };

 TheDiagram.AddConnection(connection);

 

 connection = new RadDiagramConnection()

 {

     Source = child1,

     SourceConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Bottom,

     Target = level2,

     TargetConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Top,

     SourceCapType = Telerik.Windows.Diagrams.Core.CapType.None,

     TargetCapType = Telerik.Windows.Diagrams.Core.CapType.None,

     ConnectionType = Telerik.Windows.Diagrams.Core.ConnectionType.Polyline

 };

 TheDiagram.AddConnection(connection);

 

 TreeLayoutSettings settings = new TreeLayoutSettings() { TreeLayoutType = TreeLayoutType.TreeDown};

 settings.Roots.Add(top);

 TheDiagram.RoutingService.Router = new OrgTreeRouter() { ConnectionOuterSpacing = 20 };

 TheDiagram.Layout(LayoutType.Tree, settings);

 TheDiagram.AutoFit();


System.ArgumentOutOfRangeException was unhandled by user code

  Message=Index was out of range. Must be non-negative and less than the size of the collection.

Parameter name: index

  StackTrace:

       at System.ThrowHelper.ThrowArgumentOutOfRangeException()

       at System.Collections.Generic.List`1.get_Item(Int32 index)

       at System.Collections.ObjectModel.Collection`1.get_Item(Int32 index)

       at Telerik.Windows.Diagrams.Core.OrgTreeRouter.TipOverTreeRouter.SetSourceAndTargetConnectors()

       at Telerik.Windows.Diagrams.Core.OrgTreeRouter.TreeRouterBase..ctor(IConnection connection, Double connectionSpacing)

       at Telerik.Windows.Diagrams.Core.OrgTreeRouter.TipOverTreeRouter..ctor(IConnection connection, Double

 

connectionSpacing)

       at Telerik.Windows.Diagrams.Core.OrgTreeRouter.TreeRouterBase.CreateRouter(TreeLayoutType type, IConnection

 

connection, Double connectionSpacing)

       at Telerik.Windows.Diagrams.Core.OrgTreeRouter.GetRoutePoints(IConnection connection, Boolean showLastLine)

       at Telerik.Windows.Diagrams.Core.RoutingService.BuildRoute(IConnection connection)

       at Telerik.Windows.Controls.Diagrams.GeometryFactory.CreateConnectionGeometry(IConnection connection, RoutingService

 

routingService)

       at Telerik.Windows.Controls.RadDiagramConnection.UpdateGeometryOverride()

       at Telerik.Windows.Controls.RadDiagramConnection.Update(Boolean isManipulating)

       at Telerik.Windows.Controls.RadDiagramConnection.Telerik.Windows.Diagrams.Core.IConnection.Update(Boolean

 

isManipulating)

       at Telerik.Windows.Diagrams.Core.GraphController.UpdateConnectionsAndCheckForSelection(IShape shape)

       at Telerik.Windows.Diagrams.Core.GraphController.OnShapePropertyChanged(Object sender, PropertyEventArgs e)

       at Telerik.Windows.Controls.Diagrams.RadDiagramItem.OnPropertyChanged(String propertyName)

       at Telerik.Windows.Controls.Diagrams.RadDiagramShapeBase.UpdatePosition()

       at Telerik.Windows.Controls.Diagrams.RadDiagramShapeBase.OnPositionChanged(Point oldPosition, Point newPosition)

       at Telerik.Windows.Controls.Diagrams.RadDiagramItem.OnPositionPropertyChanged(DependencyObject d,

 

DependencyPropertyChangedEventArgs e)

       at Telerik.Windows.PropertyMetadata.PropertyChangeHook.OnPropertyChanged(DependencyObject d,

 

DependencyPropertyChangedEventArgs e)

       at System.Windows.DependencyObject.RaisePropertyChangeNotifications(DependencyProperty dp, Object oldValue, Object

 

newValue)

       at System.Windows.DependencyObject.UpdateEffectiveValue(DependencyProperty property, EffectiveValueEntry oldEntry,

 

EffectiveValueEntry& newEntry, ValueOperation operation)

       at System.Windows.DependencyObject.SetValueInternal(DependencyProperty dp, Object value, Boolean allowReadOnlySet,

 

Boolean isBindingInStyleSetter)

       at System.Windows.DependencyObject.SetValue(DependencyProperty dp, Object value)

       at Telerik.Windows.Controls.Diagrams.RadDiagramItem.set_Position(Point value)

       at Telerik.Windows.Diagrams.Core.MoveItemCommand.Redo()

       at Telerik.Windows.Diagrams.Core.MoveItemCommand.Execute(Object state)

       at Telerik.Windows.Diagrams.Core.CompositeCommand.Execute(Object state)

       at Telerik.Windows.Diagrams.Core.UndoRedoService.ExecuteCommand(ICommand command, Object state)

       at Telerik.Windows.Controls.RadDiagram.CommitBatchTransformation(DiagramLayoutState finalState, Boolean animate)

       at Telerik.Windows.Diagrams.Core.LayoutBase`2.EndLayout(IGraphInternal diagramControl, LayoutType type, Object

 

settings, DiagramLayoutState beginState, DiagramLayoutState finalState, Boolean commit, Boolean animate)

       at Telerik.Windows.Diagrams.Core.TreeLayout.Layout(IGraph diagramControl, Object settings)

       at Telerik.Windows.Diagrams.Core.LayoutService.Layout(LayoutType type, Object settings)

       at Telerik.Windows.Diagrams.Core.GraphController.Layout(LayoutType type, Object settings)

       at Telerik.Windows.Controls.RadDiagram.Layout(LayoutType type, Object settings)

       at ReasonWeb.TreeDiagramTest.DrawTreeModel()

[Petar Mladenov]

Hello Scott,
 I have missed to point out an important setting that must be done. You need to set the exact TreeLayoutType of the OrgTreeRouter:

this.diagram.RoutingService.Router = new OrgTreeRouter(){ConnectionOuterSpacing = 20, TreeLayoutType = TreeLayoutType.TreeDown};

If you don't specify one of the five layouts in the way shown above:

• TreeDown
• TreeUp
• TreeLeft
• TreeRight
• TipOverTree - default

the TipOverTree is used. But the TipOverTree requires CustomConnectors set. This will be relflected in our documentation. It should be uploaded till the end of this week.

Kind regards,
Petar Mladenov
the Telerik team

[Scott]

Hi Petar,

Thanks so much for your help in this. Normally, I'd wait on the completed documentation, but I'm approaching a deadline.

Your TreeDown setting allowed me to generate our full diagram of 110 nodes.

I have not been able to get the AutoFit, or Zoom to work as expected. It makes no change in the diagram as called in my code. Trying BeginInvoke produces a change but not  fit to page. Setting zoom produces some change but does not match the Zoom value.

Suggestions?

Thanks,

Scott

[Scott]

Hello,

After consulting the new documentation I see that the Zoom property has a lower range of .5

Does AutoFit has the same limitation? That would explain my situation. Or am I missing something?

If AutoFit does have the .5 limitation I'd like to request that limit be eliminated as much as possible. Many of the diagrams we use are too large to fit even with the .5 reduction.

Can you recommend a work around method by which a very large diagram can be made to fit?

Thanks in advance,

Scott

[Petar Mladenov]

Hello Scott,

 Yes, the auto fit uses internally Pan and Zoom. You are able to set the zoom range with the following constants;

DiagramConstants.MinimumZoom = 0.2d;
            DiagramConstants.MaximumZoom = 3d;
            DiagramConstants.ZoomFactor = 0.2d;

it's best to set them on load or on initialize. Please let us know if this solves your scenario.

Kind regards,
Petar Mladenov
the Telerik team