Unplanned
Last Updated: 20 Feb 2023 08:18 by ADMIN
Chiahung
Created on: 16 Feb 2023 04:44
Category: MultiColumnComboBox
Type: Bug Report
1
GridViewDataColumn IsVisible binding does not work using MVVM patten

When biding IsVisible of column in RadMultiColumnComboBox/GridViewItemsSourceProvider using MVVM pattern, the binding won't work initially, but is works as expected if removing the ElementName and adding it back in the below example xaml using debugger.

PS1. The binding for CheckBox(in the below sample) works with issue but not for RadMultiColumnComboBox

PS2. Also attached full sample code.

<Window x:Class="TestProject.MainWindow"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                xmlns:local="clr-namespace:TestProject"
                Title="MainWindow" Height="350" Width="525">
    <Grid Margin="0,0,0,20" x:Name="rootGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Button Grid.Row="0" Command="{Binding ToggleCmd}">Toggle Last Name Visible</Button>
        <CheckBox Grid.Row="1" IsChecked="{Binding IsLastNameVisible}">Is Last Name Visible</CheckBox>

        <telerik:RadMultiColumnComboBox Grid.Row="2">
            <telerik:RadMultiColumnComboBox.ItemsSourceProvider>
                <telerik:GridViewItemsSourceProvider ItemsSource="{Binding AllClubs}" AutoGenerateColumns="false" >
                    <telerik:GridViewItemsSourceProvider.Columns>
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding FirstName}"   />
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding LastName}"
                                                    IsVisible="{Binding DataContext.IsLastNameVisible , ElementName=rootGrid}" />
                    </telerik:GridViewItemsSourceProvider.Columns>
                </telerik:GridViewItemsSourceProvider>
            </telerik:RadMultiColumnComboBox.ItemsSourceProvider>
        </telerik:RadMultiColumnComboBox>

    </Grid>
</Window>

Attached Files:
1 comment
ADMIN
Stenly
Posted on: 20 Feb 2023 08:18

Hello Chiahung Lee,

The reason why properties from the view model cannot be bound is that the RadGridView that is used in the RadMultiColumnComboBox is hosted in a Popup, which is not present in the same visual tree as that of the Grid layout with x:Name="rootGrid". Instead, a new visual tree is created when the IsOpen property of the Popup is set to True, as this is the default behavior of this native WPF element. Since the Popup is not in the same visual tree, the DataContext of the Grid layout will not be inherited and thus, bindings to the view model properties will result in binding errors in the Output window.

However, this behavior could be worked around by defining a new class that derives from the Freezable object. In it, define a new DependencyProperty that will hold the DataContext value of the RadMultiColumnComboBox. In XAML, define the extended Freezable object as a StaticResource and bind the IsVisible property of the column through it.

The following code snippets show this suggestion's implementation:

public class BindingProxy : Freezable
{
    #region Overrides of Freezable

    protected override Freezable CreateInstanceCore()
    {
        return new BindingProxy();
    }

    #endregion

    public object Data
    {
        get { return (object)GetValue(DataProperty); }
        set { SetValue(DataProperty, value); }
    }

    public static readonly DependencyProperty DataProperty =
        DependencyProperty.Register("Data", typeof(object), typeof(BindingProxy), new UIPropertyMetadata(null));
}
<telerik:RadMultiColumnComboBox Grid.Row="2">
    <telerik:RadMultiColumnComboBox.Resources>
        <local:BindingProxy x:Key="proxy" Data="{Binding}" />
    </telerik:RadMultiColumnComboBox.Resources>
    <telerik:RadMultiColumnComboBox.ItemsSourceProvider>
        <telerik:GridViewItemsSourceProvider ItemsSource="{Binding AllClubs}" AutoGenerateColumns="false" >
            <telerik:GridViewItemsSourceProvider.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding FirstName}"   />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding LastName}"
                                            IsVisible="{Binding Source={StaticResource proxy}, Path=Data.IsLastNameVisible}" />
            </telerik:GridViewItemsSourceProvider.Columns>
        </telerik:GridViewItemsSourceProvider>
    </telerik:RadMultiColumnComboBox.ItemsSourceProvider>
</telerik:RadMultiColumnComboBox>

I have modified the sample project that you have provided to demonstrate this approach.

Regards,
Stenly
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Attached Files: