ComboBox not updating when ItemsSource changes

3 posts, 1 answers
  1. Sam
    Sam avatar
    67 posts
    Member since:
    Jun 2011

    Posted 16 Jan 2012 Link to this post


    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: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
  2. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 19 Jan 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Sam
    Sam avatar
    67 posts
    Member since:
    Jun 2011

    Posted 23 Jan 2012 Link to this post

    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.
Back to Top