Wpf : Custom Datagrid inside combobox

Question

I have a view in which I have a datagrid , in the datagrid I put one column as DataGridTemplateColumn .I put one combobox in the DataGridTemplate column,I define a datatemplate inside the combobox.Hence the user can enter text on the combobox the results filtered into the CustomeDatagrid and user can select Item on the CustomeDatagrid .

Here is my requirement:

I try to acheive it. Here is my XAML:

<DataGrid AutoGenerateColumns="False"
          ItemsSource="{Binding OrderItems}"
          AlternatingRowBackground="{DynamicResource InflowDataGridAlternateBackgroundBrush>
    <DataGrid.Columns>
        <DataGridTemplateColumn Width="200" Header="Item">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                   <TextBlock Text="{Binding ProductName,Mode=OneWay}"/>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
            <DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <ComboBox>
                        <ComboBox.ItemTemplate>
                            <DataTemplate>
                                <vw:CustomDatagrid />
                            </DataTemplate>
                        </ComboBox.ItemTemplate>
                    </ComboBox>
                </DataTemplate>
            </DataGridTemplateColumn.CellEditingTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

CustomDataGrid :

<UserControl x:Class="RH_Maize.View.CustomDatagrid"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" Width="590" Height="251">
    <Grid Background="{DynamicResource GridBackgroundBrush}">
        <DataGrid>
            <DataGrid.Columns>
                <DataGridTextColumn MinWidth="150" Header="Category"/>
                <DataGridTextColumn MinWidth="180" Header="Item"/>
                <DataGridTextColumn MinWidth="130" Header="Rate"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</UserControl>

But when I click on the DatagridTemplate column I only get normal combobox no Custom Datagrid.

Whats wrong with my code?

How to achieve the above(image) CustomDatagrid inside the combobox in wpf ?

Edit:

How to populate the customDataGrid when the combobox text changed via binding ?

Answer 1

You don't need ItemTemplate inside the ComboBox

 <DataGrid AutoGenerateColumns="False" Name="tstgrid"
          ItemsSource="{Binding OrderItems}"
           >
          <DataGrid.Columns>
             <DataGridTemplateColumn Width="200" Header="Item">
                 <DataGridTemplateColumn.CellTemplate>
                      <DataTemplate>
                           <TextBlock Text="{Binding ProductName,Mode=OneWay}"/>
            </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
            <DataGridTemplateColumn.CellEditingTemplate>
                        <DataTemplate>
                            <ComboBox>
                                <vw:CustomDatagrid  />
                            </ComboBox>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellEditingTemplate>
            </DataGridTemplateColumn>
            </DataGrid.Columns>
  </DataGrid>

Answer 2

Edit the control Template of ComboBox and replace the ItemPresenter with your DataGrid.

http://msdn.microsoft.com/en-us/library/ms752094(v=vs.110).aspx

Bind the ComboBox ItemsSource to DataGrid ItemsSource,

<uc:DataGrid x:Name="ItemsPresenter" ItemSource="{Binding ItemsSource, RelativeSource={RelativeSource TemplatedParent}}"/>