Diagram Layout

[Mohammad]

Hi,
I Build my Orgchat With RadDiagram such as sample that telerik use in demo, but my Data not load from Organization.xml and load from one aspx page that response.write my xml file from server.
evething is correct, but when orgchart load one of the child nod stand top of its parrent.
only position of this node is wrong but connectors are correct.

[Petar Mladenov]

Hello Mohammad,

 Could you please elaborate more on your scenario, what are your Layout Settings, do you use TipOverTree Layout. Is it possible for you to send us some of your code? This way we would be better able to advice you.

Regards,
Petar Mladenov
the Telerik team

[Mohammad]

Hello Peter,
I use exact the demo sample of telerik, But my XML file produce dynamicaly with "response.write" my data in one aspx page.
in this post I attach image of my result, please see it, tnx.
this is my code in viewModel :

using

 

 

System;

using

 

 

System.Collections.ObjectModel;

using

 

 

System.Linq;

using

 

 

System.Windows;

using

 

 

System.Xml.Linq;

using

 

 

Telerik.Windows.Controls;

using

 

 

Telerik.Windows.Controls.Diagrams.Extensions.ViewModels;

using

 

 

Telerik.Windows.Diagrams.Core;

using

 

 

System.Net;

namespace

 

 

Telerik.Windows.Examples.Diagrams.OrgChart

{

 

public class OrgChartViewModel : ViewModelBase

{

 

private GraphSource graphSource;

 

private TreeLayoutType currentTreeLayoutType;

 

private ItemDisplayMode currentItemDisplayMode;

 

private bool shouldLayoutAfterTemplateChange;

 

private bool shouldLayoutAfterExpandCollapse;

 

private TreeLayoutViewModel childTreeLayoutViewModel;

 

private readonly OrgTreeRouter router = new OrgTreeRouter();

 

public OrgChartViewModel()

{

 

this.GraphSource = new GraphSource();

 

this.HierarchicalDataSource = new ObservableCollection<Node>();

 

this.PopulateWithData();

 

this.PopulateGraphSources();

 

this.ChildRouterViewModel = new OrgRouterViewModel(this.router);

 

this.ChildTreeLayoutViewModel = new TreeLayoutViewModel();

 

this.CurrentTreeLayoutType = TreeLayoutType.TreeDown;

 

this.CurrentItemDisplayMode = ItemDisplayMode.Standard;

 

this.BindCommands();

 

this.ShouldLayoutAfterTemplateChange = true;

 

this.ShouldLayoutAfterExpandCollapse = false;

}

 

public event EventHandler<VisibilityChangedEventArgs> NodeVisibilityChanged;

 

public event EventHandler CurrentLayoutTypeChanged;

 

public event EventHandler CurrentItemDisplayModeChanged;

 

public event EventHandler CurrentLayoutTypeSettingsChanged;

 

public event EventHandler ChildrenExpandedOrCollapsed;

 

public ItemDisplayMode CurrentItemDisplayMode

{

 

get { return this.currentItemDisplayMode; }

 

set

{

 

if (this.currentItemDisplayMode != value)

{

 

this.currentItemDisplayMode = value;

 

this.OnPropertyChanged("CurrentItemDisplayMode");

 

this.OnCurrentItemDisplayModeChanged();

}

}

}

 

public TreeLayoutType CurrentTreeLayoutType

{

 

get { return currentTreeLayoutType; }

 

set

{

 

this.currentTreeLayoutType = value;

 

this.ChildTreeLayoutViewModel.CurrentTreeLayoutType = value;

 

this.ChildRouterViewModel.CurrentTreeLayoutType = value;

 

this.OnPropertyChanged("CurrentTreeLayoutType");

 

this.OnCurrentLayoutTypeChanged();

}

}

 

public GraphSource GraphSource

{

 

 

get

{

 

return this.graphSource;

}

 

set

{

 

if (this.graphSource != value)

{

 

this.graphSource = value;

 

this.OnPropertyChanged("GraphSource");

}

}

}

 

public ObservableCollection<Node> HierarchicalDataSource { get; private set; }

 

public OrgTreeRouter Router { get { return this.router; } }

 

public DelegateCommand ToggleVisibilityCommand { get; set; }

 

public TreeLayoutViewModel ChildTreeLayoutViewModel

{

 

get { return this.childTreeLayoutViewModel; }

 

protected set

{

 

if (this.childTreeLayoutViewModel != value)

{

 

this.childTreeLayoutViewModel = value;

 

this.OnPropertyChanged("ChildTreeLayoutViewModel");

}

}

}

 

public OrgRouterViewModel ChildRouterViewModel { get; protected set; }

 

public bool ShouldLayoutAfterTemplateChange

{

 

get { return this.shouldLayoutAfterTemplateChange; }

 

set

{

 

if (this.shouldLayoutAfterTemplateChange != value)

{

 

this.shouldLayoutAfterTemplateChange = value;

 

this.OnPropertyChanged("ShouldLayoutAfterTemplateChange");

}

}

}

 

public bool ShouldLayoutAfterExpandCollapse

{

 

get { return this.shouldLayoutAfterExpandCollapse; }

 

set

{

 

if (this.shouldLayoutAfterExpandCollapse != value)

{

 

this.shouldLayoutAfterExpandCollapse = value;

 

this.OnPropertyChanged("ShouldLayoutAfterExpandCollapse");

}

}

}

 

public void PopulateGraphSources()

{

 

foreach (var item in this.HierarchicalDataSource)

{

 

this.GraphSource.PopulateGraphSource(item);

}

}

 

protected bool CanExecuteToggleVisibilityCommand(object o)

{

 

return o != null && (o as Node).Children.Count > 0;

}

 

protected void ExecuteToggleVisibilityCommand(object o)

{

 

var node = o as Node;

 

var areChildrenCollapsed = node != null && node.AreChildrenCollapsed;

 

this.ToggleChildrenVisibility(node, areChildrenCollapsed);

node.AreChildrenCollapsed = !node.AreChildrenCollapsed;

}

 

private void BindCommands()

{

 

this.ToggleVisibilityCommand = new DelegateCommand(this.ExecuteToggleVisibilityCommand, this.CanExecuteToggleVisibilityCommand);

}

 

private ObservableCollection<HierarchicalNodeViewModel> GetSubNodes(XContainer element, Node parent)

{

 

var nodes = new ObservableCollection<HierarchicalNodeViewModel>();

 

foreach (var subElement in element.Elements("Node"))

{

 

Node node = this.CreateNode(subElement, parent);

node.Children.AddRange(

 

this.GetSubNodes(subElement, node));

nodes.Add(node);

}

 

return nodes;

}

 

private Node CreateNode(XElement element, Node parentNode)

{

 

 

 

Node node = new Node();

node.PropertyChanged +=

 

this.OnNodePropertyChanged;

 

try

{

node.TBL_PersonnelFirstName = element.Element(

 

"TBL_PersonnelFirstName").Value;

}

 

catch { node.TBL_PersonnelFirstName = "-"; }

 

try

{

node.TBL_PersonnelLastName = element.Element(

 

"TBL_PersonnelLastName").Value;

}

 

catch { node.TBL_PersonnelLastName = "-"; }

 

try

{

node.TBL_PlaceName =

 

"محل جغرافیایی : "+ element.Element("TBL_PlaceName").Value;

}

 

catch (Exception ex) { node.TBL_PlaceName = "محل جغرافیایی : - "; }

node.Path = parentNode ==

 

null ? node.FullName : parentNode.Path + "|" + node.FullName;

 

try

{

node.TBL_DepartmentName =

 

"واحد سازمانی : " + element.Element("TBL_DepartmentName").Value;

}

 

catch { node.TBL_DepartmentName = "واحد سازمانی : -"; }

 

try

{

node.TBL_PersonnelID =

 

"کد پرسنلی : "+ element.Element("TBL_PersonnelID").Value;

}

 

catch { node.TBL_PersonnelID = "کد پرسنلی : - "; }

 

try

{

node.TBL_UserID = element.Element(

 

"UserID").Value;

}

 

catch { node.TBL_UserID = "-"; }

 

try

{

node.ImagePath =

 

"http://" + NikCo.OrgChart.MainPage.ServerIP + "/NikCo.Authenticate.Web/AspxPages/GetUserImageOrSignature.aspx?type=Image&ID=" + Convert.ToInt32(node.TBL_UserID);

}

 

catch

{

node.ImagePath =

 

"/NikCo.OrgChart;component/Empty.png";

}

 

try

{

node.TBL_PostTitle = element.Element(

 

"TBL_PostTitle").Value;

}

 

catch { node.TBL_PostTitle = ""; }

 

try

{

node.BgColor = (

 

BgColor)Enum.Parse(typeof(BgColor), element.Element("BgColor").Value, true);

}

 

catch { node.BgColor = BgColor.Level1; }

 

if (element.Elements("Node").Count() == 0) { node.BgColor = BgColor.Level2; };

　

　

 

return node;

}

 

private void OnNodePropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)

{

 

if (e.PropertyName == "Visibility")

{

 

if (this.NodeVisibilityChanged != null)

{

 

this.NodeVisibilityChanged(sender, new VisibilityChangedEventArgs((sender as Node).Visibility == Visibility.Visible));

}

}

}

 

private void PopulateWithData()

{

 

//var stream = Application.GetResourceStream(new Uri("/SilverlightApplication19;component/Organization.xml", UriKind.RelativeOrAbsolute));

 

//XElement dataXml = XElement.Load(stream.Stream);

 

//foreach (XElement element in dataXml.Elements("Node"))

 

//{

 

// Node node = this.CreateNode(element, null);

 

// node.Children.AddRange(this.GetSubNodes(element, node));

 

// this.HierarchicalDataSource.Add(node);

 

//}

 

WebClient wc = new WebClient();

wc.OpenReadCompleted +=

 

new OpenReadCompletedEventHandler(wc_OpenReadCompleted);

wc.OpenReadAsync(

 

new Uri("http://" + NikCo.OrgChart.MainPage.ServerIP + "/NikCo.Authenticate.Web/AspxPages/OCXmlModelDocument.aspx?TBL_OcID=" + NikCo.OrgChart.MainPage.TBL_OcID + "&TBL_PostID=" + NikCo.OrgChart.MainPage.TBL_PostID + ""));

}

 

private void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)

{

 

XElement dataXml = XElement.Load(e.Result);

 

foreach (XElement element in dataXml.Elements("Node"))

{

 

Node node = this.CreateNode(element, null);

node.Children.AddRange(

 

this.GetSubNodes(element, node));

 

this.HierarchicalDataSource.Add(node);

}

 

this.GraphSource.PopulateGraphSource(this.HierarchicalDataSource[0]);

}

 

private void ToggleChildrenVisibility(HierarchicalNodeViewModel node, bool areChildrenVisible)

{

 

foreach (Node subNode in node.Children)

{

 

var visibility = areChildrenVisible ? Visibility.Visible : Visibility.Collapsed;

subNode.Visibility = visibility;

subNode.IsSelected =

 

false;

 

this.GraphSource.InternalLinks.Where(link => link.Source == node).ToList()

.ForEach(link =>

{

link.Visibility = visibility;

link.IsSelected =

 

false;

});

 

if (subNode.AreChildrenCollapsed) continue;

 

this.ToggleChildrenVisibility(subNode, areChildrenVisible);

}

 

this.OnChildrenExpandedOrCollapsed();

}

 

private void OnCurrentItemDisplayModeChanged()

{

 

if (this.CurrentItemDisplayModeChanged != null)

{

 

this.CurrentItemDisplayModeChanged(this, EventArgs.Empty);

}

}

 

private void OnCurrentLayoutTypeChanged()

{

 

if (this.CurrentLayoutTypeChanged != null)

{

 

this.CurrentLayoutTypeChanged(this, EventArgs.Empty);

}

}

 

private void OnChildrenExpandedOrCollapsed()

{

 

if (this.ChildrenExpandedOrCollapsed != null)

{

 

this.ChildrenExpandedOrCollapsed(this, EventArgs.Empty);

}

}

}

 

public class VisibilityChangedEventArgs : EventArgs

{

 

public VisibilityChangedEventArgs(bool isVisible)

{

 

this.IsVisible = isVisible;

}

 

public bool IsVisible { get; private set; }

}

}

[Petar Mladenov]

Hi Mohammad ,

 I guess you haven't specified the exact root node which is almost mandatory for a successful Layout operation. In the OrgChart Demo this is done is the SetLayoutRoots method in OrgChartExample.xaml.cs file:

private void SetLayoutRoots()
        {
            foreach (var item in this.viewModel.HierarchicalDataSource)
            {
                OrgChartShape shape = this.diagram.ContainerGenerator.ContainerFromItem(item) as OrgChartShape;
                this.viewModel.ChildTreeLayoutViewModel.CurrentLayoutSettings.Roots.Add(shape);
            }
        }

You can also check out this help article (section  OrgTreeRouter: TipOverTreeRouter) . Keep in mind that the SetLayoutRooots in OrgChart is invoked in the ExampleLoaded event handler, this way the generation of the Shapes is ensured. Otherwise the ContainerFromItem may return null.
Let us know if setting the roots before Layout resolves your issue.

Kind regards,
Petar Mladenov
the Telerik team

[Mohammad]

Hi Peter,
your comment was very usefull and my problem is solved.
thancks a lot for your support.