WPF MVVM How to bind ComboBox SelectedItem to specific DataGrid selected row column value

Question

I have a ViewModel (parent) that is the parent of two usercontrols (let's say UCdatagrid and UCEditControls), the usercontrols have no viewmodels and are using the parent viewmodels DataContext.

What I want to do is perform CRUD operations on the UCDatagrid with the UCEditControls which consist of Textboxes and Comboboxes. The Comboboxes are prepopulated with data. W

So far I have everything working except the combobox link. The textbox (Code) is filled correctly on datagrid row selection fine. When the user clicks a datagrid row I wish to take the corresponding Type column value and have that show as the selected item in the Type combobox so updates can be made.

I'm using Caliburn Micro.

ParentViewModel.cs

public class ConductorProductViewModel : Screen
{
    private readonly IDataConnection _connect;

    private ProductModel _selectedProduct;
    public ProductModel SelectedProduct
    {
        get { return _selectedProduct; }
        set
        {
            _selectedProduct = value;
            
            NotifyOfPropertyChange(() => SelectedProduct);          
        }
    }

    private TypeModel _selectedType;
    public TypeModel SelectedType
    {
        get { return _selectedType; }
        set { _selectedType = value; NotifyOfPropertyChange(() => SelectedType); }
    }

    private BindableCollection<ProductModel> _productList;
    public BindableCollection<ProductModel> ProductList
    {
        get { return _productList; }
        set { _productList = value; NotifyOfPropertyChange(() => ProductList); }
    }

    private BindableCollection<TypeModel> _types;
    public BindableCollection<TypeModel> Types
    {
        get { return _types; }
        set { _types = value; NotifyOfPropertyChange(() => Types); }
    }

    public ConductorProductViewModel(IDataConnection connect)
    {
        _connect = connect;

        GetProducts();
        LoadComboBoxLists();
    }

    private void LoadComboBoxLists()
    {
        Types = new BindableCollection<TypeModel>(_connect.Types_GetAll());
    }

    private async void GetProducts()
    {
        var allProducts = await _connect.Products_GetAll();
        ProductList = new BindableCollection<ProductModel>(allProducts);
    }
 }

DataGrid.Xaml

<UserControl x:Class="...>    
    <Grid>
        <DataGrid ItemsSource="{Binding ProductList}" SelectedItem="{Binding SelectedProduct}">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Code" Binding="{Binding Code}"/>
                <DataGridTextColumn Header="Type" Binding="{Binding Type}"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</UserControl>

EditControls.Xaml

<UserControl x:Class="...>    
    <Grid>
        <TextBox Text="{Binding SelectedProduct.Code}" />

        <ComboBox Name="TypeCB" ItemsSource="{Binding Types}"
                  SelectedItem={Binding SelectedType}">
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Type}"/>
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>

     </Grid>
</UserControl>

Image of what im trying to achieve https://i.stack.imgur.com/OGPzP.png

score 0 · Answer 1 · answered Feb 21 '21 at 18:17

Found help with the solution from this post

In the SelectedProduct property I added

public ProductModel SelectedProduct
{
    get { return _selectedProduct; }
    set
    {
        _selectedProduct = value;

        var indexOfType = Types.Select((TypeModel, index) => new { TypeModel, index }).First(x => x.TypeModel.Type == value.Type).index;
        TypeIndex = indexOfType;

        NotifyOfPropertyChange(() => SelectedProduct);          
    }
}

I then bound the SelectedIndex on the combobox to a new property called TypeIndex.

Now whenever a datagrid row is selected it will find the datagrids "Type" column value and match to the combobox list of Types and get the index number. This index value is passed to TypeIndex.

WPF MVVM How to bind ComboBox SelectedItem to specific DataGrid selected row column value

1 Answers1