Commands

The Command design-pattern is very important and widely used in the XAML and MVVM world. RadTreeView follows these best practices and provides an intuitive and easy-to-use set of APIs that allow different aspects of the RadTreeView control’s behavior to be handled and/or completely overridden.

RadTreeView exposes a Commands collection that allows you to register custom commands with each control’s instance through the RadTreeView.Commands property:

• Commands: Gets the collection with all the custom commands registered with the CommandService.

Command Types

There are two types of commands:

• TreeViewCommand: All the default commands within RadTreeView derive from the base TreeViewCommand. Think of this command as a UI-related command as it operates over the RadTreeView instance that owns the command.

• TreeViewUserCommand: This type of command should be used when you would like to modify the behavior of the control on any of the available actions. It exposes the following properties:

  • Id: The key that relates a command instance to a particular action/routine.
  • Command: Gets or sets the generic ICommand implementation that may come from the ViewModel.
  • SuppressDefaultCommand: Gets or sets a value indicating whether the default(built-in) UI command associated with the specified Id will be executed.
    

TreeViewCommandId Enumeration

All the predefined commands within a RadTreeView instance are identified by a member of the TreeViewCommandId enumeration. This is actually the key that relates a command instance to a particular action/routine within the owning element. In order to register a custom command within a RadTreeView instance you should instantiate a TreeViewUserCommand instance and set its ID and Command properties. Following are the members of the TreeViewCommandId enumeration:

• ItemTap
• ItemHold
• ItemCollapse
• ItemExpand
• LoadOnDemand
• Unknown

Custom TreeViewUserCommand Example

As a first step, you can create a command property which will invoke custom method on ItemTap. Here is how this is done inside the ViewModel of the TreeView:

public class ViewModel
{
    public ObservableCollection<Item> Source { get; set; }
    public ICommand MyTapCommand { get; set; }

    public ViewModel()
    {
        this.MyTapCommand = new Command((p) => OnItemTap(p));

        this.Source = new ObservableCollection<Item>();
        this.Source.Add(new Item("Contacts")
        {
            Children = new List<Item>()
            {
                new Item("Bob Tony"),
                new Item("Sue Winchell"),
                new Item("Lui Sang")
            }
        });
        this.Source.Add(new Item("Lists")
        {
            Children = new List<Item>()
            {
                new Item("Priorities"),
                new Item("Opportunities"),
                new Item("Issues")
            }
        });
        this.Source.Add(new Item("Reports")
        {
            Children = new List<Item>()
            {
                new Item("December Sales"),
                new Item("First Quarter Summary"),
                new Item("Second Quarter Summary")
            }
        });
    }
    private void OnItemTap(object p)
    {
        var context = (TreeViewItemCommandContext)p;
        //add your logic here
        Application.Current.MainPage.DisplayAlert("", "You clicked on: " + (context.Item as Item).Name, "OK");
    }
}

Once you have created the custom command, you need to add it to the Commands collection of the RadTreeView element:

<telerikDataControls:RadTreeView x:Name="treeView"
                                 ItemsSource="{Binding Source}">
    <telerikDataControls:RadTreeView.Commands>
        <telerikTreeView:TreeViewUserCommand Id="ItemTap" 
                                      SuppressDefaultCommand="False" 
                                      Command="{Binding MyTapCommand}"/>
    </telerikDataControls:RadTreeView.Commands>
    <telerikDataControls:TreeViewDescriptor DisplayMemberPath="Name"
                                            ItemsSourcePath="Children"
                                            TargetType="{x:Type local:Item}"/>
</telerikDataControls:RadTreeView>

Where the telerikTreeView namespace is the following:

xmlns:telerikTreeView="clr-namespace:Telerik.XamarinForms.DataControls.TreeView.Commands;assembly=Telerik.XamarinForms.DataControls"

You can check a runnable demo in the Features section of the RadTreeView component in the SDK Samples Browser application(can be found in the Examples folder of your local Telerik UI for Xamarin installation)

See Also

• Expand/Collapse
• CheckBoxes
• Theming