ComboBox not updating when ItemsSource changes

[Sam]

Hi,

I'm encountering a problem with the RadComboBox, where the items are not updating when the corresponding binding is changed.

Below is the sample code I'm using that illustrates the problem for me (using Telerik Silverlight RadControls from Dec 20 2011):

<UserControl x:Class="RadComboBoxProblem.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>

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

        <telerik:RadComboBox
            ItemsSource="{Binding Items}" DisplayMemberPath="Name"
            IsEditable="True" IsReadOnly="True" Grid.Row="1"
            SelectedItem="{Binding SelectedItem, Mode=TwoWay}" />

        <Button Click="Button_Click" />
    </Grid>
</UserControl>

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows;

namespace RadComboBoxProblem
{
    public partial class MainPage
    {
        public MainPage()
        {
            var vm = new ViewModel();
            vm.Items.Add(new DataItem { Name = "One", Value = 2342 });
            vm.Items.Add(new DataItem { Name = "Two", Value = 78746 });
            vm.Items.Add(new DataItem { Name = "Three", Value = 3862867 });
            vm.Items.Add(new DataItem { Name = "Four", Value = 282876 });
            vm.Items.Add(new DataItem { Name = "Five", Value = 2389276 });

            DataContext = vm;
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var vm = (ViewModel)DataContext;
            vm.DoItemUpdate();
        }
    }

    public class ViewModel : INotifyPropertyChanged
    {
        private readonly ObservableCollection<DataItem> _items = new ObservableCollection<DataItem>();
        public ObservableCollection<DataItem> Items
        {
            get { return _items; }
        }

        private DataItem _selectedItem;
        public DataItem SelectedItem
        {
            get { return _selectedItem; }
            set
            {
                if (_selectedItem != value)
                {
                    _selectedItem = value;
                    PropertyChanged(this, new PropertyChangedEventArgs("SelectedItem"));
                }
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public void DoItemUpdate()
        {
            Items[2].Name = "AAARGH";
            PropertyChanged(this, new PropertyChangedEventArgs("Items"));
            PropertyChanged(this, new PropertyChangedEventArgs("SelectedItem"));
        }
    }

    public class DataItem
    {
        public string Name { get; set; }

        public object Value { get; set; }
    }
}

- Select "Three" in the combo box
- Click the button above it

The button click changes the name of the 3rd data item and raises a property change for both the Items collection and SelectedItem property on the view model.

I would expect this to rebind the items source and update the selected item to reflect the name, but this does not happen - the drop down items do not reflect the item name change at all.

Also, the selected item name does not change until I click the dropdown then click outside the control, which is not the desired behaviour.

Is there a way to work around these problems? 

Thanks for your help,

Sam

[Yana]

Hi Sam,

First, in order to update the items,  the DataItem class should also implement INotifyPropertyChanged interface.  Also note that when IsEditable is set to "True", the text in the input field of the RadComboBox will not be updated, only the item in the dropdown. This behavior is the same as the standard WPF ComboBox.

I've attached a simple example to demonstrate the needed changes to update the item, please download the attachment and give it a try.

All the best,
Yana
the Telerik team

[Sam]

Thanks, it's the IsEditable issue that is causing the problem for us - I wasn't aware of that specific behaviour.

My example data item doesn't implement INotifyPropertyChanged, but our actual data items do, so they update correctly.

We can work around the IsEditable issue.