WPF C# DataGrid ComboBox Column not showing value after scrolling when inserting row and it's not visible

Question

Hello,
I have a WPF C# phone numbers application, where registries (people's data) are shown in a DataGrid. One of its columns is ComboBox type, and its items are one or more phone numbers, and it shows always the first of them.
The issue comes when I insert a new registry (person's data with phone number(s)) and it is added to the ObservableCollection and then the list is sorted, and if that new row is not currently visible (by DataGrid scroll) then, when I scroll up to that new row, all Text Columns are shown alright, but in the ComboBox column the first phone number is not shown but there is a blank in its Text property. I tried adding the code below:

    private void OnComboBoxLoaded(object sender, RoutedEventArgs e)
    {
        ComboBox comboBox = (ComboBox)e.Source;
        comboBox.SelectedIndex = 0;
        TelsGrid.EnableRowVirtualization = true;
    }

but it has no effect. But if I click the ComboBox the phone number(s) are shown in the drop down list.

Thank you in advance for your help.
Regards
Pablo

Answer 1

Here is my demo to add a connection in DataGridComboBoxColumn:

The xaml code:

<Button Width="120" Height="36" Click="Button_Click" VerticalAlignment="Bottom"></Button>  
        <DataGrid Name="myDataGrid" AutoGenerateColumns="False" ItemsSource="{Binding GridItems}"  >  
            <DataGrid.Columns>  
                <DataGridTextColumn Binding="{Binding Name}" />  
  
                <DataGridComboBoxColumn SelectedValueBinding="{Binding PhoneMumberID}"  DisplayMemberPath="Name"  SelectedValuePath="ID">  
                    <DataGridComboBoxColumn.ElementStyle>  
                        <Style TargetType="{x:Type ComboBox}">  
                            <Setter Property="ItemsSource" Value="{Binding Path=DataContext.PhoneMumberItems, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />  
                        </Style>  
                    </DataGridComboBoxColumn.ElementStyle>  
                    <DataGridComboBoxColumn.EditingElementStyle>  
                        <Style TargetType="{x:Type ComboBox}">  
                            <Setter Property="ItemsSource" Value="{Binding Path=DataContext.PhoneMumberItems, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />  
                        </Style>  
                    </DataGridComboBoxColumn.EditingElementStyle>  
                </DataGridComboBoxColumn>  
            </DataGrid.Columns>  
        </DataGrid>  

The cs code is:

ViewModel viewModel = new ViewModel();  
        public Window1()  
        {  
            InitializeComponent();  
            this.DataContext = viewModel;  
  
        }  
  
        private void Button_Click(object sender, RoutedEventArgs e)  
        {  
            viewModel.GridItems.Add( new GridItem() { Name = "Jim4", PhoneMumberID = 4 } );  
            viewModel.PhoneMumberItems.Add(new PhoneMumberItem() { ID = 4, Name = "Mumber 4" });  
        }  
    }  
  
    public class GridItem  
    {  
        public string Name { get; set; }  
        public int PhoneMumberID { get; set; }  
    }  
  
    public class PhoneMumberItem  
    {  
        public int ID { get; set; }  
        public string Name { get; set; }  
    }  
  
    public class ViewModel  
    {  
        public ViewModel()  
        {  
            GridItems = new ObservableCollection<GridItem>()   
            {  
            new GridItem() { Name = "Jim1", PhoneMumberID = 1 } ,  
            new GridItem() { Name = "Jim2", PhoneMumberID = 2 } ,  
            new GridItem() { Name = "Jim3", PhoneMumberID = 3 } ,  
            };  
  
            PhoneMumberItems = new ObservableCollection<PhoneMumberItem>() {  
            new PhoneMumberItem() { ID = 1, Name = "Mumber 1" },  
            new PhoneMumberItem() { ID = 3, Name = "Mumber 3" },  
            new PhoneMumberItem() { ID = 2, Name = "Mumber 2" } };  
        }  
  
        public ObservableCollection<GridItem> GridItems { get; set; }  
        public ObservableCollection<PhoneMumberItem> PhoneMumberItems { get; set; }  
    }  

If this can't give you some help, please show your code which can reproduce the error for me to analyze.

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.