Diagram Layout

5 posts, 0 answers
  1. Mohammad
    Mohammad avatar
    21 posts
    Member since:
    Jul 2010

    Posted 07 Jul 2012 Link to this post

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

    Posted 09 Jul 2012 Link to this post

    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

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

  3. DevCraft banner
  4. Mohammad
    Mohammad avatar
    21 posts
    Member since:
    Jul 2010

    Posted 15 Jul 2012 Link to this post

    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; }

    }

    }


  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 18 Jul 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Mohammad
    Mohammad avatar
    21 posts
    Member since:
    Jul 2010

    Posted 19 Jul 2012 Link to this post

    Hi Peter,
    your comment was very usefull and my problem is solved.
    thancks a lot for your support.
Back to Top
DevCraft banner