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) 

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

RadNavigationView populated with items

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.

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" /> 

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

In this article
Not finding the help you need? Improve this article