Cannot find source binding for RadDropDownButton

[Philipp]

Hi,

I have created a user control with a RadDropDownButton with a DataGrid as DropDownContent inside. To close the popup I have implemented a trigger action with a dependency property (to reference the RadDropDownButton) which is invoked whenever the selection of the DataGrid is changed.

 

public class CloseOnSelectionChangedTrigger : TriggerAction<UIElement>
  {
    protected override void Invoke(object parameter)
    {
      ((RadDropDownButton)this.Target).IsOpen = false;
    }

    public UIElement Target
    {
      get
      {
        return (UIElement)this.GetValue((TargetProperty));
      }
      set
      {
        this.SetValue(TargetProperty, value);
      }
    }

    public static readonly DependencyProperty TargetProperty =
      DependencyProperty.Register("Target", typeof(UIElement), typeof(CloseOnSelectionChangedTrigger), new UIPropertyMetadata(null));
  }

 

Unfortunately, when I use this user control in my MainWindow more then once I get a compiler error (sample project attached):

System.Windows.Data Error: 4 : Cannot find source for binding with reference 'ElementName=RadDropDownButton1'. BindingExpression:(no path); DataItem=null; target element is 'CloseOnSelectionChangedTrigger' (HashCode=58874610); target property is 'Target' (type 'UIElement')

 

Telerik version: 2016_2_503

 

What I'm doing wrong?

 

Regards

[Philipp]

CreateBranchView:

<UserControl x:Class="SampleApplication.Controls.CreateBranchView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:trigger="clr-namespace:SampleApplication.Trigger"
             xmlns:viewModel="clr-namespace:SampleApplication.ViewModel"
             x:Name="UserControl"
             mc:Ignorable="d"
             d:DataContext="{d:DesignInstance viewModel:CreateBranchViewModel}"
             d:DesignHeight="300" d:DesignWidth="300">
  <UserControl.Resources>
    <CollectionViewSource x:Key="TicketCollectionViewSource" Source="{Binding Path=AvailableTickets}">
      <CollectionViewSource.GroupDescriptions>
        <PropertyGroupDescription PropertyName="ProjectName" />
      </CollectionViewSource.GroupDescriptions>
    </CollectionViewSource>

    <Style TargetType="{x:Type GroupItem}" x:Key="GroupHeaderStyle">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type GroupItem}">
            <Expander IsExpanded="False">
              <Expander.Header>
                <TextBlock>
                  <Run Text="{Binding Path=Name, Mode=OneWay}" />
                  <Run Text=" " />
                  <Run Text="(" FontWeight="Bold" /><Run Text="{Binding Path=ItemCount, Mode=OneWay}" FontWeight="Bold" /><Run Text=")" FontWeight="Bold" />
                </TextBlock>
              </Expander.Header>
              <ItemsPresenter/>
            </Expander>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </UserControl.Resources>
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="25" />
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0">
      <TextBlock>
        <TextBlock.Style>
          <Style TargetType="TextBlock">
            <Setter Property="Text" Value="{Binding Path=LastUpdate, StringFormat='Last update: {0}'}" />
            <Style.Triggers>
              <DataTrigger Binding="{Binding Path=LastUpdate}" Value="{x:Static sys:DateTime.MinValue}">
                <Setter Property="Text" Value="Last update:" />
              </DataTrigger>
            </Style.Triggers>
          </Style>
        </TextBlock.Style>
      </TextBlock>
    </StackPanel>
    <Grid Grid.Row="1">
      <StackPanel Orientation="Horizontal">
        <telerik:RadDropDownButton x:Name="RadDropDownButton1"
                                   Width="600" HorizontalAlignment="Left"
                                   DropDownMaxHeight="500" HorizontalContentAlignment="Left"
                                   Content="{Binding ElementName=TestGrid, Path=SelectedItem}">
          <telerik:RadDropDownButton.ContentTemplate>
            <DataTemplate>
              <StackPanel Orientation="Horizontal" Margin="5,2,2,2" d:DataContext="{d:DesignInstance viewModel:TicketViewModel}" >
                <TextBlock VerticalAlignment="Center" FontWeight="Bold" TextAlignment="Center" Text="{Binding Path=TicketStatus}" />
                <StackPanel Margin="5,2,2,2">
                  <TextBlock Text="{Binding Path=TicketKey}" FontSize="10" FontStyle="Italic" />
                  <TextBlock TextWrapping="Wrap" Text="{Binding Path=Title}" />
                </StackPanel>
              </StackPanel>
            </DataTemplate>
          </telerik:RadDropDownButton.ContentTemplate>
          <telerik:RadDropDownButton.DropDownContent>
            <DataGrid x:Name="TestGrid"
                          HeadersVisibility="None"
                          HorizontalGridLinesBrush="#AFADAD"
                          GridLinesVisibility="Horizontal"
                          IsReadOnly="True"
                          SelectedItem="{Binding Path=SelectedTicket}"
                          ItemsSource="{Binding Source={StaticResource TicketCollectionViewSource}}"
                          AutoGenerateColumns="False">
              <i:Interaction.Triggers>
                <i:EventTrigger EventName="SelectionChanged">
                  <trigger:CloseOnSelectionChangedTrigger Target="{Binding ElementName=RadDropDownButton1}" />
                </i:EventTrigger>
              </i:Interaction.Triggers>
              <DataGrid.GroupStyle>
                <GroupStyle ContainerStyle="{StaticResource GroupHeaderStyle}"/>
              </DataGrid.GroupStyle>
              <DataGrid.Columns>
                <DataGridTemplateColumn Width="100">
                  <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                      <TextBlock FontWeight="Bold" TextAlignment="Center" Text="{Binding Path=Title}" />
                    </DataTemplate>
                  </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTemplateColumn Width="500">
                  <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                      <StackPanel Margin="5,2,2,2" d:DataContext="{d:DesignInstance viewModel:TicketViewModel}" >
                        <TextBlock Text="{Binding Path=TicketKey}" FontSize="10" FontStyle="Italic" />
                        <TextBlock TextWrapping="Wrap" Text="{Binding Path=Title}" />
                      </StackPanel>
                    </DataTemplate>
                  </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
              </DataGrid.Columns>
            </DataGrid>
          </telerik:RadDropDownButton.DropDownContent>
        </telerik:RadDropDownButton>
      </StackPanel>
    </Grid>
  </Grid>
</UserControl>

 

MainWindow:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:viewModel="clr-namespace:SampleApplication.ViewModel"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:view="clr-namespace:SampleApplication.Controls"
        x:Class="SampleApplication.View.MainWindow"
        x:Name="Window" Title="MainWindow" Height="399" Width="1000"
        mc:Ignorable="d" d:DataContext="{d:DesignInstance {x:Type viewModel:MainWindowViewModel}}">
  <telerik:RadTabControl>
    <telerik:RadTabItem Header="OPS">
      <view:CreateBranchView x:Name="OpsView"
                             DataContext="{Binding Path=AddBranchForOpsTicket}" CreateBranchCommand="{Binding ElementName=Window, Path=DataContext.CreateBranchCommand}" />
    </telerik:RadTabItem>
    <telerik:RadTabItem Header="Release Management">
      <view:CreateBranchView x:Name="ReleaseView"
                             DataContext="{Binding Path=AddBranchForReleaseTicket}" CreateBranchCommand="{Binding ElementName=Window, Path=DataContext.CreateBranchCommand}" />
    </telerik:RadTabItem>
  </telerik:RadTabControl>
</Window>

[Evgenia]

Hi Philipp,

Everything seems correct in your implementation. However there is one thing that is causing you the binding exception -- the way you are trying to set the EventTrigger in XAML. Instead of binding to the RadDropDownButton (you might also try to set the TargetObject not Target property) and creating a complex TriggerAction the way you do

<i:Interaction.Triggers>
                <i:EventTrigger EventName="SelectionChanged">
                  <trigger:CloseOnSelectionChangedTrigger Target="{Binding ElementName=RadDropDownButton1}" />
                </i:EventTrigger>
              </i:Interaction.Triggers>

you should use the following easier syntax:

xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

<i:Interaction.Triggers>
    <i:EventTrigger EventName="SelectionChanged">
        <ei:CallMethodAction MethodName="CloseOnSelectionChanged" TargetObject="{Binding ElementName=RadDropDownButton1}" />
    </i:EventTrigger>

Just add the logic you want to get executed when SelectionChanged event is fired in CloseOnSelectionChanged method in your ViewModel and don't forget to set the method's scope to public:

public class ViewModel
{
   public void CloseOnSelectionChanged()
    {
        //your custom logic here
    }
}

P.S. Interaction Triggers is one way to achieve your scenario requirement but if interested you might also look into another approaches like EventToCommand that is supported with MVVM Light by GalaSoft in stackoverflow forums for example. In fact we support the same EventToCommand behaviour but for our Telerik controls only. Here is link to our documentation article with more information on that.

Regards,
Evgenia
Telerik