Add combobox column in datagrid all time

Question

Hi All, I have a datagrid control in my WPF page which has some editable columns. All of these editable columns are Datagridtemplatecolumn with Textblock in celltemplate and combobox in celleditingtemplate. The problem with this approach is that user is not able to identify the editable(combobox) columns during display on screen and he has to double click on column to go to edit mode and display combobox in editable columns. I need to show combobox even during display in these columns. I have tried to add combobox in celltemplate too but that combobox overrides the combobox in celleditingtemplate due to which it shows same list of items in celleditingtemplate as combobox in celltemplate. Please advise how to achieve the required functionality ASAP. Regards, Pratham

Answer 1

Hi,@Pratham Jain. Welcome to Microsoft Q&A Forum. You could get better idea by looking at the following sample.

  <DataGrid Name="dgEmployee" IsReadOnly="False"  CanUserResizeRows="True" CanUserSortColumns="True" ItemsSource="{Binding Path=EmployeeItems}"      
                  HeadersVisibility="Column" AutoGenerateColumns="False" IsSynchronizedWithCurrentItem="False" SelectionMode="Single"
                  SelectedItem="{Binding SelectedItem}"  >
            <DataGrid.Columns>
                <DataGridTextColumn Header="Employee Id" Binding="{Binding EmployeeID}"    />
                <DataGridTemplateColumn Header="Employee Name" MinWidth="120">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                          
                            <ComboBox Height="22" Text="{Binding Path=EmployeeName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" x:Name="cmbEmployeeList"
                                      ItemsSource="{Binding DataContext.EmployeeList, RelativeSource={RelativeSource FindAncestor, AncestorType=DataGrid}}" 
                                      SelectedValuePath="Value" DisplayMemberPath="Value" IsEnabled="True" IsEditable="True">
                            </ComboBox>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
        

Codebdehind:

 public partial class MainWindow : Window, INotifyPropertyChanged
  {
    public MainWindow()
    {
      InitializeComponent();

      EmployeeItems = new ObservableCollection<EmployeeItem>
            {
                new EmployeeItem { EmployeeID = 1, EmployeeName = "John" },
                new EmployeeItem { EmployeeID = 2, EmployeeName = "Jane" },
                new EmployeeItem { EmployeeID = 3, EmployeeName = "Bob" },
                new EmployeeItem { EmployeeID = 4, EmployeeName = "Alice" }

            };

      EmployeeList = new Dictionary<int, string>
            {
                { 1, "Johns" },
                {  2, "Janes" },
                { 3, "Bobs" },
                {  4, "Alices" }   
            };

      FilteredEmployeeList = new Dictionary<int, string>();
      DataContext = this;
    }

    private EmployeeItem selectedItem;
    public EmployeeItem SelectedItem
    {
      get { return selectedItem; }
      set
      {
        if (selectedItem != value)
        {
          selectedItem = value;
          OnPropertyChanged("SelectedItem");
          UpdateFilteredDictionary();
        }
      }
    }
    private void UpdateFilteredDictionary()
    {
      FilteredEmployeeList = EmployeeList.Where(item => item.Key == SelectedItem.EmployeeID).ToDictionary(item => item.Key, item => item.Value);
    }


    private ObservableCollection<EmployeeItem> _employeeItems;
    public ObservableCollection<EmployeeItem> EmployeeItems
    {
      get { return _employeeItems; }
      set
      {
        _employeeItems = value;
        OnPropertyChanged(nameof(EmployeeItems));
      }
    }

    private Dictionary<int, string> _employeeList;
    public Dictionary<int, string> EmployeeList
    {
      get { return _employeeList; }
      set
      {
        _employeeList = value;
        OnPropertyChanged(nameof(EmployeeList));
      }
    }

    private Dictionary<int, string> _filteredEmployeeList;
    public Dictionary<int, string> FilteredEmployeeList
    {
      get { return _filteredEmployeeList; }
      set
      {
        _filteredEmployeeList = value;
        OnPropertyChanged(nameof(FilteredEmployeeList));
      }
    }



    private void dgEmployee_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
      if (e.AddedItems.Count > 0)
      {
        if (e.AddedItems[0] is EmployeeItem objEmployee)
        {
          List<string> employeeNameList = EmployeeItems
              .Where(employee => employee.EmployeeID == objEmployee.EmployeeID)
              .Select(emp => emp.EmployeeName)
              .Distinct()
              .ToList();

        }
      }
    }
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string name = null)
    {
      PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }
  }

  public class EmployeeItem
  {

    public int EmployeeID { get; set; }
    public string EmployeeName { get; set; }
    public KeyValuePair<int, string> SelectedEmployee { get; set; }
  }

The result:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

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.