1. Home
  2. Forum
  3. WPF
  4. Groups in Diagram Builder example

Groups in Diagram Builder example

Hello,

I’m trying to modify Diagram Builder example code.
I’ve got a couple of questions:

1. I would like to loop through groups and for each group loop through the nodes in that group.
With:

foreach (GroupVM gr in (this.SelectedDiagram as FlowDiagramVm) .GroupCollection

I managed to loop through groups, but I don’t see the nodes in each group, gr.Nodes is empty.
How can I do that?

2. Did I understand correctly - that subgroups of nodes (a group inside a group) don’t exist in this example? If so, is there an easy way to add this functionality?

Thank you!


6 Replies 1 reply marked as answer
RA Ranjitha Amirthalingam Syncfusion Team July 27, 2020 12:26 PM UTC

Hi Tanya, 
 
Thanks for contacting Syncfusion support. 
 
Please find the response to your queries as below. 
 
S.No 
Query 
Response 
1 
I would like to loop through groups and for each group loop through the nodes in that group. 
With: 
 
foreach (GroupVM gr in (this.SelectedDiagram as FlowDiagramVm) .GroupCollection 
 
I managed to loop through groups, but I don’t see the nodes in each group, gr.Nodes is empty. 
How can I do that? 
 
We have checked this issue in 18.2.0.44 version and could not able to reproduce the issue. Could you please let us know your product(SfDiagram) version? This helps us to resolve the issue at the earliest. 
2 
Did I understand correctly - that subgroups of nodes (a group inside a group) don’t exist in this example? If so, is there an easy way to add this functionality? 
 
Thank you! 
 
Yes. That subgroup logic is not available in that sample. 
 
We have internally fixed the issue with nested group (group inside group) creation at runtime. We will include the fix in our next weekly nuget release which will be available on 4th  August, 2020. 
  
If you need patch for this fix please revert us with your version details.  
 
Note: We will provide patch in our Main and SP release versions only.  
 
 
 
Regards, 
Ranjitha A.

Marked as answer
TZ Tanya Z July 28, 2020 05:11 AM UTC

Hi Ranjitha, thank you for your reply!
The version I'm using is 17.4.0.39.

I've got some more questions regarding groups:

3. Can I change the group so it will be possible to include one node in a group?

4. Can I make the group visible (for example with transparency) even when it is not selected?


Thank you,
Tanya


RA Ranjitha Amirthalingam Syncfusion Team July 28, 2020 11:46 AM UTC

Hi Tanya, 
 
Please find the response as below. 
 
S.No 
Query 
Response 
1 
I would like to loop through groups and for each group loop through the nodes in that group.  
With:  
foreach (GroupVM gr in (this.SelectedDiagram as FlowDiagramVm) .GroupCollection  
  
I managed to loop through groups, but I don’t see the nodes in each group, gr.Nodes is empty.  
How can I do that?  
We have support to achieve the queries 1,3 and 4 in our latest version. So, we request you to upgrade to our latest version 18.2.0.44. Since, it’s a major change we could not able to provide patch in older versions.  
 
Query 1: 
We can able to get the group child Node details from the group. We have provided sample and video to represent this. Please refer to them as below. 
 
Query 3: 
Yes, we can include a node to the existing group by adding the required node to the Nodes collection of the Group. 
 
Code Example: 
 
var group = (Diagram.Groups as GroupCollection)[0]; 
 
//Add node to the nodes collection of the first group in Diagram. 
NodeViewModel node3 = AddNode(650, 200, "Ellipse"); 
 
(group.Nodes as NodeCollection).Add(node3); 
 
 
Query 4: 
We have support to achieve this using ShapeStyle property of Group. 
 
Code Example: 
 
foreach (var group in Diagram.Groups as GroupCollection) 
   { 
       //Apply shape and shapestyle to the group. 
       group.Shape = App.Current.Resources["Rectangle"]; 
       group.ShapeStyle = App.Current.Resources["GroupStyle"] as Style; 
    } 
 
Sample Link:  
 
Video Link: 
 
3 
Can I change the group so it will be possible to include one node in a group? 
4 
Can I make the group visible (for example with transparency) even when it is not selected? 
2 
Did I understand correctly - that subgroups of nodes (a group inside a group) don’t exist in this example? If so, is there an easy way to add this functionality?  
As we updated earlier, we will include the fix in our next weekly nuget release which will be available on 4th August, 2020.  
   
If you need patch for this fix please revert us with your version details.   
  
Note: We will provide patch for this fix in our latest Main release version 18.2.0.44 only.  
 
 
 
Note: Group is also a Node, so we can add shape, shapestyle, port, annotation to a group. Also, we can perform all interactions for a group same as node.  
 
Regards, 
Ranjitha A.

TZ Tanya Z August 3, 2020 06:01 AM UTC

Thank you for your relpies!

Issue 1 - works with the new version, thanks!

Issue 3 - I'm afraid I wasn't clear.

I would like it to be possible for a group to contain only one node, is it possible to do it easily?

4. I ended up making the groups visible by using the XAML code from the sample you've provided that was commented out, my question is, can I add transparency?

I'm thinking of percents of transparency, like 50 percent - and then two gouprs intersecting each other will look darker in the intersecting area.

Thank you!

Tanya

<Style TargetType="Syncfusion:Group">

<Setter Property="Shape"

Value="{StaticResource Rectangle}"></Setter>

<Setter Property="ShapeStyle">

<Setter.Value>

<Style TargetType="Path">

<Setter Property="Stretch"

Value="Fill"></Setter>

<Setter Property="Fill"

Value="LightBlue"></Setter>

<Setter Property="Stroke"

Value="Blue"></Setter>

</Style>

</Setter.Value>

</Setter>

</Style>

RA Ranjitha Amirthalingam Syncfusion Team August 3, 2020 12:45 PM UTC

Hi Tanya,

Please find the response as below.

S.No Query Response
1
I would like it to be possible for a group to contain only one node, is it possible to do it easily?
 Yes.It is possible to create group with single node while creating group through code-behind. 

Code Example:
NodeViewModel node2 = AddNode(450, 300, "Rectangle");
 GroupViewModel group = new GroupViewModel()
        {
                Nodes = new NodeCollection()
                {
                   node2
                }
        };
 (Diagram.Groups as GroupCollection).Add(group);

2
I ended up making the groups visible by using the XAML code from the sample you've provided that was commented out, my question is, can I add transparency?

I'm thinking of percents of transparency, like 50 percent - and then two groups intersecting each other will look darker in the intersecting area.

 We suspect that your requirement is to set opacity for the group.We have provided code to represent this.Please refer to the code example as below.

Code Example:
 <!--Style for Group-->
            <Style TargetType="Syncfusion:Group">
                <Setter Property="Opacity"
                        Value="0.5"></Setter>
                <Setter Property="Shape"
                        Value="{StaticResource Rectangle}"></Setter>
                <Setter Property="ShapeStyle">
                    <Setter.Value>
                        <Style TargetType="Path">
                            <Setter Property="Stretch"
                                    Value="Fill"></Setter>
                            <Setter Property="Fill"
                                    Value="LightBlue"></Setter>
                            <Setter Property="Stroke"
                                    Value="Blue"></Setter>
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>




Regards,
Ranjitha A.


RA Ranjitha Amirthalingam Syncfusion Team August 4, 2020 07:29 AM UTC

Hi Tanya, 
  
Reported Issue: Nested groups are not able to create in SfDiagram at runtime. 
 
We are glad to announce that our weekly nuget package is released successfully. We have included the fix for the reported issue in this weekly nuget release. Please upgrade to our latest version(18.2.0.48). 
        
    
 
 
If you need patch for this fix please revert us with your version details.      
 
Regards, 
Ranjitha A. 


Loader.
Up arrow icon