Layout not producting Org Tree correctly

7 posts, 0 answers
  1. Scott
    Scott avatar
    13 posts
    Member since:
    Jul 2012

    Posted 13 Jun 2012 Link to this post

    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();
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 13 Jun 2012 Link to this post

    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

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

  3. DevCraft banner
  4. Scott
    Scott avatar
    13 posts
    Member since:
    Jul 2012

    Posted 13 Jun 2012 Link to this post

    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()
  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 14 Jun 2012 Link to this post

    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

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

  6. Scott
    Scott avatar
    13 posts
    Member since:
    Jul 2012

    Posted 14 Jun 2012 Link to this post

    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
  7. Scott
    Scott avatar
    13 posts
    Member since:
    Jul 2012

    Posted 18 Jun 2012 Link to this post

    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

  8. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 19 Jun 2012 Link to this post

    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

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

Back to Top
DevCraft banner