How to Access the property of Combobox inside of a DataGrid in WPF

Question

I want to Display data in my ComboBox inside of DataGridTemplateColumn in the DataGrid but it's empty in the binding so I decided to fill it in code behind but I couldn't access it by name!

XAML :

<Window x:Class="ComboDataWPF.MainWindow"
        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:local="clr-namespace:ComboDataWPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" WindowStartupLocation="CenterScreen" Loaded="Window_Loaded">
    
    <Grid>
        <DataGrid x:Name="MainDataGrid" AutoGenerateColumns="False" ItemsSource="{Binding ALLMYDATA, UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}">

            <DataGrid.Columns>
                <DataGridTextColumn Header="The Name :" Width="120" Binding="{Binding NAMES, UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}" />

                <DataGridTemplateColumn Header=" Name and Code " Width="150">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <ComboBox x:Name="ComboBox1"
                                      ItemsSource="{Binding ALLMYDATA, UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}"
                                      SelectedValuePath="{Binding CODE, UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}"
                                      DisplayMemberPath="{Binding NAMES, UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}"
                                      IsTextSearchEnabled="True"
                                      IsEditable="True"
                                      SelectedIndex="0"  BorderBrush="#FFADEEB4" Background="{x:Null}" BorderThickness="1">
                                
                                <ComboBox.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <VirtualizingStackPanel VirtualizingPanel.IsVirtualizing="True" VirtualizingPanel.VirtualizationMode="Recycling"/>
                                    </ItemsPanelTemplate>
                                </ComboBox.ItemsPanel>
                            </ComboBox>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>

        </DataGrid>
    </Grid>
</Window>

Code Behind :

 using System;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using System.ComponentModel;
    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 ComboDataWPF
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
            MyerEntities dbms = new MyerEntities();
            public ObservableCollection<MyCustomModel> ALLMYDATA { get; set; } = new ObservableCollection<MyCustomModel>();
            public class MyCustomModel
            {
                public int CODE { get; set; }
                public string NAMES { get; set; }
            }
            public MainWindow()
            {
                InitializeComponent();
                DataContext = this;
            }
            private void Window_Loaded(object sender, RoutedEventArgs e)
            {
                ALLMYDATA.Clear();
                var RST = dbms.Database.SqlQuery<MyCustomModel>("SELECT CODE,NAMES FROM TCOD_ANBAR").ToList();
                foreach (var item in RST)
                {
                    ALLMYDATA.Add(item);
                }
            }
        }
    }

my source: https://ufile.io/zvfoj4we

NOTE: I even tried to switch to GridView but it was harder than Datagrid.

so Why the ComboBox is empty and how can I access the property like ItemsSource and... in C#?

Please guide me

Answer 1

I downloaded your source project. And filled ALLMYDATA collection with 2 objects(cuz I don't have DB for it).

private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        ALLMYDATA.Clear();
        MyCustomModel myCustom = new MyCustomModel()
        {
            CODE = 20,
            NAMES = "Yes"
        };
        MyCustomModel myCustom2 = new MyCustomModel()
        {
            CODE = 30,
            NAMES = "No"
        };

        ALLMYDATA.Add(myCustom);
        ALLMYDATA.Add(myCustom2);
    }

So the main problems I saw were in your XAML. As you set DataGrid 's ItemsSource property to ALLMYDATA collection, it is DataContext for all child elements of DataGrid , and when you try to bind ComboBox 's ItemsSource to property like

ItemsSource="{Binding ALLMYDATA, UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}"

you get the error because DataContext for ComboBox is the ALLMYDATA collection and this collection doesn't contain the ALLMYDATA property, that's why you can't bind to it in ComboBox . So I changed XAML code above to

ItemsSource="{Binding ElementName=MainDataGrid, Path=ItemsSource}"

and it works well as ItemsSource of ComboBox is the same as DataGrid now.

Other problems are related to these pieces of code:

 SelectedValuePath="{Binding CODE, UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}"
DisplayMemberPath="{Binding NAMES, UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}"

As your ComboBox 's ItemsSource is ALLMYDATA, now you don't need to bind anything just write

SelectedValuePath="CODE"
DisplayMemberPath="NAMES"

Now your ComboBox is not empty:

Here is the full XAML of your DataGrid

<DataGrid x:Name="MainDataGrid" AutoGenerateColumns="False" ItemsSource="{Binding ALLMYDATA, UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}">

        <DataGrid.Columns>
            <DataGridTextColumn Header="The Name :" Width="120" Binding="{Binding NAMES, UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}" />

            <DataGridTemplateColumn Header=" Name and Code " Width="150">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <ComboBox x:Name="ComboBox1"
                                  ItemsSource="{Binding ElementName=MainDataGrid, Path=ItemsSource}"
                                  SelectedValuePath="CODE"
                                  DisplayMemberPath="NAMES"
                                  IsTextSearchEnabled="True"
                                  IsEditable="True"
                                  SelectedIndex="0"  BorderBrush="#FFADEEB4" Background="{x:Null}" BorderThickness="1">
                            
                            <ComboBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VirtualizingStackPanel VirtualizingPanel.IsVirtualizing="True" VirtualizingPanel.VirtualizationMode="Recycling"/>
                                </ItemsPanelTemplate>
                            </ComboBox.ItemsPanel>
                        </ComboBox>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
    </DataGrid>

Answer 2

You can do it this way.

First, name you Window .

<Window
    :
    x:Name="ThisWindow">

Then bind the ComboBox 's ItemsSource using the Window 's name. Also take a look at the SelectedValuePath and the DisplayMemberPath .

<ComboBox
    x:Name="ComboBox1"
    ItemsSource="{Binding ElementName=ThisWindow, Path=ALLMYDATA, UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}"
    SelectedValuePath="CODE"
    DisplayMemberPath="NAMES"
    IsTextSearchEnabled="True"
    IsEditable="True"
    SelectedIndex="0"
    BorderBrush="#FFADEEB4"
    Background="{x:Null}"
    BorderThickness="1">
    <ComboBox.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel VirtualizingPanel.IsVirtualizing="True" VirtualizingPanel.VirtualizationMode="Recycling"/>
        </ItemsPanelTemplate>
    </ComboBox.ItemsPanel>
</ComboBox>