How to add command event and pass the current node data in wpf telerik RadTreeviewItem with custom button

Question

I'm using Kendo Telerik RadTreeView control in WPF.. I have functionality that for each RadTreeViewItem, I need to show a button, which i able to do.

Now the button next to each RadTreeViewItem will have event/command which need to open pop window and pass the current node data.

I have tried with code behind button click event and it works fine.. but as per the requirement we should only use command not code behind events.

Here is the code where I'm adding the button..

<HierarchicalDataTemplate x:Key="BuildingStructure"
                              ItemsSource="{Binding StructureLevels}"
                              ItemContainerStyle="{StaticResource levelNodeStyle}">

        <Grid HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition  Width="3*"/>
                <ColumnDefinition  Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" 
                       Width="250"
                       Text="{Binding Name}" 
                       HorizontalAlignment="Left"/>
            <Button
                Panel.ZIndex="100"
                BorderThickness="0"
                BorderBrush="Transparent"
                Background="Black"
                Grid.Column="1"
                VerticalAlignment="Stretch"
                Margin="0 2 0 5">
                <Image
                    Width="20"
                    Height="20"
                   Source="/Project;component/Resources/Images/03-Add.png"/>

                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseLeftButtonDown">
                        <i:InvokeCommandAction Command="{Binding TestRadTreeCommand}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>

            </Button>
        </Grid>
    </HierarchicalDataTemplate>

Please check the image for your Reference :

Thanks in advance...!!

Answer 1

The Button has a Command property so there is no reason to use an EventTrigger and an InvokeCommandAction to handle the MouseLeftButtonDown event.

If TestRadTreeCommand is defined in the view model, i.e. the DataContext of the TreeView, you could bind to it like this:

<Button
    Panel.ZIndex="100"
    BorderThickness="0"
    BorderBrush="Transparent"
    Background="Black"
    Grid.Column="1"
    VerticalAlignment="Stretch"
    Margin="0 2 0 5"
    Command="{Binding DataContext.TestRadTreeCommand, RelativeSource={RelativeSource AncestorType=TreeView}}">
    <Image Width="20"
           Height="20"
           Source="/CCRIS;component/Resources/Images/03-Add.png"/>
</Button>