Selection

The purpose of this article is to show the basic properties exposed by the RadNavigationView for working with selection.

Using the SelectedItem

The SelectedItem property is used for getting or setting the currently selected item of the RadNavigationView. There are two common cases when accessing the SelectedItem property run-time.

• When the RadNavigationView is populated with static data (declared in XAML), the SelectedItem property is of type RadNavigationViewItem.

  Example 1: Getting the SelectedItem of type RadNavigationViewItem

      var selectedItem = this.navigationView.SelectedItem as RadNavigationViewItem; 
  

      Dim selectedItem = TryCast(Me.navigationView.SelectedItem, RadNavigationViewItem) 
  

• When your RadNavigationView is data bound to a collection of custom objects, the SelectedItem is of the type of the custom object.
  

  Example 2: Getting the SelectedItem of type custom object

      var navigationModel = this.navigationView.SelectedItem as NavigationItemModel; 
  

      Dim navigationModel = TryCast(Me.navigationView.SelectedItem, NavigationItemModel) 
  

Using SelectedValue and SelectedValuePath

The SelectedValue property is used when you have linked the RadNavigationView to a data source, and you want to return a value of one of the properties of the selected object. The SelectedValuePath property provides a way to specify a SelectedValue for the SelectedItem in a RadNavigationView. There are two essential things to remember here:

• The SelectedItem property represents an object in the Items collection.

• The SelectedValuePath property specifies the path to the property that is used to determine the value of the SelectedValue property.

If SelectedValuePath is not specified, SelectedValue should be equal to SelectedItem.

Examples 3 and 4 demonstrate the usage of the SelectedItem, SelectedValue and SelectedValuePath properties.

Let's assume that you have a business object named NavigationItemModel with one member(property): Title and a RadNavigationView control which is data bound to a list of NavigationItemModel objects.

Example 3: Business object and viewmodel

public class NavigationItemModel 
{ 
    public string Title { get; set; } 
} 
 
public class MainViewModel 
{ 
    public ObservableCollection<NavigationItemModel> Items { get; set; } 
 
    public MainViewModel() 
    { 
        this.Items = new ObservableCollection<NavigationItemModel>(); 
 
        for (int i = 1; i <= 3; i++) 
        { 
            this.Items.Add(new NavigationItemModel() { Title = "Item " + i }); 
        } 
    } 
} 

Public Class NavigationItemModel 
    Public Property Title() As String 
End Class 
 
Public Class MainViewModel 
    Public Property Items() As ObservableCollection(Of NavigationItemModel) 
 
    Public Sub New() 
        Me.Items = New ObservableCollection(Of NavigationItemModel)() 
 
        For i As Integer = 1 To 3 
            Me.Items.Add(New NavigationItemModel() With {.Title = "Item " & i}) 
        Next i 
    End Sub 
End Class 

Example 4: Initializing of RadNavigationView

<Window.Resources> 
    <local:MainViewModel x:Key="ViewModel" /> 
 
    <!-- If you are using the NoXaml binaries, you will have to base the style on the default one for the theme like so: 
    <Style TargetType="telerik:RadNavigationViewItem" BasedOn="{StaticResource RadNavigationViewItemStyle}">--> 
 
    <Style TargetType="telerik:RadNavigationViewItem" > 
        <Setter Property="Content" Value="{Binding Title}" /> 
    </Style> 
</Window.Resources> 
 
<Grid> 
    <telerik:RadNavigationView DataContext="{StaticResource ViewModel}" ItemsSource="{Binding Items}" PaneHeader="Header" SelectedValuePath="Title" /> 
</Grid> 

Figure 1: Result from Example 4 in the Office2016 theme

When you select a NavigationItemModel from the navigation view, the SelectedItem property returns the NavigationItemModel object. However, because the SelectedValuePath is set to Title, the SelectedValue property of the RadNavigationView is set to the Title property of the NavigationItemModel business object.

SelectedValue is supported for the root level items only.

Using the SelectedIndex

Using the SelectedIndex property you can get or set the index of the selected item. For example, by using the SelectedIndex property, you could specify which the default selected item is.

Example 5: Setting SelectedIndex

<telerik:RadNavigationView SelectedIndex="3" /> 

SelectedIndex is supported for the root level items only. Selecting a child item from the hierarchy will set the property to -1.

RadNavigationViewItem Selection Properties

The RadNavigationViewItem exposes two additional properties that help for working with selection. Those are the IsSelected and IsSelectable properties. Both are of type boolean and indicate whether an item is selected and whether it can be selected respectively.

Example 6: Setting the IsSelectable property

<telerik:RadNavigationView x:Name="navigationView" PaneHeader="Header"> 
    <telerik:RadNavigationView.Items> 
        <telerik:RadNavigationViewItem IsSelectable="False" Content="Bookmarks" /> 
    </telerik:RadNavigationView.Items> 
</telerik:RadNavigationView> 

The IsSelected and IsSelectable properties can also be bound to properties in your model through a style targetting RadNavigationViewItem.

See Also

• Icon and IconTemplate
• Header and Footer