Share via


Adding Combobox in WPF Datagrid Header Using MVVM Pattern

Introduction:
This article explains how to add combobox to the Datagrid column header using MVVM pattern.

XAML:
Define a datagrid with a column and in the column header define the combobox.
<Grid>
        <DataGrid AutoGenerateColumns="False" Name="dgr" ItemsSource="{Binding GridItems}" >
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Name}" >
                    <DataGridTextColumn.Header>
                        <StackPanel Orientation="Horizontal">                           
                            <TextBlock Text="combo" Grid.Row="0"/>
                            <ComboBox Grid.Row="1" Width="70" HorizontalAlignment="Center" Name="cboBhp" 
                                               ItemsSource="{Binding Path=DataContext.ComboItems, 
                                                RelativeSource={RelativeSource AncestorType={x:Type Window}}}" 
                                      SelectedValue="{Binding Path=DataContext.ComboValue, RelativeSource={RelativeSource AncestorType={x:Type Window}}, 
                                Mode=TwoWay}">
                            </ComboBox>
                        </StackPanel>
                    </DataGridTextColumn.Header>
                </DataGridTextColumn>
               
            </DataGrid.Columns>
        </DataGrid>
    </Grid>

Code Behind:
Bind the viewmodel to the datacontext of the window.
public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            this.DataContext = new MainViewModel();
        }
    }

Model and ViewModel:
Create a model to populate the datagrid. Create a viewmodel which holds the Itemsource for combobox and datagrid. It also holds the selected value of the combobox in the header.

public class GridSample
    {
        public string Name { get; set; }
       
    }

   
    public class MainViewModel:INotifyPropertyChanged
    {
        private string comboValue;
        public string ComboValue
        {
            get { return comboValue; }
            set
            {
                if (comboValue != value)
                {
                    comboValue = value;
                    NotifyPropertyChanged("ComboValue");
                }
            }
        }
        public MainViewModel()
        {

            ComboItems = new ObservableCollection<string>();
            ComboItems.Add("pascal");
            ComboItems.Add("Braye");

            ComboValue = "pascal";

            GridItems = new ObservableCollection<GridSample>() {
            new GridSample() { Name = "Jim"} ,new GridSample() { Name = "Adam"} };
            
        }

        public event PropertyChangedEventHandler PropertyChanged; 

        private void NotifyPropertyChanged(string str)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(str));
            }
        }

        public ObservableCollection<GridSample> GridItems { get; set; }
       
        public ObservableCollection<string> ComboItems { get; set; }
    }

Using the above code, it is easy to create a combobox in datagrid header using MVVM design pattern.

Happy coding!!!!!