MVVM RadDiagramConnection Copy/Paste Issue

9 posts, 0 answers
  1. Kent
    Kent avatar
    10 posts
    Member since:
    Jan 2012

    Posted 27 Aug 2013 Link to this post

    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>
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 28 Aug 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Kent
    Kent avatar
    10 posts
    Member since:
    Jan 2012

    Posted 29 Aug 2013 Link to this post

    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;
            }
  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 30 Aug 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  6. Kent
    Kent avatar
    10 posts
    Member since:
    Jan 2012

    Posted 30 Aug 2013 Link to this post

    The workaround fixes the issue.  Thanks.
  7. Fabrizio
    Fabrizio avatar
    16 posts
    Member since:
    Nov 2013

    Posted 15 Oct 2014 in reply to Tina Stancheva Link to this post

    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?
  8. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 17 Oct 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  9. Aakansha
    Aakansha avatar
    20 posts
    Member since:
    Sep 2014

    Posted 14 Nov 2014 Link to this post

    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. 
  10. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 18 Nov 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for WPF is Visual Studio 2017 Ready