1. Home
  2. Forum
  3. WPF
  4. Caliburn.Micro / SfDiagram Binding

Caliburn.Micro / SfDiagram Binding

Forgive me as I'm new to C# - but I am having the hardest time trying to figure out how bind the ObservableCollection from my view model to create nodes dynamically. I do not want to do this in codebehind - I would prefer to use bindings with my view model, which is an ObservableCollection that is updated (a query to WMI) upon pressing refresh. Please let me know how I can accomplish this? The documentation is a bit overwhelming and I didn't see anything relevant to this case in there or the forums.



4 Replies
JS Jayanthi Sivabalan Syncfusion Team December 13, 2017 11:19 AM UTC

Hi Nathan, 
 
Thanks for contacting Syncfusion support. 
 
Requested requirement:  Need to binding the ObservableCollection with view model 
 
Please find the response for the requested requirement. 
 
Sl.No. 
Requirement 
Response 
1 
I am having the hardest time trying to figure out how bind the ObservableCollection from my view model to create nodes dynamically. I do not want to do this in code behind - I would prefer to use bindings with my view model, which is an ObservableCollection that is updated (a query to WMI) upon pressing refresh. Please let me know how I can accomplish this?  
We have support to achieve the requirement. We have Provided sample to represent this. 
 
Please refer the sample link as below. 
 
Sample details:  
We have created 4 NodeViewModel and added it to DiagramViewModel.Nodes property of type ObservableCollection<NodeViewModel>. This Nodes collection is binded with SfDiagram.Nodes collection in Xaml. Clicking on add button, will add a new node to DiagramViewModel.Nodes collection, which will be reflected in UI. 
 
If our assumption is different from your requirement, please provide screenshot, sample or video to represent the requested requirement. 
2 
The documentation is a bit overwhelming and I didn't see anything relevant to this case in there or the forums. 
As data binding is primary part of WPF, and it is supported for all dependency properties of diagram, it is not explicitly document. However, you can refer to Diagram Builder product showcase demo from WPF sample browser. It is built completely with MVVM pattern. 
 
Please refer the sample location as below. 
Location: EssentialStudio -> 15.4.0.17 -> WPF -> Showcase -> Diagram Builder 
 
 
Regards, 
Jayanthi S. 


NZ Nathan Ziehnert December 13, 2017 08:57 PM UTC

This has gotten me a little further - thank you. I had to rework some things to get the data to bind properly, but I now have the nodes populating the control. I am stuck now however with the automatic layout behavior with bound parameters.

I am creating a Diagram View Model - which is attached to the Control as it's DataContext. I'm then setting the layout necessities and applying them to this view model.


However, when I attempt to add a node I receive the following error:


When I remove the code "dss.DataSource" from the DataSourceSettings - the nodes add correctly, leading me to believe that it might be unable to see the ParentId and Id fields from the object inside of content?


I'm sure I'm doing something wrong and maybe you can help?

NZ Nathan Ziehnert December 14, 2017 06:17 AM UTC

Nevermind - I got it figured out... Got too tied up with the NodeViewModels when I really just wanted to use my existing objects. Thanks for your guidance!

JS Jayanthi Sivabalan Syncfusion Team December 14, 2017 10:10 AM UTC

Hi Nathan, 
 
Thanks for the update. 
 
Cause: NodeViewModel collection was assigned to dss.DataSource instead of SCCMCollection collection. 
 
Solution: DataSourceSettings used to arrange the Nodes and Connectors based on ParentId and Id. So no need to assign the NodeViewModel collection to dss.DataSource. 
For assigning value to dss.DataSource, use SCCMCollection collection directly instead of NodeViewModel collection. Because NodeViewModel collection is assigned to dvm.Nodes, this is enough to create the layout.  
 
We have also provided sample to represent this. 
 
Please refer the sample link as below: 
  
 
Sample changes details: 
 
Please refer the code changes in provided sample as below. 
 
Sl.No. 
sample code 
Modified sample code 
1 
ObservableCollection<NodeViewModel> nodes = new ObservableCollection<NodeViewModel>(); 
ObservableCollection<Employee> nodes = new ObservableCollection<Employee>(); 
2 
foreach (Employee result in results) 
{ 
    NodeViewModel nvm = new NodeViewModel(); 
    nvm.Content = result; 
    nodes.Add(nvm); 
} 
  foreach (Employee result in results) 
  { 
     nodes.Add(result); 
  } 
3 
diagramControl.Nodes = nodes; 
diagramControl.Nodes = new ObservableCollection<NodeViewModel>(); 
 
Note: We have commented the incorrect sample code in the provided sample for comparison and more clarification. 
 
Please let us know, if any further assistance on this. 
 
Regards, 
Jayanthi S. 
 


Loader.
Up arrow icon