combobox selected item not working inside datagrid

Question

I have a datagrid in which I put one column as TemplateColumn.

Here is my Datagrid:

<DataGrid AutoGenerateColumns="False"
          x:Name="MainDataGrid"
          ItemsSource="{Binding OrderItems}">
    <DataGrid.Columns>
        <DataGridTemplateColumn Width="230" Header="Product Name">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding ProductName,Mode=OneWay}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
            <DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <ComboBox 
                        Text="{Binding ProductName,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}">
                        <vw:CustomDatagrid />
                    </ComboBox>
                </DataTemplate>
            </DataGridTemplateColumn.CellEditingTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

In the CellEditingTemplate I put one Combobox in that I put one UserControl .

Here is my UserControl:

<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" Height="499" Width="560">
<Grid x:Name="LayoutRoot"  Width="560">
    <DataGrid ItemsSource="{Binding FilterdItems}"
              SelectedItem="{Binding SelectedFilterItem,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
              x:Name="CustomDataGrid"
             >
        <DataGrid.Columns>
            <DataGridTextColumn MinWidth="150"
                                Header="Category"
                                Binding="{Binding CategoryName,Mode=OneWay}"/>
            <DataGridTextColumn MinWidth="180"
                                Header="Item"
                                Binding="{Binding ProductName,Mode=OneWay}" />
            <DataGridTextColumn MinWidth="130"
                                Header="Rate"
                                Binding="{Binding Rate,Mode=OneWay}" />
            <DataGridHyperlinkColumn MinWidth="100" Header="Details"/>
        </DataGrid.Columns>
    </DataGrid>
</Grid>

My requirement is :

When the Combobox text changes I populate the CustomDatagrid with Items ,user can select an item from the CustomDatagrid, the selectedItem(ProductName) is displayed on the Combobox.

My viewModel:

public class ProductCartViewModel : ViewModelBase
{
    public ProductCartViewModel()
    {
        PopulateCustomGrid(string.Empty);
    }

    private string _productName;
    public string ProductName   
    {
        get { return _productName; }
        set
        {
            if (value != _productName)
            {
                _productName = value;
                PopulateCustomGrid(_productName);
                RaisePropertyChanged(() => ProductName);
            }
        }
    }

    private void PopulateCustomGrid(string productNameMatch)
    {
        List<ProductFilterModel> lstProduct = new List<ProductFilterModel>();
        using(var context=new MaizeEntities())
        {
            var items = from p in context.TblProducts
                        where p.ProductName.Contains(productNameMatch)
                        select p;


           foreach(var item in items)
           {
               ProductFilterModel product = new ProductFilterModel();
               product.CategoryName = item.TblProductCategory.CategoryName;
               product.ProductId = item.ProductId;
               product.ProductCode = item.ProductCode;
               product.ProductName = item.ProductName;
               product.Rate = item.PurchaseRate;

               lstProduct.Add(product);
           }
           FilterdItems = new ObservableCollection<ProductFilterModel>(lstProduct);
        }
    }
}

My problem:

When the user select an item from the CustomDataGrid the combobox.Text got the "RH_Maize.View.CustomDatagrid" text instead of ProductName .Whats wrong with my code ?

Answer 1

I would suggest you to go for popup approach which look like a textbox with a button at end to open popup

So the template for the column will have a textbox where user can type and a popup where you can host child controls (datagrid in your case)

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="auto" />
    </Grid.ColumnDefinitions>
    <TextBox x:Name="text" />
    <ToggleButton Grid.Column="1"
                  Content="..."
                  x:Name="toggle" />
    <Popup PlacementTarget="{Binding ElementName=text}"
           IsOpen="{Binding IsChecked, ElementName=toggle}">
        <Border Background="White">
            <TextBlock Text="your child control here, eg datagrid" />
        </Border>
    </Popup>
</Grid>

popup will be controlled by the button at the end you can also make it open by clicking the text box too

inside popup you can place your data grid etc.

DataGrid in popup

    <Popup PlacementTarget="{Binding ElementName=text}"
           IsOpen="{Binding IsChecked, ElementName=toggle}">
        <Border Background="White">
            <vw:CustomDatagrid SearchKey="{Binding Text, ElementName=text}}"/>
        </Border>
    </Popup>

binding a assumed property SearchKey in your custom control CustomDatagrid to Text property of TextBox, this binding will push the value of text box to control where you can perform filter search or other logic to populate your data in grid.

Clarification on introduction of property SearchKey

When the Combobox text changes I populate the CustomDatagrid with Items ,user can select an item from the CustomDatagrid, the selectedItem(ProductName) is displayed on the Combobox.

to me it mean that you need to pass the user typed text to the CustomDatagrid and populate the grid, and when user select an item from data grid you want to display it in combo box. so I this assumed property SearchKey, which will help you to pass the text data in a MVVM way.

You can choose to have any name for the property, you'd we able to populate the grid as long as you receive the text typed by user

you may choose to pass in the view model also in order to set properties, execute some methods etc.