Layout not producting Org Tree correctly in UI for Silverlight Diagram

Scott

14 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();

Petar Mladenov

Admin

3155 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 >>

DiagramCustomRouter.zip

Scott

14 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()

Petar Mladenov

Admin

3155 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 >>

Scott

14 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

Scott

14 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

Petar Mladenov

Admin

3155 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 >>