Chart Layout Configuration for Sub Trees

Hi,

Last evening while working on GoXam Silverlight Organization chart, I came across a great feature. That was Chart Layout(Alternating, RootOnly, LastParent, etc.). We just have to define a few configurations and our chart organizes itself superbly.

But I was wondering if I could apply any configuration for sub-trees (example: Right clicking on any node and make its children align vertically). Could you please help me out!!

Thanks!!

Yes, but you won’t do that by changing the TreeLayout.TreeStyle.

Instead you could do that by customizing what the TreeLayout works on and by setting TreeLayout.Arrangement=“FixedRoots”. This leaves the root node(s) where they are, and positions the subtree of each root node relative to that root node, without considering any other nodes in the diagram.

Basically you’ll need to add the Node that your context-menu command operates on to the TreeLayout.Roots collection. Then call TreeLayout.DoLayout on that root node’s subtree, rather than on the whole diagram. You can get the collection of nodes and links that constitute the subtree by calling Node.FindTreeParts.

Great!! It has worked. But encountered a new issue with this.

Want to know that when I right click on a node, I have four layout configuration options(Alternating, Layered, RootOnly, LastParent) as menu items. I select Alternating for the sub tree. As per your solution, I added this right clicked node as a Root in TreeLayout.Roots. Did all what you said.

OrgChartTreeLayout.Roots.Add(rootNode);
IEnumerable subTreeParts = rootNode.FindTreeParts(EffectiveCollectionInclusions.SubTree);
IEnumerable nodes = subTreeParts.OfType().Cast();
IEnumerable links = subTreeParts.OfType().Cast();
OrgChartTreeLayout.DoLayout(nodes, links);

But how would my subtree know which layout configuration i selected. If I am doing this:

TreeLayout.TreeStyle = treeStyle;

Here treeStyle is the selected menu item(ie. Alternating), then it applies this configuration onto complete tree.

The code shown below is my actual code:
OrgChartTreeLayout.Roots.Add(rootNode);
IEnumerable subTreeParts = rootNode.FindTreeParts(EffectiveCollectionInclusions.SubTree);
IEnumerable nodes = subTreeParts.OfType().Cast();
IEnumerable links = subTreeParts.OfType().Cast();

switch (treeStyle)
{
case TreeStyle.Layered:
OrgChartTreeLayout.AlternatePortSpot = Spot.BottomCenter;
OrgChartTreeLayout.AlternateChildPortSpot = Spot.MiddleTop;
break;
case TreeStyle.LastParents:
OrgChartTreeLayout.AlternatePortSpot = new Spot(0, 1, 20, 0);
OrgChartTreeLayout.AlternateChildPortSpot = Spot.MiddleLeft;
break;
case TreeStyle.Alternating:
OrgChartTreeLayout.AlternatePortSpot = new Spot(0, 1, 20, 0);
OrgChartTreeLayout.AlternateChildPortSpot = Spot.MiddleLeft;
break;
case TreeStyle.RootOnly:
OrgChartTreeLayout.AlternatePortSpot = new Spot(0, 1, 20, 0);
OrgChartTreeLayout.AlternateChildPortSpot = Spot.MiddleLeft;
break;
}

OrgChartTreeLayout.PortSpot = Spot.BottomCenter;
OrgChartTreeLayout.ChildPortSpot = Spot.MiddleTop;
OrgChartTreeLayout.SetsPortSpot = true;
OrgChartTreeLayout.SetsChildPortSpot = true;
OrgChartTreeLayout.AlternateSetsPortSpot = true;
OrgChartTreeLayout.AlternateSetsChildPortSpot = true;
OrgChartTreeLayout.Arrangement = TreeArrangement.FixedRoots;
OrgChartTreeLayout.TreeStyle = treeStyle;

OrgChartTreeLayout.DoLayout(nodes, links);

Please help me out!!

Thanks!!

Where is the value of “OrgChartTreeLayout” coming from?

There are at least two ways of doing this. The simplest is to create a new TreeLayout() in your command/event handler code, initialize it with the desired properties, and then call DoLayout. This means there is no Diagram.Layout defined, neither in code nor in XAML.

I’m guessing that you did define a Diagram.Layout and that is the value of “OrgChartTreeLayout”, and that is interfering with the programmed call to DoLayout.

The alternative is to define a class that inherits from TreeLayout. Override MakeNetwork to produce the restricted network that you want the layout to work on. Set Diagram.Layout and all of the common TreeLayout properties in XAML. Your event handler would only set the TreeLayout properties that needed to change. This is like how the TLayout sample allows the user to modify the behavior of each layout.

I recommend the former course of action, since it is the closest to what you have now, and it’s easy to delete the declaration of the TreeLayout in XAML and insert a call to new TreeLayout() in your code.

Hello Mr. Walter,

Thanks for the suggestions. I achieved the same using first approach, creating new TreeLayout for current root node of subtree. Now I am facing a new issue.

I have 25-30 nodes in my chart. I applied ChartLayouts for different subtrees. Now when I drop any new node from palette, whole chart redraws itself to default ChartLayout. No SubTree is persisting its ChartLayout/TreeStructure.

What can be done to avoid this issue. I want subtrees to persist their tree structure.

Thanks!!

That happens by default when you have assigned Diagram.Layout.
But you are not setting that any more, are you?

Yes I am setting it every time I make any change into my chart. But the problem is, How many time do i need to do this. Whenever I drag any node, I have to redraw chart with subtrees having different treeLayout. Whenever I delete any node, I do this again. Whenevr I drop anything from pallete I do this again. So it may happen sometime later that we face performance issues.

I want to avoid this situation. Please tell do your second approach(overriding MakeNetwork) gonna help in this.

Thanks!!

Please read my post again. Do not set Diagram.Layout.

Hi Mr. Walter,

There are two questions of mine.

  1. Whenever we call Diagram.LayoutDiagram(), does it reset Diagram.Layout property too?

  2. We are not setting Diagram.Layout property anywhere except in Diagram.TemplateApplied Event Handler. But we are calling Diagram.LayoutDiagram() from a few places. We have noticed that whenever Diagram.LayoutDiagram() method is called, tree and its subtrees loose whatever Layout we applied onto it. In other words Tree resets itself to its default TreeStyle i.e. Layered.

What can I do to avoid such things??

Thanks!!

  1. No.
    2) Do not set Diagram.Layout.