add link programmaticaly and specify connector

[nicolasf]

Hi,

 

I would like create a link programmaticaly with a shape and i would like to specify connector for source and target.

Capture1 is what a want

Capture2 is what i have actually

[Dinko | Tech Support Engineer]

,

To change the source/target connector of a connection you can set the SourceConnectorPosition/TargetConnectorPosition property of the connection. These properties are further described in the Connections help article in our documentation.

Regards,
Dinko
Progress Telerik

[nicolasf]

Hi Dinko,

Thanks for your answer, now i can add link programmaticaly for my shape (with special connectors) but that's not working for others

This is my code :

LinkModel.cs
public class LinkModel : LinkViewModelBase<NodeViewModelBase>  {
...
private string _sourceConnectionName;
public string SourceConnectionName
{
    get { return _sourceConnectionName; }
    set
    {
        _sourceConnectionName = value;
        OnPropertyChanged("SourceConnectionName");
    }
}

private string _targetConnectionName;
public string TargetConnectionName
{
    get { return _targetConnectionName; }
    set
    {
        _targetConnectionName = value;
        OnPropertyChanged("TargetConnectionName");
    }
}
...

 

Because i use a GraphSource i should create targetConnectionName and sourceConnectionName properties for my LinkViewModelBase. My properties are binding to my style

Resources :
<core:ConnectorCollection x:Key="customConnectors">
    <telerik:RadDiagramConnector x:Name="Left" Offset="0 0.5" />
    <telerik:RadDiagramConnector x:Name="Right" Offset="1 0.5" />
    <telerik:RadDiagramConnector x:Name="Auto"
                                    Opacity="0"
                                    Offset="0.5 0.5" />
</core:ConnectorCollection>

<core:ConnectorCollection x:Key="networkConnectors">
    <telerik:RadDiagramConnector x:Name="LeftNetwork" Offset="0 0.5" />
    <telerik:RadDiagramConnector x:Name="RightNetwork" Offset="1 0.5" />
</core:ConnectorCollection>


<Style x:Key="rowStyle" TargetType="entity:RowShape">
    ...
    <Setter Property="entity:AttachedProperties.CustomConnectors" Value="{StaticResource customConnectors}" />
    ...
</Style>

<Style x:Key="rowNetworkStyle" BasedOn="{StaticResource rowStyle}" TargetType="entity:RowShape">
    <Setter Property="entity:AttachedProperties.CustomConnectors" Value="{StaticResource networkConnectors}" />
</Style>

<Style BasedOn="{StaticResource RadDiagramConnectionStyle}" TargetType="telerik:RadDiagramConnection">
    ...
    <Setter Property="SourceConnectorPosition" Value="{Binding SourceConnectionName}" />
    <Setter Property="TargetConnectorPosition" Value="{Binding TargetConnectionName}" />
    ...
</Style>

 

and this how i create my special container and shape

Add entity with connection :
var _eNetwork = new TableModel() { ZIndex = GetCurrentZIndex() };
DiagramGraphSource.AddNode(_eNetwork);
RowNetworkModel _eRow = new RowNetworkModel() {};
_eNetwork.AddItem(_eRow);
var _link = new LinkModel() { Source = _eRow, SourceConnectionName = "LeftNetwork", Target = _eRow, TargetConnectionName = "RightNetwork" };
DiagramGraphSource.AddLink(_link);

 

but now i have an error for my others "normal" link (see capture)

thanks for your help

[Dinko | Tech Support Engineer]

Nicolas,

You are getting this error because the SourceConnectionName/TargetConnectionName property is null. Using only the provided code snippet I am not sure what is exactly the reason behind this because some of the objects in the code snippet are missing. 

In MVVM scenario if you want to add custom connectors you need to create an Attached property to the RadDiagramShape and bind its Value to a collection from your ViewModel. Looking at the provided code snippet I am assuming that you have already done this. I have modified the project from this forum thread (which similar behavior was discussed) to test your scenario and it is working on my side. You can find the project attached to this reply. Can you give it a try and let me know if I am missing something from your implementation.

Also in the project, more specifically in the MainViewModel class, you can observe that I am creating a connection and setting its SourceConnectionName/TargetConnectionName property to a custom connector Name.

Regards,
Dinko
Progress Telerik

[nicolasf]

Thanks for your help, with your exemple its more understandable.

But i still have the same problem : if i want to add a link with my mouse (after code initialisation), the program crash with error : "Connector '' doesnt exist". Its just like he couldn't find the connector name.

Could you help me ?

Thanks

Nicolas

[Dinko | Tech Support Engineer]

,

I have further examined this behavior. Internally, in code, the diagram except that the SourceConnectorPosition and TargetConnectorPosition properties have default values. To workaround this behavior you can set the Mode binding in the implicit style to TwoWay and set the SourceConnectionName and TargetConnectionName to ConnectorPosition.Auto in the constructor of the Link.

<Style  TargetType="telerik:RadDiagramConnection">
    <Setter Property="SourceConnectorPosition" Value="{Binding SourceConnectionName,Mode=TwoWay}" />
    <Setter Property="TargetConnectorPosition" Value="{Binding TargetConnectionName,Mode=TwoWay}" />
</Style>

public Link()
{
    this.SourceConnectionName = ConnectorPosition.Auto;
    this.TargetConnectionName = ConnectorPosition.Auto;
}

I have modified the project to demonstrate this approach.

Regards,
Dinko
Progress Telerik