RadGridView ControlPanelItems Binding Error

[erhan]

Hi All,

I created a custom gridview which inherit from radgridview. And I have a ControlPanelItem which include a toggle button, The button has IsFilteringAllowed property. It works correctly when the gridview Visible.

But when the gridview initially collapsed a binding error occured in output.

"Cannot find source for binding with reference 'ElementName=grid'. BindingExpression:Path=IsFilteringAllowed; DataItem=null; target element is 'ToggleButton' (Name=''); target property is 'IsChecked' (type 'Nullable`1')"

This is my control xaml

<UserControl x:Class="DemoApplication.CustomGridView"
             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:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="300"
             x:Name="grid">
    <Grid>

        <telerik:RadGridView>

            <telerik:RadGridView.ControlPanelItems>
                <telerik:ControlPanelItem ButtonTooltip="Allow Filtering">
                    <telerik:ControlPanelItem.ButtonContent>
                        <ToggleButton IsChecked="{Binding  IsFilteringAllowed, ElementName=grid}"
                                      Width="16"
                                      Height="16"
                                      MinWidth="16"
                                      MinHeight="16"
                                      Padding="0,0,0,0"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      BorderThickness="0">                      
                        </ToggleButton>
                    </telerik:ControlPanelItem.ButtonContent>
                </telerik:ControlPanelItem>
            </telerik:RadGridView.ControlPanelItems>
        </telerik:RadGridView>

this is xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace DemoApplication
{
    /// <summary>
    /// Interaction logic for CustomGridView.xaml
    /// </summary>
    public partial class CustomGridView : UserControl
    {
        public CustomGridView()
        {
            InitializeComponent();
        }
        //
        // Summary:
        //     Gets or sets a value indicating whether the control can be filtered through
        //     the UI.

        public static readonly DependencyProperty IsFilteringAllowedProperty =
                               DependencyProperty.Register("IsFilteringAllowed", typeof(Boolean), typeof(CustomGridView));

        public Boolean IsFilteringAllowed
        {
            get { return (Boolean)GetValue(IsFilteringAllowedProperty); }
            set { SetValue(IsFilteringAllowedProperty, value); }
        }
    }
}

    </Grid>
</UserControl>

and this is my view

<Window x:Class="DemoApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DemoApplication"
        Title="MainWindow"
        Height="350"
        Width="525">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
        </Grid.RowDefinitions>

        <local:CustomGridView x:Name="grid"
                              Visibility="Collapsed" />
        </Button>

    </Grid>
</Window>

Thanks

 

 

 

 

 

[Martin]

Hi Erhan,

The ButtonConten property is designed to set a custom display for the items rather than putting the content of the ControlPanelItem. Please take a look at our Control Panel article where you can find detailed information on the matter.

I hope this helps.

Regards,
Martin Vatev
Telerik by Progress

[erhan]

Hello Martin,

I look the article.  I implemented my control with the same code. Here is code. The problem is "ChoosableColumns" property inside list box giving binding error when my control is collapsed, when my control visible or hidden there is no problem, everything works correctly. "ChoosableColumns" property inside Content, not ButtonContent.

 <telerik:ControlPanelItem ButtonTooltip="Column Chooser">
                        <telerik:ControlPanelItem.ButtonContent>
                            <Path Data="M33.8,7H11.4c-1.1,0-2-0.9-2-2V2.4c0-1.1,0.9-2,2-2h22.4c1.1,0,2,0.9,2,2V5C35.8,6.1,34.9,7,33.8,7z M33.8,2.4l-22.4,0l0,2.6l22.3,0V2.4z M33.8,31.6H11.4c-1.1,0-2-0.9-2-2V27c0-1.1,0.9-2,2-2h22.4c1.1,0,2,0.9,2,2v2.6 C35.8,30.7,34.9,31.6,33.8,31.6z M33.8,27l-22.4,0l0,2.6l22.3,0V27z M33.8,19.3H11.4c-1.1,0-2-0.9-2-2v-2.6c0-1.1,0.9-2,2-2h22.4 c1.1,0,2,0.9,2,2v2.6C35.8,18.4,34.9,19.3,33.8,19.3z M33.8,14.7l-22.3,0l0,2.5l22.3,0V14.7z M4.9,7H2.2c-1.1,0-2-0.9-2-2V2.4 c0-1.1,0.9-2,2-2h2.7c1.1,0,2,0.9,2,2V5C6.9,6.1,6,7,4.9,7z M4.9,2.4l-2.7,0l0,2.6l2.6,0V2.4z M4.9,31.6H2.2c-1.1,0-2-0.9-2-2V27 c0-1.1,0.9-2,2-2h2.7c1.1,0,2,0.9,2,2v2.6C6.9,30.7,6,31.6,4.9,31.6z M4.9,27l-2.7,0l0,2.6l2.7,0V27z M4.9,19.3H2.2 c-1.1,0-2-0.9-2-2v-2.6c0-1.1,0.9-2,2-2h2.7c1.1,0,2,0.9,2,2v2.6C6.9,18.4,6,19.3,4.9,19.3z M4.9,14.7l-2.7,0l0,2.5l2.6,0V14.7z"
                                  Fill="{StaticResource TREASURY_GRID_TOOLBAR_FOREGROUND_COLOR}"
                                  Stretch="Uniform"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Center"
                                  Height="16"
                                  Width="16" />
                        </telerik:ControlPanelItem.ButtonContent>
                        <telerik:ControlPanelItem.Content>

                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>

                                <input:AkbankFaceCheckBox Content="Select All"
                                                          FontWeight="SemiBold"
                                                          IsChecked="{Binding AllColumnsVisible, ElementName=DataGridViewControl,Mode=TwoWay}"
                                                          Margin="17 0 0 0" />

                                <ListBox BorderThickness="0"
                                         ItemsSource="{Binding ChoosableColumns,ElementName=DataGridViewControl}"
                                         Grid.Row="1"
                                         ScrollViewer.CanContentScroll="True">
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <Grid>
                                                <input:AkbankFaceCheckBox Width="150"
                                                                          Content="{Binding Header, Mode=OneWay}"
                                                                          IsChecked="{Binding IsVisible, Mode=TwoWay}" />
                                            </Grid>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>

                            </Grid>

                        </telerik:ControlPanelItem.Content>
                    </telerik:ControlPanelItem>

[erhan]

Hello Martin,
I look the article.  I implemented my control with the same code. Here is code. The problem is "ChoosableColumns" property inside list box giving binding error when my control is collapsed, when my control visible or hidden there is no problem, everything works correctly. "ChoosableColumns" property inside Content, not ButtonContent. I prepared a sample project but I can't attach it.
 <telerik:ControlPanelItem ButtonTooltip="Column Chooser">
                        <telerik:ControlPanelItem.ButtonContent>
                            <Path Data="sample data"
                                  Stretch="Uniform"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Center"
                                  Height="16"
                                  Width="16" />
                        </telerik:ControlPanelItem.ButtonContent>
                        <telerik:ControlPanelItem.Content>

                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>

                                <input:AkbankFaceCheckBox Content="Select All"
                                                          FontWeight="SemiBold"
                                                          IsChecked="{Binding AllColumnsVisible, ElementName=DataGridViewControl,Mode=TwoWay}"
                                                          Margin="17 0 0 0" />

                                <ListBox BorderThickness="0"
                                         ItemsSource="{Binding ChoosableColumns,ElementName=DataGridViewControl}"
                                         Grid.Row="1"
                                         ScrollViewer.CanContentScroll="True">
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <Grid>
                                                <input:AkbankFaceCheckBox Width="150"
                                                                          Content="{Binding Header, Mode=OneWay}"
                                                                          IsChecked="{Binding IsVisible, Mode=TwoWay}" />
                                            </Grid>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>

                            </Grid>

                        </telerik:ControlPanelItem.Content>
                    </telerik:ControlPanelItem>

[Martin]

Hi Erhan,

Can you try to put the ControlPanelItem.Content into a separate UserControl and see if the problem remains?

I am looking forward to your reply.


Regards,
Martin Vatev
Telerik by Progress

[erhan]

Hi Martin,

I did what you said.It works.

The problem occurs all bindings between  RadGridView.ControlPanelItems tags

 

[erhan]

Hi Martin,

I think you mean it, It works.

 

<UserControl x:Class="DemoApplication.CustomGridView"
             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:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="300"
             x:Name="grid">
    <Grid>

        <StackPanel Orientation="Horizontal">
            <CheckBox IsChecked="{Binding IsFilteringAllowed,Mode=TwoWay,ElementName=grid}" />
            <telerik:RadGridView />
        </StackPanel>

    </Grid>
        
</UserControl>

 

 

 

 

[Martin]

Hi Erhan,

I am really glad to see that the approach resolved the issue.

Regards,
Martin Vatev
Telerik by Progress

[erhan]

Hi Martin,

This is not solution of my problem.

I can't change place of controls, the controls have to be inside control panel items. Structure this way

I think this a bug.

 

Thanks

Structure this way

Structure this way

[Martin]

Hello Erhan,

I meant to put the highlighted code in a separate user control and check if the binding errors reappear in the output window.

Can you confirm whether that's what you have tried?

 <telerik:ControlPanelItem ButtonTooltip="Column Chooser">
                        <telerik:ControlPanelItem.ButtonContent>
                            <Path Data="sample data"
                                  Stretch="Uniform"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Center"
                                  Height="16"
                                  Width="16" />
                        </telerik:ControlPanelItem.ButtonContent>
                        <telerik:ControlPanelItem.Content>

                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>

                                <input:AkbankFaceCheckBox Content="Select All"
                                                          FontWeight="SemiBold"
                                                          IsChecked="{Binding AllColumnsVisible, ElementName=DataGridViewControl,Mode=TwoWay}"
                                                          Margin="17 0 0 0" />

                                <ListBox BorderThickness="0"
                                         ItemsSource="{Binding ChoosableColumns,ElementName=DataGridViewControl}"
                                         Grid.Row="1"
                                         ScrollViewer.CanContentScroll="True">
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <Grid>
                                                <input:AkbankFaceCheckBox Width="150"
                                                                          Content="{Binding Header, Mode=OneWay}"
                                                                          IsChecked="{Binding IsVisible, Mode=TwoWay}" />
                                            </Grid>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>

                            </Grid>

                        </telerik:ControlPanelItem.Content>
                    </telerik:ControlPanelItem>

Regards,
Martin Vatev
Telerik by Progress

[erhan]

Hello Martin,

I tried this. No binding errors.

 

<UserControl x:Class="DemoApplication.CustomControl"
             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:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="300"
             x:Name="customControl">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <input:AkbankFaceCheckBox Content="Select All"
                                  FontWeight="SemiBold"
                                  IsChecked="{Binding AllColumnsVisible, ElementName=customControl,Mode=TwoWay}"
                                  Margin="17 0 0 0" />

        <ListBox BorderThickness="0"
                 ItemsSource="{Binding ChoosableColumns,ElementName=customControl}"
                 Grid.Row="1"
                 ScrollViewer.CanContentScroll="True">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <input:AkbankFaceCheckBox Width="150"
                                                  Content="{Binding Header, Mode=OneWay}"
                                                  IsChecked="{Binding IsVisible, Mode=TwoWay}" />
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

    </Grid>

</UserControl>

 

Thanks

[Martin]

Hi Erhan,

Once already there are no binding errors in the output window and everything else work as expected, I think to mark this thread as resolved.

Regards,
Martin Vatev
Telerik by Progress

[erhan]

Hi Martin,

If there was a fire in our house, Let's move to another house,do not put out the fire.

Thanks

[Martin]

Hi Еrhan,

I experience difficulties understanding what exactly is the problem. Is it possible to present a little more information about the setup of the control? I would also be grateful if you make sample project and upload it somewhere.

I am looking forward to your reply.

Regards,
Martin Vatev
Telerik by Progress

[erhan]

Hi Martin,

https://www.dropbox.com/s/nfhluz1cy3snjoy/DemoApplication.rar?dl=0

I upload a sample project(just change the paths of telerik dlls), Please take a look and see the problem, its simple

Thanks

 

 

 

 

 

[Martin]

Hi Erhan,

Considering your report and thanks to the presented sample project, indeed this is an issue in RadGridView.  I have logged it in our feedback portal. You can track its progress, subscribe to status changes and add your vote/comment to it on the following link - feedback item. I have also updated your Telerik points as a gratitude for your cooperation.

Regards,
Martin Vatev
Telerik by Progress

[erhan]

Hi Martin,

I subsribed the issue, Thanks for everything

Have a good day.

[Jiti]

Has this issue been fixed in 2018.1.220.45? I am having a similar issue. I want to add a custom button that executes a ICommand, but the command (UpdateToDoRecordCommand) is not getting bound when the button is placed in a ControlPanelItem. The same command works, however, when bound to a RadButton in a Wrap panel outside the RadGridView.

Here is my xaml:

01.<Grid x:Name="ToDoListViewGrid">
02.        <Grid.Resources>
03.            <local:ToDoListViewModel x:Key="context"/>
04.            <!-- Setup ObjectDataProviders for localization -->
05.            <ObjectDataProvider ObjectType="{x:Type res:ToDoListViewLocalizer}" x:Key="viewRes" MethodName="GetInstance"></ObjectDataProvider>
06.            <this:CheckBoxConverter x:Key="checkboxConverter" />
07.            <!-- GridViewItem Template-->
08.            <DataTemplate x:Key="ReviewStatusItemTemplate">
09.                <WrapPanel Orientation="Horizontal" VerticalAlignment="Center">
10.                    <CheckBox VerticalAlignment="Center"
11.                  HorizontalAlignment="Left"
12.                  IsChecked="{Binding Path=ReviewStatus, Converter={StaticResource checkboxConverter}, ConverterParameter=None,UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
13.                  Margin="2,0,0,0"/>
14.                    <TextBlock Margin="5,0" Text="{Binding ReviewStatus}"></TextBlock>
15.                </WrapPanel>
16.            </DataTemplate>
17.        </Grid.Resources>
18.        <Grid.RowDefinitions>
19.            <RowDefinition Height="Auto" />
20.            <RowDefinition Height="*" />
21.        </Grid.RowDefinitions>
22.
23.        <WrapPanel Orientation="Horizontal" Grid.Row="0" HorizontalAlignment="Right" Background="Gray">
24.            <telerik:RadButton BorderThickness="0" Command="{Binding Path=UpdateToDoRecordCommand}">
25.                <uxt:UxtXamlImage x:Name="btnUpdateThisWorks" Template="{DynamicResource Com_Update}" ToolTip="Update"/>
26.            </telerik:RadButton>
27.        </WrapPanel>
28.        <telerik:RadGridView Grid.Row="1" x:Name="ToDoListGrid"
29.                             HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
30.                             ItemsSource="{Binding Path=ToDoItems}"
31.                             SelectionMode="Extended"
32.                             RowIndicatorVisibility="Collapsed"
33.                             SelectionUnit="FullRow"
34.                             AutoGenerateColumns="False"
35.                             CanUserResizeColumns="True"
36.                             CanUserFreezeColumns="False"
37.                             CanUserSortColumns="True"
38.                             ShowColumnSortIndexes="True"
39.                             GridLinesVisibility="None"
40.                             uxt:ControlVisualStateProperties.IsCurrentEnabled="False"
41.                             IsReadOnly="False" ShowGroupPanel="True"
42.                             ShowColumnHeaders="True"
43.                             ShowColumnFooters="True"
44.                             ShowSearchPanel="True">
45.            <telerik:RadGridView.ControlPanelItems>
46.                <telerik:ControlPanelItem>
47.                    <telerik:ControlPanelItem.ButtonContent>
48.                        <telerik:RadButton BorderThickness="0" Command="{Binding Path=DataContext.UpdateToDoRecordCommand, RelativeSource={RelativeSource AncestorType={x:Type Grid}}}">
49.                            <uxt:UxtXamlImage x:Name="btnUpdateThisDoesNotWork" Template="{DynamicResource Com_Update}" ToolTip="Update"/>
50.                        </telerik:RadButton>
51.                    </telerik:ControlPanelItem.ButtonContent>
52.                </telerik:ControlPanelItem>
53.                <telerik:ControlPanelItem>
54.                    <telerik:ControlPanelItem.ButtonContent>
55.                        <uxt:UxtXamlImage x:Name="btnChooseColumns" Template="{DynamicResource Com_List}" ToolTip="{Binding Path=ChooseColumnsPrompt, Source={StaticResource viewRes}}"/>
56.                    </telerik:ControlPanelItem.ButtonContent>
57.                    <telerik:ControlPanelItem.Content>
58.                        <ListBox ItemsSource="{Binding Columns}" BorderThickness="0">
59.                            <ListBox.ItemTemplate>
60.                                <DataTemplate>
61.                                    <CheckBox Content="{Binding Header, Mode=OneWay}" IsChecked="{Binding IsVisible, Mode=TwoWay}" />
62.                                </DataTemplate>
63.                            </ListBox.ItemTemplate>
64.                        </ListBox>
65.                    </telerik:ControlPanelItem.Content>
66.                </telerik:ControlPanelItem>
67.            </telerik:RadGridView.ControlPanelItems>
68.
69.            <telerik:RadGridView.Columns>
70.                <telerik:GridViewDataColumn Width="*" CellTemplate="{StaticResource ReviewStatusItemTemplate}" DataMemberBinding="{Binding ToDoRecord.ReviewStatus}" Header="Review Status" />
71.                <telerik:GridViewDataColumn Width="*" DataMemberBinding="{Binding ToDoItem.ErrorMessage}" Header="Information" >
72.                    <telerik:GridViewColumn.ToolTipTemplate>
73.                        <DataTemplate>
74.                            <StackPanel Orientation="Horizontal">
75.                                <TextBlock Text="{Binding ToDoItem.ErrorMessage}" />
76.                            </StackPanel>
77.                        </DataTemplate>
78.                    </telerik:GridViewColumn.ToolTipTemplate>
79.                    <telerik:GridViewDataColumn.AggregateFunctions>
80.                        <telerik:CountFunction Caption="Count: " />
81.                    </telerik:GridViewDataColumn.AggregateFunctions>
82.                </telerik:GridViewDataColumn>
83.                <telerik:GridViewDataColumn Width="*" DataMemberBinding="{Binding AssociatedObjectName}" Header="Object Name" />
84.                <telerik:GridViewDataColumn Width="*" DataMemberBinding="{Binding State}" Header="State" />
85.                <telerik:GridViewDataColumn Width="*" DataMemberBinding="{Binding ChangedBy}" Header="Changed By" />
86.                <telerik:GridViewDataColumn Width="*" DataMemberBinding="{Binding ToDoRecord.DateLastModified}" Header="Date Modified" />
87.                <telerik:GridViewDataColumn Width="*" DataMemberBinding="{Binding ToDoRecord.Discipline}" Header="Discipline" />
88.            </telerik:RadGridView.Columns>
89.            <telerik:EventToCommandBehavior.EventBindings>
90.                <telerik:EventBinding Command="{Binding Path=SelectionChangedCommand}" EventName="SelectionChanged" PassEventArgsToCommand="True" />
91.            </telerik:EventToCommandBehavior.EventBindings>
92.        </telerik:RadGridView>
93.    </Grid>

 

 

 

[Martin]

Hi Jiti,

As already answered in the support ticket, my suggestion is to set the MainViewModel as a static resource and set the Source property of the Binding. This way you are directly binding to the command and not looking for a parent data context. 

<telerik:RadGridView.ControlPanelItems>
    <telerik:ControlPanelItem ButtonTooltip="Column chooser">
        <telerik:ControlPanelItem.ButtonContent>
            <Button Command="{Binding Path=ButtonCommand, Source={StaticResource MyViewModel}, UpdateSourceTrigger=PropertyChanged }" Content="Click me"/>
        </telerik:ControlPanelItem.ButtonContent>
    </telerik:ControlPanelItem>

If you have any other question, I will ask you to continue the discussion in the support thread.

Regards,
Martin Vatev
Progress Telerik