This is a migrated thread and some comments may be shown as answers.

Diagram selecting wrong connector or not at all (intermittent)

5 Answers 83 Views

Diagram

This is a migrated thread and some comments may be shown as answers.

Chris asked on 21 Aug 2016, 06:33 AM

Hi,

I have an issue of when I click on a connector with text block content, the diagram control either selects the incorrect connector or does not select anything at all. It appears a bit random but is quite repeatable.

I have attached a video of the first scenario: https://www.dropbox.com/s/i7wwxon7iqy6hr1/Telerik%20Diagram%20selection%20issue.mp4?dl=0

(Download video as the video may lose video quality)

In this video the middle connector is already selected. I then click the connector on the far left and you will see the connector on the far right is selected instead.

Here is the sample code:

<Window x:Class="TelerikWpfApp1.MainWindow"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                Title="MainWindow" Height="800" Width="800">
    <Grid>
        <telerik:RadDiagram>
            <telerik:RadDiagramConnection
                StartPoint="100,100"
                EndPoint="100, 500"
                ConnectionType="Polyline"
                SourceConnectorPosition="Auto"
                StrokeThickness="2"
                ToolTipService.IsEnabled="True"
                SourceCapType="Arrow1"
                TargetCapType="Arrow2"
                ZIndex="4">
                <telerik:RadDiagramConnection.Content>
                    <TextBlock Text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
                               Background="Yellow"
                           FontFamily="Arial"
                           FontSize="10"
                           Visibility="Visible"
                           FontWeight="Normal"
                           RenderTransformOrigin="0.5, 0.5"
                           Padding="0, 15, 0, 0">
                        <TextBlock.RenderTransform>
                            <RotateTransform Angle="90"/>
                        </TextBlock.RenderTransform>
                    </TextBlock>
                </telerik:RadDiagramConnection.Content>
            </telerik:RadDiagramConnection>
            <telerik:RadDiagramConnection
                StartPoint="140,100"
                EndPoint="140, 500"
                ConnectionType="Polyline"
                SourceConnectorPosition="Auto"
                StrokeThickness="2"
                ToolTipService.IsEnabled="True"
                SourceCapType="Arrow1"
                TargetCapType="Arrow2"
                ZIndex="4">
                <telerik:RadDiagramConnection.Content>
                    <TextBlock Text="BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB"
                           Background="Yellow"
                               FontFamily="Arial"
                           FontSize="10"
                           Visibility="Visible"
                           FontWeight="Normal"
                           RenderTransformOrigin="0.5, 0.5"
                           Padding="0, 15, 0, 0">
                        <TextBlock.RenderTransform>
                            <RotateTransform Angle="90"/>
                        </TextBlock.RenderTransform>
                    </TextBlock>
                </telerik:RadDiagramConnection.Content>
            </telerik:RadDiagramConnection>
            <telerik:RadDiagramConnection
                StartPoint="180,100"
                EndPoint="180, 500"
                ConnectionType="Polyline"
                SourceConnectorPosition="Auto"
                StrokeThickness="2"
                ToolTipService.IsEnabled="True"
                SourceCapType="Arrow1"
                TargetCapType="Arrow2"
                ZIndex="4">
                <telerik:RadDiagramConnection.Content>
                    <TextBlock Text="CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC"
                           Background="Yellow"
                               FontFamily="Arial"
                           FontSize="10"
                           Visibility="Visible"
                           FontWeight="Normal"
                           RenderTransformOrigin="0.5, 0.5"
                           Padding="0, 15, 0, 0">
                        <TextBlock.RenderTransform>
                            <RotateTransform Angle="90"/>
                        </TextBlock.RenderTransform>
                    </TextBlock>
                </telerik:RadDiagramConnection.Content>
            </telerik:RadDiagramConnection>
        </telerik:RadDiagram>
    </Grid>
</Window>

Is there a workaround for this?

5 Answers, 1 is accepted

Accepted

answered on 22 Aug 2016, 08:09 AM

Hello Chris,

This is not an issue connected to the RadDiagram, let me explain why is that behavior happening. In the provided sample code you are applying RenderTransform to the Content of the RadDiagramConnections, when you apply RenderTransform, which is a transform that modifies the appearance of the element but is applied after the layout pass is complete. By using the RenderTransform property instead of the LayoutTransform property, you can obtain performance benefits. That is why the TextBlock is only visually dawned to a different slot but you can still interact with it on its original measured position.
That is why you should use LayoutTransform in such situations instead of RenderTransform. You can find more detailed information on how to use the two transformation in this help article.

I hope this information helps.

Kind regards,
Kiril Vandov
Telerik by Progress

Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.