WPF: Access SelectedItem of nested DataGrid

Question

I have a nested DataGrid setup. How do I access the SelectedItem for the inner grid?

<DataGrid ItemsSource="{Binding OuterGrid}" RowDetailsVisibilityMode="Visible">
    <DataGrid.Columns>
        <DataGridCheckBoxColumn ..... />
    </DataGrid.Columns>
    <DataGrid.RowDetailsTemplate>
        <DataTemplate>
            <DataGrid ItemsSource="{Binding InnerGrid}" SelectedItem="{Binding SelectedInner}">
                <DataGridTextColumn ..... />
            </DataGrid>
        </DataTemplate>
    </DataGrid.RowDetailsTemplate>
</DataGrid>

SelectedInner is a property and even if I select a row in the InnerGrid in the UI, that property is still null. How do I know which row was selected in the inner grid? I also use caliburn-micro.

Lord Amateur Lord Amateur · Accepted Answer · 2020-07-19T10:20:07

It depends on where the 'SelectedInner' object is in your ViewModel. If the the object is in your ViewModel of your view (as is in the example below), you need to use RelativeResource in order to point out the datagrid where your bound object is.

class ShellViewModel:Screen
{
    public BindableCollection<DataGridObject> OuterGrid { get; set; } = new BindableCollection<DataGridObject>();
    public BindableCollection<DataGridObject> InnerGrid { get; set; } = new BindableCollection<DataGridObject>();

    public DataGridObject selectedInner { get; set; } = new DataGridObject();

    public ShellViewModel()
    {
        OuterGrid.Add(new DataGridObject {String1="water",String2="air",String3="earth" });
        OuterGrid.Add(new DataGridObject {String1="water1",String2="air2",String3="earth2" });
        OuterGrid.Add(new DataGridObject { String1 = "water3", String2 = "air3", String3 = "earth3" });
            
        InnerGrid.Add(new DataGridObject {String1="water",String2="air",String3="earth" });
        InnerGrid.Add(new DataGridObject {String1="water1",String2="air2",String3="earth2" });
        InnerGrid.Add(new DataGridObject {String1="water3",String2="air3",String3="earth3" });

        NotifyOfPropertyChange(() => OuterGrid);
        NotifyOfPropertyChange(() => InnerGrid);
    }

    
}

public class DataGridObject
{
    public string String1 { get; set; }
    public string String2 { get; set; }
    public string String3 { get; set; }
}

On the xaml you need to use RelativeResource

<DataGrid ItemsSource="{Binding OuterGrid}" RowDetailsVisibilityMode="Visible">
        <!--<DataGrid.Columns>
            <DataGridCheckBoxColumn />
        </DataGrid.Columns>-->
        <DataGrid.RowDetailsTemplate>
            <DataTemplate>
                <StackPanel>
                    <DataGrid ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window},Path=DataContext.InnerGrid}" SelectedItem="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window},Path=DataContext.selectedInner}" >
                    </DataGrid>
                </StackPanel>
            </DataTemplate>
        </DataGrid.RowDetailsTemplate>
    </DataGrid>

Make sure you specify the correct ancestor which ma be window or usercontrol

WPF: Access SelectedItem of nested DataGrid

1 Answers