Creating a Master-Detail View with C1DataGrid
Introduction
When displaying data, one of the most important aspects to consider is how you can make the data meaningful -- how can you show how the data interrelates? While a massive grid layout showing one record after another might help visualize data, it does nothing when it comes to explaining why the data exists or how it can be used. One simple solution to organizing data and making it more meaningful is setting up a Master-Detail relationship in the datagrid. In a Master-Detail relationship, displayed detail objects are related to the selected master object.
This article will walk you through just how easy it is to use ComponentOne DataGrid for Silverlight to add a Master-Detail view to a Silverlight application. The following example shows a set of product categories loaded from a XML file using LINQ to XML. For each row in the main grid (categories), a list of products is loaded and shown in the detail view using a second C1DataGrid control. The detail data is loaded when the detail view of a category row changes.
About ComponentOne DataGrid for Silverlight
ComponentOne DataGrid for Silverlight is a robust data-bound Silverlight DataGrid control that makes it easy to display, edit, and analyze tabular data in Silverlight applications. DataGrid for Silverlight is part of our Silverlight control suite, ComponentOne Studio for Silverlight.
Step 1: Create a Silverlight Application
Open Visual Studio and select File | New | Project from the main menu. In the New Project dialog box, select Visual C# in the left pane and in the templates list select Silverlight Application. Enter "C1DataGrid" in the Name text box, and click OK.
Click OK to accept the default settings in the New Silverlight Application dialog box and create your project.
Step 2: Add ComponentOne DataGrid for Silverlight to the Project
To add the C1DataGrid control, you'll first need to add references to the C1.Silverlight.dll and C1.Silverlight.DataGrid.dll assemblies. To do so, right-click on References in the Solution Explorer, choose Add Reference, and browse to and select the DLLs, and click OK. After adding the assemblies, the Solution Explorer will appear similar to the following image:
Next, add a reference to the grid in the XAML markup. Below xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" in the tag, add the following markup:
xmlns:c1grid="clr-namespace:C1.Silverlight.DataGrid;assembly=C1.Silverlight.DataGrid"
Now you can add the grid to the XAML markup. To do so, click in between the tags once and type the following:
This markup adds a C1DataGrid control named "c1datagrid" to your project. Your markup will appear like the following:
Step 3: Add a Data Source to the Project
In this step you'll add a data source to your application and add external files to set up the data source. Note that to simplify the tutorial, this step uses files included with the C1DataGrid_Demo sample included with the Studio for Silverlight installation. By default, the Data.cs and products.xml files will be installed in the Documents or My Documents folder in the ComponentOne Samples\Studio for Silverlight\C1.Silverlight.DataGrid\C1DataGrid_Demo\C1DataGrid_Demo directory.
In the Solution Explorer window, right-click the C1DataGrid project and select Add | New Folder. Rename the folder "Resources"; right-click the Resources folder and select Add | Existing Item. In the Add Existing Item dialog box, navigate to the C1DataGrid_Demo\Resources sample folder, select the products.xml file, and click Add. This file provides that data you'll use in the project.
Select the products.xml file in the Solution Explorer, and in the Properties window set its Build Action property to Embedded Resource.
In the Solution Explorer window, right-click the C1DataGrid project and select Add | Existing Item. In the Add Existing Item dialog box, navigate to the C1DataGrid_Demo sample folder, select the Data.cs file, and click Add. This file contains code to set up the data source. The Solution Explorer will now appear similar to the following:
Step 4: Set 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.
Add the following tags between the tags so that it appears similar to the following:
This template will customize the row details section display. Add LoadedRowDetailsPresenter="c1datagrid_LoadedRowDetailsPresenter" LoadingRow="c1datagrid_LoadingRow" to the tag so that it appears similar to the following:
Later you'll add handlers for these events in code. Right-click the project in the Solution Explorer and select Add Reference. In the Add Reference dialog box, locate System.Xml.Linq and System.ComponentModel.DataAnnotations and click OK to add the references. Right-click the page and select View Code in the context menu to open the Code Editor. In the Code Editor, import the following namespaces:
using System.Xml.Linq;
using C1.Silverlight.DataGrid;
using C1DataGrid_Demo;
Add code to the MainPage constructor to set the ItemsSource property:
public MainPage()
{
InitializeComponent();
c1datagrid.ItemsSource = Data.GetSubCategories(null).Take(10);
}
Add code for the c1datagrid_LoadedRowDetailsPresenter and c1datagrid_LoadingRow events to the MainPage class to set the row details visibility for the first row:
private void c1datagrid_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);
}
}
}
private void c1datagrid_LoadingRow(object sender, DataGridRowEventArgs e)
{
if (e.Row.Index == 0)
{
e.Row.DetailsVisibility = Visibility.Visible;
}
}
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:
Summary
ComponentOne DataGrid for Silverlight makes creating Master-Detail views a breeze. This tutorial demonstrated how easily you can create a grid in your Silverlight application that allows end users to easily and effectively navigate and find the data they are looking for. Use ComponentOne DataGrid for Silverlight to take your Silverlight applications to the next level.
MESCIUS inc.