Nested Silverlight Datagrid - Row Details works great, but I want a button!

Question

I'm using a silverlight 3 datagrid, and within it, I'm nesting related records in another control by using the rowdetails (visibilitymode = visiblewhenselected).

I really like how this works, but I'd much rather have the grid display the row details when a "+" button is pressed, much as a tree will expand when you click a node.

I tried programmatically defining the template by using resources like this:

<Grid.Resources>
    <DataTemplate x:Key="EmptyTemplate">
        <StackPanel>
            <!--<TextBlock Text="Empty Template!!!" />-->
        </StackPanel>
    </DataTemplate>
    <DataTemplate x:Key="SongTemplate">
        <StackPanel>
            <AdminControls:ArtistSongControl x:Name="ArtistSongControl" />
        </Stack>
    </DataTemplate>
</Grid.Resources>

And in the grid's LoadingRowDetails event, I'd choose which template to set by:

e.Row.DetailsTemplate = (DataTemplate)LayoutRoot.Resources["SongTemplate"];

This sortof worked, but I found that I had problems with collapsing previous rows details template, and even crashed ie8 (not sure if that's related).

Basically, I really like how the silverlight 3 datagrid works, and even how the rowdetailstemplate stuff is implemented. I simply would like to defer loading any details until a row is expanded purposely (as a tree would be). All of the 3rd party grids seem to do this, and microsoft's is soooo close. Does anyone have any idea how to solve this one?

Thanks, Dennis

Answer 1

Dennis,

In case you haven't already found an answer to this, I wanted the same behavior and solved it by customizing the RowHeaderTemplate, which lets you throw a button in the header for each row. Then I implemented a handler for the button like so:

private void ToggleButton_Click(object sender, System.Windows.RoutedEventArgs e)
{
    ToggleButton button = sender as ToggleButton;
    DataGridRow row = button.GetVisualAncestorOfType<DataGridRow>();

    if (button.IsChecked == true)
    {
        row.DetailsVisibility = Visibility.Visible;

        //Hide any already expanded row. We only want one expanded at a time for simplicity and
        //because it masks a virtualization bug in the datagrid.
        if (_expandedRow != null)
            _expandedRow.DetailsVisibility = Visibility.Collapsed;

        _expandedRow = row;
    }
    else
    {
        row.DetailsVisibility = Visibility.Collapsed;
        _expandedRow = null;
    }
}

Note that GetVisualAncestorOfType<> is an extension method I've implemented to dig into the visual tree.

You'll also need to set the datagrid's HeadersVisibility property to Row or All