Step 3 of 3: Setting up Row Details

In this step you'll finish setting up the row details section of the grid. You'll add a RowDetailsTemplate to set the appearance of the details row, and you'll add code to set up the details row behavior.

To set up row details, complete the following steps:

1. Add the following <c1:C1DataGrid.RowDetailsTemplate> between the <c1:C1DataGrid></c1:C1DataGrid> tags so that it appears similar to the following:

<c1:C1DataGrid x:Name="c1dg" CanUserAddRows="False" Margin="5">

<c1:C1DataGrid.RowDetailsTemplate>

<c1:C1DataGrid HeadersVisibility="Column" Margin="5" CanUserAddRows="False"/>

</DataTemplate>

</c1:C1DataGrid.RowDetailsTemplate>

</c1:C1DataGrid>

This template will customize the row details section display.

2. Add LoadedRowDetailsPresenter="c1dg_LoadedRowDetailsPresenter" LoadingRow="c1dg_LoadingRow" to the <c1:C1DataGrid> tag so that it appears similar to the following:

<c1:C1DataGrid x:Name="c1dg" CanUserAddRows="False" LoadedRowDetailsPresenter="c1dg_LoadedRowDetailsPresenter" LoadingRow="c1dg_LoadingRow">

Later you'll add handlers for these events in code.

3. In the Solution Explorer, right-click the project and select Add Reference. In the Add Reference dialog box, locate System.Xml.Linq and System.ComponentModel.DataAnnotations and click OK to add the reference.

4. Right-click the page and select View Code in the context menu to open the Code Editor.

5. In the Code Editor, import the following namespaces:

· C#

using System.Xml.Linq;

using C1.Silverlight.DataGrid;

using C1DataGrid_Demo;

6. Add code to the Page constructor to set the ItemsSource property:

· C#

public MainPage()

{

InitializeComponent();

c1dg.ItemsSource = Data.GetSubCategories(null).Take(10);

}

7. Add code for the c1dg_LoadedRowDetailsPresenter event to the MainPage class:

· C#

private void c1dg_LoadedRowDetailsPresenter(object sender, C1.Silverlight.DataGrid.DataGridRowDetailsEventArgs e)

{

if (e.Row.DetailsVisibility == Visibility.Visible)

{

C1.Silverlight.DataGrid.C1DataGrid detailGrid = e.DetailsElement as C1.Silverlight.DataGrid.C1DataGrid;

if (detailGrid.ItemsSource == null)

{

int subcategory = (e.Row.DataItem as Subcategory).ProductSubcategoryID;

detailGrid.ItemsSource = Data.GetProducts((product) => product.Element("ProductSubcategoryID") != null && product.Element("ProductSubcategoryID").Value != "" && int.Parse(product.Element("ProductSubcategoryID").Value) == subcategory).Take(10);

}

8. Add code for the c1dg_LoadingRow event to the MainPage class to set the row details visibility for the first row:

· C#

private void c1dg_LoadingRow(object sender, DataGridRowEventArgs e)

{

if (e.Row.Index == 0)

{

e.Row.DetailsVisibility = Visibility.Visible;

}

What You've Accomplished

If you save and run your application you'll observe that the grid is now populated with data from the products.xml file, and that the first row's details section is visible:

To collapse the row details section or expand another's row detail section, click the arrow icon in the row header of a row:

You've completed this tutorial and learned how to set up row details in the grid to display a master/detail grid view.