We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Connectors not showing when using DataSourceSettings

Hi Team,

I am trying to implement Org chart in my WPF PRISM-MVVM project, I am using DataSourceSetting property to bind data from my ViewModel.
I can see my Data being shown on the diagram when the application loads but I am facing a few problems.
  1. Connectors are not showing though my data has ParentId, Id and Root.
  2. I am able to add a node on click of a button but even the new node does not get connected to the parent (might be due to the first issue).
  3. Also I would like to know if it is possible to implement ItemAddedComment in my VM when I drop a shape from stencil into another node (Child added to parent by dragging and dropping)
Could be I am missing some property configuration, but unable to get it to work like expected, not sure what I am missing.
I have attached a sample application. I am using version 17.3.0.9.

Please help!!!


Thanks,
Srikanth V.

Attachment: MySFDiagram_fe07584c.zip

5 Replies

KR Karkuvel Rajan Shanmugavel Syncfusion Team September 30, 2019 11:02 AM UTC

Hi Srikanth, 
 
Thanks for contacting Syncfusion support. 
 
Please find the response for your queries in the below table. 
 
Query  
Response 
 
Connectors are not showing though my data has ParentId, Id and Root. 
 
 
We have validated the reported issue. We found that the reported issue is in sample side. In sample we have to use EmpId and ParentId in same type. Please find the modified code snippet in the below table and behavior changes in the below release notes link. 
 
Code snippet : 
 
 
public class Employee 
    { 
        public string EmpId { get; set; } 
        public string ParentId { get; set; } 
 
            Employee e1 = new Employee() 
            { 
                EmpId = "1", 
 
 
 

 
 
I am able to add a node on click of a button but even the new node does not get connected to the parent (might be due to the first issue). 
 
 
This issue is due to the first issue. If we do the above same code changes then this issue also fixed and we have ensured the same in the given sample. 
 
Also I would like to know if it is possible to implement ItemAddedComment in my VM when I drop a shape from stencil into another node (Child added to parent by dragging and dropping) 
 
 
 
Yes, we can implement the ItemAddedCommand in VM and also we can get the targetnode and parentnode in its argument. With this arguments we can implement the parent-child relation between sourcenode(child) and targetnode(parent). 
 
Regards, 
Karkuvel Rajan S  



SR Srikanth October 10, 2019 01:03 PM UTC

Thanks Rajan for the information. I was able to solve issues 1 and 2, but for the third issue could you please  provide more inputs.

I tried using the ItemAddedCommand with ItemAddedEventArgs as a parameter to the method in my View model, but as mentioned by you, I dont see the args containing information about the source and target. Ideally I would like to add new elements from stencil onto the  diagram and then be able to establish parent-child relation by dragging either from stencil or using existing nodes on the diagram.

Let me know if there a newer version with makes these functionality easier and has better performance.



RA Ranjitha Amirthalingam Syncfusion Team October 11, 2019 08:28 AM UTC

Hi Srikanth, 
 
Sorry for the inconvenience caused. 
 
Please use “ItemDrop” command to get the notification when a node is dropped over another node. We can get the Source(Child node) and Target(Parent node) in its argument. With this arguments we can implement the parent-child relation between Source (child node) and Target(parent node). Please refer to the below code example to achieve your requirement. 
 
Code Example: 
private void OnItemDrop(ItemDropEventArgs args) 
        { 
            var sourcenode = (args.Source as NodeViewModel); 
            if (args.Target is IEnumerable<object>) 
            { 
                foreach (object targetElement in args.Target as IEnumerable<object>) 
                { 
                    if (targetElement is NodeViewModel) 
                    { 
                        ConnectorViewModel connector = new ConnectorViewModel(); 
                        connector.SourceNode = sourcenode; 
                        connector.TargetNode = targetElement; 
                        (this.Connectors as ConnectorCollection).Add(connector); 
                    } 
                } 
            }     
        } 
 
ItemAdded command will notify you when an item is added to the diagram.We can get the Item (Node/Connector) which is currently added to the diagram and ItemSource (where the element is added from Stencil/Diagram).When an item is duplicated in the Diagram , ItemSource would be Diagram.  
 
Regards, 
Ranjitha A. 



SV Srikanth Vattipally October 14, 2019 03:09 PM UTC

Thank You Ranjitha for the information.
I am now able to drop items from stencil and get connectors based on the parent-child relation but when I drop an item from stencil, I find that the content property of the node that is being dropped onto the diagram is null, there are other properties also that are null for the source node.

Ex: args-->Source-->.Content or args-->Source-->ID.

I need the content because I have a bunch of similar nodes in the stencil and I want to be able to differentiate them based on some property that belongs to the source node.
Let me know if I am missing something. 

Thank you for all the help.

Regards,
Srikanth V.


KR Karkuvel Rajan Shanmugavel Syncfusion Team October 15, 2019 06:37 AM UTC

Hi Srikanth, 
 
NodeViewModel’s Content , ContentTemplate , Shape and ShapeStyle properties will not be serialized by default. Please add a custom property by deriving NodeViewModel and allow it to serialize as shown in following code example.  
  
Code Example:  
  
public class customnode : NodeViewModel  
{  
    [DataMember]  
    public object customcontent  
    {  
        get { return Content; }  
        set { Content = value; }  
    }  
}  
  
   
We have prepared a sample to demonstrate this.  
 
 
Regards, 
Karkuvel Rajan S  


Loader.
Live Chat Icon For mobile
Up arrow icon