Loading RowDetails On Demand in Silverlight DataGrid

C1DataGrid has an amazing feature to show details of a row just below it. You can put in your own content using RowDetailsTemplate. In this article, I'll explain how to load the RowDetails on demand i.e load the RowDetails only when the user clicks on the Expand/Collapse button. A simple example is as follows wherein in I've put a border for demonstration purpose and of course, it will be required later. But you can put in any control you like inside the DataTemplate.

<c1grid:C1DataGrid.RowDetailsTemplate>  
    <DataTemplate>  
        <Border x:Name="RowDetailsBorder" ></Border>  
    </DataTemplate>  
</c1grid:C1DataGrid.RowDetailsTemplate>  

To capture the click on the Expand/Collapse button, the DetailsVisibilityChanged event of the rows needs to be handled. This has to be done in the LoadedRowPresenter event :

void c1DataGrid1_LoadedRowPresenter(object sender, C1.Silverlight.DataGrid.DataGridRowEventArgs e)  
 {  
     e.Row.DetailsVisibilityChanged += new EventHandler<PropertyChangedEventArgs<System.Windows.Visibility>>(Row_DetailsVisibilityChanged);  
 }

Once the event is attached, we must set the visibility of the RowDetails for all rows to Collapsed in the LoadedRowDetailsPresenter event of C1DataGrid.

void c1DataGrid1_LoadedRowDetailsPresenter(object sender, C1.Silverlight.DataGrid.DataGridRowDetailsEventArgs e)  
 {  
     e.Row.DetailsVisibility = System.Windows.Visibility.Collapsed;  
 } 

Now comes the real task of loading content dynamically into the RowDetails when user clicks on the Expand/Collapse button. This is done in the DetailsVisibilityChanged event :

void Row_DetailsVisibilityChanged(object sender, PropertyChangedEventArgs<Visibility> e)  
 {  
     if (e.NewValue == System.Windows.Visibility.Visible)  
     {  
         var name = ((sender as C1.Silverlight.DataGrid.DataGridRow).DataItem as Product).Name;  
         UserControl1 uc1 = new UserControl1(name);  
         Border bdr = (Border)((sender as C1.Silverlight.DataGrid.DataGridRow).DetailsPresenter.Content);  
         bdr.Child = uc1;  
     }  
     else if (e.NewValue == System.Windows.Visibility.Collapsed)  
     {  
         Border bdr = (Border)((sender as C1.Silverlight.DataGrid.DataGridRow).DetailsPresenter.Content);  
         bdr.Child = null;  
     }  
 }

In this event, we use the border that we had set earlier as DataTemplate in xaml. The border is the content of the DetailsPresenter of the row. I've created a separate UserControl which is used as the child of the border. I have passed the Name of the underlying DataItem of the Grid as a parameter to the UserControl. You can use the parameter to fetch related data and show it as the Row Detail. Hope this would help some of you looking for a dynamic Row Detail. Please download the sample for complete implementation. Download C# Sample

[/csharp]