Nested objets in Diagram control

[Nicolas FARCET]

Hello,

We are using the Diagram component in our application to allow the user to edit networks (routers, links, etc.). We would like now to add the possibility to create nesting objects such as security zones, geographical areas, sites, etc.

Is there a recommanded way to create nesting objets, i.e. objets that can embed nodes? Moreover, we would also like to put nodes at the boundary of these nesting objects (e.g. zone gateaways).

Ideally, we would like to have a special kind of node that can be expanded to see the contained nodes or that can be opened in an other diagram.

Thanks for your help.

Nicolas.

[Parthiban A]

Hi Nicolas,

We suggest you to try grouping functionality.  It has ability to group collection of nodes and connectors in to it. But it’s visual is purely based on containing nodes and connector, i.e. (size and position). It does not have any specific appearance. We have created a sample, in which we created group having two nodes in it. When you re-size, re-position those node, group will be updated dynamically.

Regarding special kind of node, we suspect that this also regarding group. As group contains nodes and connector, you can toggle those visibility while collapse and make visible while expand it. For those expand and collapse, you have to write your own logic as your desire.

Regarding “open in another diagram” query, we are sorry couldn't understand you requirement clearly. Kindly provide more details with any visual representation.

Please let us know if you require further assist on this.

Regards,

Parthiban A.

NestedObjects_115429_65fd01ca.zip

[Nicolas FARCET]

Thanks for the reply, I will try this.

[Parthiban A]

Hi Nicolas,

Thanks for your update. We will wait until here from you. 

Regards,

Parthiban A.

[Francisco]

Just a comment from my side. The logic in the example suggested works fine, but if we try to use, as suggested in the online documentation, the assignation of nodes to the group, using the ParentGroupp property, we cannot get the group to "contain" the nodes. Is there any bug here? After reading the online documentation, and try to replicate the example under By Using ParentGroup property in Node we could not make it work. The only way so far to use groups has been using the creation of an observableCollection inside the group...

Also, is there any way we can change the visible properties of the group (e.g. add a text box to the group itself)?

Thanks!

[Parthiban A]

Hi Francisco,

We are sorry for the inconvenience caused. We have confirmed issue with “ParentNode property is not working fine. The fix for this is estimated to available on Volume 1, 2014 release. The tentative schedule of volume release is end of March, 2014.We request you to group nodes using Nodes observable collection property until then.

Regarding change visibility of group we have created a sample to collapse the group. Kindly refer the below additional information.

To change the Visibility of Group, it should be binded with ViewModel, so we have derived GroupViewModel with additional property.

Binding for Group is set in ‘GetGroupForItemOverride’ overridden method on CustomDiagram.

Code Snippet:

public class CustomDiagram : SfDiagram

    {

        protected override Group GetGroupForItemOverride(object item)

        {

           Group g=new Group();

           Binding visi = new Binding();

           visi.Source = (item as CustomGroup);

           visi.Path = new PropertyPath("Visibility");

           SetBinding(Syncfusion.UI.Xaml.Diagram.Group.VisibilityProperty, visi);

           return g;

        }

    }

This sample is created based on MVVM design pattern, however you can refer to following documentation to know other ways to add, remove, customize diagram.

http://help.syncfusion.com/winrt à Diagram à Appendix à Rendering.

Regards,

Parthiban A.

NestedObjects_115429_d1cb0e83.zip

[Francisco]

Thanks for the example, however, as soon as I try to modify a bit, I face issues.

First of all, if I add a 3rd node that is not part of the group, the code will "hide" the group and also the 3 nodes. It is more like an all or nothing.

Also, In general, if I try to add a connector between two nodes, I face a null exception in this line of the method I use to add the connection:

  (diagramControl.Connectors as ICollection<object>).Add(connection);

unless I add the following collections in the XAML file to the control:

 <local:CustomDiagram x:Name="diagramControl" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

                <local:CustomDiagram.Nodes>

                    <syncfusion:DiagramCollection></syncfusion:DiagramCollection>

                </local:CustomDiagram.Nodes>

                <local:CustomDiagram.Connectors>

                    <syncfusion:DiagramCollection></syncfusion:DiagramCollection>

                </local:CustomDiagram.Connectors>

            </local:CustomDiagram>

Am I missing anything in the documentation?

Thanks!

[Parthiban A]

Hi Francisco,

Diagram controls elements like Node, Connections and Groups must be initialized before it used. We can either initialize collection with DigramCollection or assign new observable collections to it.  

Regards,

Parthiban A.

[Francisco]

Thanks, that explain my initialisation issues. However, I still have problems trying to change for example, the visibility  of a group, since it is affecting even nodes that do not have the affected group as a parent, as I wrote in the email before. Can you check shortly to extend your example and add an additional node that is not part of the group, so is not affected when changing the visibility of the group, as per your example?

[Parthiban A]

Hi Francisco,

We are currently analyzing on it, we will let you know the status on Monday. (3 Feb, 2014).

Regards,

Parthiban A.

[Parthiban A]

Hi Nicolas,

The reason behind that the entire nodes in diagram control gets hidden, when visibility is collapsed in the provided sample is we incorrectly set binding to diagram control, instead of group view. We have also updated this in the sample.

As group and nodes are separate elements. If you collapsed the visibility of group, it only hides the group not nodes in it. Hence we have provided alternate approach in which we hide entire nodes in the group. Now group will be hided.

Kindly find the updated sample from attachment.

Regards,

Parthiban A

NestedObjects_115429_b8af39fa.zip

[Francisco]

Thanks, now I understand your approach for the custom properties of the group. However, as part of my evaluation, we will need to create groups, as real entities, with specific attributes (text, fill, etc.) I understand that the group objects are not allowing that. Is there any way to simulate that constructions? 

We need to evaluate if this toolkit can enable us to create complex diagrams with nested groups where we can "collapse" and "open" them to show the nodes inside, as well as have specific colours and text on them. What will be the approach to achieve that?

[Parthiban A]

Hi Francisco,

As we said already visual appearance of group is purely based on containing nodes and connectors. For your requirement we have created a demo sample to collapse and expand to show the nodes inside. When we collapse the group, manually moves and re-size the nodes. Again while expanding we restore its position and size. Now it will give you expand and collapse appearance.

We can set background for group by setting background to its view (Group) via binding model and view. If you need to add any visual element (Text) to group, you can edit the control template of group and add elements to it. In the provided sample we had added text block at the center of the group. For more information please refer the sample from attachment.

Regards,

Parthiban A.

NestedObjects_115429_e972c062.zip

[Francisco]

Hi Francisco,

As we said already visual appearance of group is purely based on containing nodes and connectors. For your requirement we have created a demo sample to collapse and expand to show the nodes inside. When we collapse the group, manually moves and re-size the nodes. Again while expanding we restore its position and size. Now it will give you expand and collapse appearance.

We can set background for group by setting background to its view (Group) via binding model and view. If you need to add any visual element (Text) to group, you can edit the control template of group and add elements to it. In the provided sample we had added text block at the center of the group. For more information please refer the sample from attachment.

Regards,

Parthiban A.

NestedObjects_115429_e972c062.zip

Thanks that was really helpful. 

I have one last question: Is it possible to have groups nested inside groups?