Edit this page

Selection

RadDiagram gives you the ability to select RadDiagramItems in XAML, code behind, with data binding, interactively or by invoking RadDiagramCommand.

The following tutorial will show you how select items, work with different selection modes and set up selection commands and events.

Please note that the examples in this tutorial are showcasing Telerik Windows8 theme. In the Setting a Theme article you can find more information on how to set an application-wide theme.

Selection Modes

RadDiagram has four different Selection Modes which determine the way a user performs selection:

  • Single - the user can select only one item.

  • None - the user cannot select any items.

  • Extended - the user can select/deselect multiple items using the combinations (Ctrl Key+ Mouse Left Button) or (Ctr + Key A). This is the default SelectionMode's Value

  • Multiple - the user can select/deselect multiple items using only Left Button or the combinations (Ctrl Key+ Mouse Left Button) and (Ctr + Key A)

In order to change the way the Selection Adorner Rectangle behaves, you can use the RectSelectionMode property:

  • Full - the user selects item(s) only when the selection rectangle covers it(them) completely.

  • Partial - the user selects all items that are completely or partially covered by the selection rectangle.

Selection In XAML

In order to select items in XAML, you only need to set their IsSelected property to true:

XAML

<telerik:RadDiagram>
    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=Database1Shape}"
                            IsSelected="True"
                            Position="200 100"/>
</telerik:RadDiagram>

raddiagram features selection isselected

When multiple items are selected, they are automatically added in one Selection Adorner:

XAML

<telerik:RadDiagram>
    <telerik:RadDiagramShape x:Name="db1"
                            Geometry="{telerik:FlowChartShape ShapeType=Database1Shape}"
                            IsSelected="True"
                            Position="100 100" />

    <telerik:RadDiagramConnection Source="{Binding ElementName=db1}"
                                SourceConnectorPosition="Right"
                                Target="{Binding ElementName=db2}"
                                TargetConnectorPosition="Left"
                                IsSelected="True"/>

    <telerik:RadDiagramShape x:Name="db2"
                            Geometry="{telerik:FlowChartShape ShapeType=Database1Shape}"
                            IsSelected="True"
                            Position="300 100" />
</telerik:RadDiagram>       

raddiagram features selection multiselection

You may also want to use the SelectedIndex or the SelectedItem property of the RadDiagram:

XAML

<telerik:RadDiagram  SelectedIndex="1"
                    x:Name="diagram">
    <telerik:RadDiagramShape x:Name="db1"
                            Geometry="{telerik:FlowChartShape ShapeType=Database1Shape}"
                            Position="100 100" />
    <telerik:RadDiagramShape x:Name="db2"
                            Geometry="{telerik:FlowChartShape ShapeType=Database1Shape}"
                            Position="300 100" />
</telerik:RadDiagram>

Or

XAML

<telerik:RadDiagram  SelectedItem="{Binding ElementName=db2}"
                    x:Name="diagram">
    <telerik:RadDiagramShape x:Name="db1"
                            Geometry="{telerik:FlowChartShape ShapeType=Database1Shape}"
                            Position="100 100" />
    <telerik:RadDiagramShape x:Name="db2"
                            Geometry="{telerik:FlowChartShape ShapeType=Database1Shape}"
                            Position="300 100" />
</telerik:RadDiagram>

Below is the result of the code snippets above:raddiagram features selection selectedindex

Binding the IsSelected

When the RadDiagram is bound to collection of business objects or ViewModels, you can bind the IsSelected property of an item via Style Bindings.

For example, you can have Selected property in your ViewModel and bind it to the Shape's IsSelected like so:

XAML

<Style TargetType="telerik:RadDiagramShape">
    <Setter Property="IsSelected" Value="{Binding Selected, Mode=TwoWay}" />
</Style>

SelectAll

You are able to select all RadDiagramItems interactively (by Mouse or by pressing Ctrl + A), programmatically (via the SelectAll() method), set IsSelected to every Shape and Connection via StyleBindings, or with Command. Below is shown how you can use the SelectAll command:

XAML

<telerik:RadDiagram x:Name="diagram" Height="200">
    <telerik:RadDiagramShape x:Name="db1"
                            Geometry="{telerik:FlowChartShape ShapeType=Database1Shape}"
                            Position="100 100" />
    <telerik:RadDiagramShape x:Name="db2"
                            Geometry="{telerik:FlowChartShape ShapeType=Database1Shape}"
                            Position="300 100" />
</telerik:RadDiagram>

<telerik:RadButton Height="30"
                    Command="telerik:DiagramCommands.SelectAll"
                    CommandTarget="{Binding ElementName=diagram}"
                    Content="SelectAll" />

raddiagram features selection select All

Selection Events

RadDiagram provides the following Selection events:

  • PreviewSelectionChanged - occurs when the selection of the diagram starts changing.

  • SelectionChanged - fires when a selection operations has just been performed.

  • SelectionBoundsChanged - fires when the SelectionRectangle's bounds have just been changed.

See Also