WPF MVVMLight: Update DataGrid based on SelectedItem of another DataGrid

Question

Developing a WPF app using MVVMLight.

My Model consists of an Attribute class and a DataSet class with an ObservableCollection<Attribute> property named Attributes.

My MainViewModel has a DataSet property.

In my MainView which has it's DataContext set to MainViewModel I have two DataGrids. One has it's ItemsSource binded to DataSet.Attributes which works fine:

<DataGrid CanUserAddRows="false" AutoGenerateColumns="false" ItemsSource="{Binding DataSet.Attributes}">
//some DataGrid columns here

I want the second DataGrid to display some additional properties based on the SelectedItem of the first DataGrid, so I did the following:

1) added a SelectedAttribute property of type Attribute in my MainViewModel:

private Attribute selectedAttribute;
public Attribute SelectedAttribute
{
    get { return selectedAttribute; }
    set
    {
        if (selectedAttribute == value)
        {
            return;
        }
        selectedAttribute = value;
        RaisePropertyChanged(() => SelectedAttribute);
    }
}

2) modified my first DataGrid to bind it's SelectedItem to SelectedAttribute:

<DataGrid CanUserAddRows="false" AutoGenerateColumns="false" ItemsSource="{Binding DataSet.Attributes}" SelectedItem="{Binding SelectedAttribute}">

3) Update 1 set the ItemsSource of the second DataGrid to SelectedAttribute and created a column bound to the Categories property of SelectedAttribute which is an ObservableCollection<string>:

<DataGrid SelectionMode="Single" EnableColumnVirtualization="True" AutoGenerateColumns="false" ItemsSource="{Binding Main.SelectedAttribute}">
    <DataGrid.Columns>
        <DataGridTextColumn Header="categories" Width="auto" Binding="{Binding Main.SelectedAttribute.Categories}"  />                      
    </DataGrid.Columns>
</DataGrid>

4) in my MainViewModel, once DataSet.Attributes is populated, I set the SelectedAttribute to the first Attribute in the collection (just as a test):

SelectedAttribute = DataSet.Attributes[0];

Once I run this, the first DataGrid loads fine, but no item is selected and the second DataGrid shows nothing. What am I doing wrong?

Answer 1

The ItemsSource of a grid must be IEnumerable. So this:

ItemsSource="{Binding Main.SelectedAttribute}"

will not work because SelectedAttribute is an instance of a class, not some sort of list.

You are also binding something that presumably does implement IEnumerable (categories) to a DataTextColumn, which is also wrong; the binding of a grid column must be a scalar property.

EDIT: You're not going to be able to bind thee columns in a grid to three separate observable collections directly; you are going to need to make a new model class to hold the stuff you want to show up in the grid, like:

public class SomeGridItem
{
    public string Category {get; set;}
    public string SecondProp {get; set;}
    public string ThirdProp [get; set;}
}

Then add a new property on your view model -- this is what you will bind the grid to:

public ObservableCollection<SomeGridItem> Blahs {get; set;}

Then when the SelectedAttribute changes, you will need to populate Blahs. You could do this in the property setter for SelectedAttribute (probably easiest), or you could react to SelectedAttribute's PropertyChanged event. This is pseudocode, but it should give you an idea of what needs to be done.

Blah.Clear();

for (var i = 0; i < SelectedAttribute.Categories.Count; i++) {
   Blahs.Add(new SomeGridItem() {
        Category = SelectedAttribute.Categories[i],
        SecondProp = SelectedAttribute.SecondCollection[i],
        ThirdProp = SelectedAttribute.ThirdCollection[i]
    });
}

Then bind to your grid.

<DataGrid SelectionMode="Single" EnableColumnVirtualization="True" AutoGenerateColumns="false" ItemsSource="{Binding Main.Blahs}">
    <DataGrid.Columns>
        <DataGridTextColumn Header="categories" Width="auto" Binding="{Binding Category}"  />                      
        <DataGridTextColumn Header="categories" Width="auto" Binding="{Binding SecondProp}"  />                      
        <DataGridTextColumn Header="categories" Width="auto" Binding="{Binding ThirdProp}"  />                      
    </DataGrid.Columns>
</DataGrid>