Question

I have a datagrid with the RowDetialsVisibilityMode set to VisibleWhenSelected, and the RowDetailsTemplate set accordingly. When the user selects a row, the detail shows, which is exactly as described. However after reviewing the details, the user would like to hide the row detail again without showing the details of another row. How is this best accomplished.

Update: As mentioned in the comments, the likely the best option would be a button in the details row to hide the row, but then I wonder what would the binding look like?

Answer 1

Since this functionality is presentation-based, I’d create a behavior for the button that would collapse the row

public class CollapseRowAction : TriggerAction<ButtonBase>
{
    public CollapseRowAction() {}
    protected override void Invoke(object o)
    {
        var dg = FindVisualParent<DataGrid>(this.AssociatedObject);
        if (dg != null)
            dg.SelectedIndex = -1;

    }

    private static T FindVisualParent<T>(DependencyObject child) where T : DependencyObject
    {      

        DependencyObject parentObject = VisualTreeHelper.GetParent(child);   
        if (parentObject == null) return null; 

        T parent = parentObject as T;
        if (parent != null) 
        { 
            return parent; 
        }
        else
        {
            return FindVisualParent<T>(parentObject);
        }
    }
}

And in XAML:

<sdk:DataGrid.RowDetailsTemplate>
<DataTemplate>
    <StackPanel Orientation="Horizontal">
        <!--... However row details are presented ...-->
        <Button Margin="10" Content="Collapse">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <myTriggers:CollapseRowAction/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </StackPanel>
</DataTemplate>
</sdk:DataGrid.RowDetailsTemplate>