Question

I want to make custom DataGrid column that contains ComboBox in it. ItemSource of combobox is bound to enum and selecteditem of combobox is bound to chosen enum value in collection element.

Here is code

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApp"
        xmlns:System="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:AnimalObservableCollection x:Key="animals">
            </local:AnimalObservableCollection>
        <ObjectDataProvider x:Key="animalEnum" MethodName="GetValues"
                            ObjectType="{x:Type System:Enum}">
            <ObjectDataProvider.MethodParameters>
                <x:Type TypeName="local:AnimalType"/>
            </ObjectDataProvider.MethodParameters>
        </ObjectDataProvider>
    </Window.Resources>
    <Grid>
        <DataGrid AutoGenerateColumns="False" Margin="12,12,12,101" Name="dgAnimals" CanUserAddRows="True" CanUserDeleteRows="True"  DataContext="{StaticResource animals}" ItemsSource="{Binding}">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Name" Binding="{Binding Path=Name}"></DataGridTextColumn>
                <DataGridTemplateColumn Header="Animal type">
                    <DataGridTemplateColumn.CellEditingTemplate>
                        <DataTemplate>
                            <ComboBox  ItemsSource="{Binding Source={StaticResource animalEnum}}" SelectedItem="{Binding Path=AnimalType}"></ComboBox>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellEditingTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

Code-behind

public partial class MainWindow : Window
    {
        AnimalObservableCollection animals;
        public MainWindow()
        {
            InitializeComponent();
            animals = (AnimalObservableCollection)this.FindResource("animals");
            animals.Add(new Animal(AnimalType.horse,"Rex"));

        }
    }

    public enum AnimalType { dog, cat, horse };


    class AnimalObservableCollection : ObservableCollection<Animal>
    {
        public AnimalObservableCollection()
            : base()
        {
        }
    }

    class Animal
    {
        private AnimalType animalType;
        private string name;


        public Animal()
        {
        }
        public Animal(AnimalType animalType_, string name_)
        {
            animalType = animalType_;
            name = name_;
        }

        public AnimalType AnimalType
        {
            get
            {
                return animalType;
            }
            set
            {
                animalType = value;
            }

        }
        public string Name
        {
            get
            {
                return name;
            }
            set
            {
                name = value;
            }
        }
    }

The problem is that, when combobox loses focus, selecteditem isn’t diplayed in DataGrid`s cell and this cell stays blank. How to make cells in AnimalType column to show selecteditem of comboboxes?

It works perfectly when I use DataGridComboBoxColumn, but I`d like to use DataGridTemplateColumn to add some more features in future.

Answer 1

In your code I see only CellEditingTemplate which means that you’ve defined template for this cell only when cell in editing mode, you also need to define CellTemplate which is used when cell in just “view” mode. Like this:

<DataGridTemplateColumn Header="Animal type">
    <DataGridTemplateColumn.CellEditingTemplate>
        <DataTemplate>
            <ComboBox  ItemsSource="{Binding Source={StaticResource animalEnum}}" 
                       SelectedItem="{Binding Path=AnimalType}"></ComboBox>
        </DataTemplate>
    </DataGridTemplateColumn.CellEditingTemplate>
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock  Text="{Binding Path=AnimalType}"></TextBlock>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>