MVVM RadDiagramConnection Copy/Paste Issue

[Kent]

When using mvvm with the diagram.  I am having an issue when using a custom style with RadDiagramConnection.   In the style I bind to the properties SourceCapType, TargetCapType and ConnectionType.  The binding works fine.  But as soon as I copy and paste RadDiagramConnection.  The binding on the pasted connection no longer updates when I change those properties in code behind. Is there something special that one must do with these properties?

Here is style I am using.

  <Style x:Key="CustomLinkStyle" TargetType="telerik:RadDiagramConnection">            
            <Setter Property="Visibility" Value="{Binding Visibility,Mode=TwoWay}"/>
            <Setter Property="Foreground" Value="Red"/>
            <Setter Property="Stroke" Value="{Binding Color}"/>
            <Setter Property="SourceCapType" Value="{Binding SourceCapType, Mode=TwoWay}"/>
            <Setter Property="TargetCapType" Value="{Binding TargetCapType, Mode=TwoWay}"/>
            <Setter Property="ConnectionType" Value="{Binding ConnectionType,Mode=TwoWay}"/>
            <Setter Property="Background" Value="{Binding Color}"/>
        </Style>

[Tina Stancheva]

Hi Kent,

When you work with copy/paste operations within a RadDiagram instance, you need to have in mind that these operations are implemented using serialization. This means that in order to create a new copy of a RadDiagramItem, RadDiagram serializes the settings of the copied/cut item and use them to create a new one on paste.

However, the default RadDiagram serialization doesn't save all RadDiagramItem settings but only a small common set of properties. This means that you need to customize the default serialization to save the values of additional properties. In your particular case you need to manually serialize the properties you have data-bound.

In an MVVM applications, where the RadDiagram is populated with business items, in case you need to utilize the Copy/Paste operations, it's best to derive your custom GraphSource collection from the SerializableGraphSourceBase class. This will allow you to override the default serialization methods of the GraphSource to plug-into the serialization process and serialize a custom set of properties. This approach is further described in the HowTo Serialize a Databound Diagram tutorial.

I also attached a sample project where I used the RadDiagramConnection style you sent and I serialized the SourceCapType, TargetCapType, Color and Visibility properties of the data link object. Please have a look at the implemented approach and let me know if it works for you or if I'm missing anything.

Regards,
Tina Stancheva
Telerik

[Kent]

The issue isn't saving the properties.  The issue is that any line that is copied  doesn't allow me to  change the SourceCapType, TargetCapType and LineType.
I took your sample and added a button which changes the sourceCapType and targetcap  and line type of all the connector on the diagram.  The code is below. It works just fine with two lines that are present.  But if you copy one of the lines. Then you press the button the source or target cap type and linetype no longer change for the copied connector. But they do for the non-copied lines.  

Boolean isArrow = true;

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            CustomGraphSource grpahSource = this.diagram.GraphSource as CustomGraphSource;


            foreach (LinkModel model in grpahSource.InternalLinks)
            {
                if (isArrow)
                {
                    model.SourceCapType = Telerik.Windows.Diagrams.Core.CapType.Arrow6Filled;
                    model.TargetCapType = Telerik.Windows.Diagrams.Core.CapType.Arrow6Filled;
                    model.ConnectionType = Telerik.Windows.Diagrams.Core.ConnectionType.Spline;

                }
                else
                {
                    model.SourceCapType = Telerik.Windows.Diagrams.Core.CapType.Arrow1Filled;
                    model.TargetCapType = Telerik.Windows.Diagrams.Core.CapType.Arrow1Filled;
                    model.ConnectionType = Telerik.Windows.Diagrams.Core.ConnectionType.Polyline;
                }

            }

            if (isArrow)
                isArrow = false;
            else
                isArrow = true;
        }

[Tina Stancheva]

Hello Kent,

Please accept my apology for the misunderstanding. I can now see the described scenario. Unfortunately this is a known issue within our RadDiagrams - I made it public and available for tracking through our PITS. You can follow its progress here.

The issue is basically caused by the RadDiagram internal deserializaiton mechanism. It applies local values on some of the deserialized RadDiagramItem's properties. And a style setter is never applied on a property that has a local value thus breaking your logic. As a workaround, until the issue is resolved, you can manually clear the local values of the RadDiagramConnections:

public override LinkModel DeserializeLink(Telerik.Windows.Diagrams.Core.IConnection connection, Telerik.Windows.Diagrams.Core.SerializationInfo info)
{

    (connection as RadDiagramConnection).ClearValue(RadDiagramConnection.SourceCapTypeProperty);
    (connection as RadDiagramConnection).ClearValue(RadDiagramConnection.TargetCapTypeProperty);
    (connection as RadDiagramConnection).ClearValue(RadDiagramConnection.ConnectionTypeProperty);

    LinkModel link = base.DeserializeLink(connection, info);
    link.SourceCapType = (CapType)Enum.Parse(typeof(CapType), info["SourceCapType"].ToString());
    link.TargetCapType = (CapType)Enum.Parse(typeof(CapType), info["TargetCapType"].ToString());
    link.Color = new SolidColorBrush(new Color(){...});
    link.Visibility = (Visibility)Enum.Parse(typeof(Visibility), info["Visibility"].ToString());
    return link;
}

I modified my solution accordingly so that you can download and run it locally to test the workaround. Let me know how it goes.

Regards,
Tina Stancheva
Telerik

[Kent]

The workaround fixes the issue.  Thanks.

[Fabio]

Hi Tina,

your example has the same issue that all others telerik mvvm example: the new pasted link has source and target = null, i.e is not pointing the freshly created nodes.

Have you a solution for that?

[Pavel R. Pavlov]

Hello,

I tested the project that Tine provided with our latest official release and it works as she explained. You can take a look at this screencast to see the exact behavior.
Are you saying that the same project behaves differently on your side?

Regards,
Pavel R. Pavlov
Telerik

 

 

[Aakansha]

Hello All,

I want to implement Cut, Copy and Paste feature for the Mind Map demo available in Telerik UI for WPF. So suppose I want to copy a node and its attached sub-children and paste it as children of another node. 

Kindly help that how can I do this if I want to extend the Mind Map sample with this feature. 

[Pavel R. Pavlov]

Hello,

When you use the Copy and Paste functions of the RadDiagram you actually trigger the Serialization and Deserialization features of the control. This is why in order to customize the Copy and Paste functions you actually need to customize the Serialization and Deserialization process. This can be done in the GraphSource of the example. It actually is SerializableGraphSource. It exposes the SerializeLink(), DeserializeLink(), DeserializeNode() and SerializeNode() methods. You need to override them if the properties that we serialize by default does not fit your requirements.

Note that those methods receive object of type SerializationInfo. In the serialization methods you need to manually populate that object with key value pairs representing the property and its value for the objects that are being serialized. In the deserialization methods you need to do the opposite. You need to create business objects and assign to them the the properties and corresponding values that are present in the SerializationInfo object.

As for the requirement for copy/paste functionality in the MindMap you can take a look at this forum thread. 

Regards,
Pavel R. Pavlov
Telerik