Skip navigation

Columns & Rows, Part III: Working with DataGrid Master/Detail

Display detail data efficiently in database-driven web applications that use Silverlight




Columns & Rows, Part III: Working with DataGrid Master/Detail

Display detail data efficiently in database-driven web applications that use Silverlight

By Bilal Haidar

As I've discussed in the previous two articles in this series, the DataGrid control is a useful feature of Silverlight 2.0 that lets you display database data in a tabular or spreadsheet-like form. However, it isn't always possible to show a lot of data at once. For instance, an application might display a set of limited number of columns of essential data, and whenever the user needs to check more details, he or she can request to view more details. The DataGrid control's Master/Detail view capability enables the efficient retrieval and display of high-level and detail data on demand in a Silverlight application.

Here, I'll discuss two different options for implementing Master/Detail views in your applications by using the DataGrid and other helping Silverlight controls. In the first scenario, we'll use a ComboBox control together with a UserControl to simulate a Master/Detail in Silverlight. In the second scenario, we'll use the DataGrid's RowDetailsTemplate feature to create a Master/Detail view of data.

References to Silverlight 2.0

This article assumes a fair knowledge of using Silverlight 2.0, especially its data-binding features, and is not intended to explain the fundamentals of using Silverlight 2.0. If you feel you need more information about Silverlight 2.0, I recommend that you check Microsoft's official Silverlight website at, which contains dozens of Silverlight articles and videos. Another major resource for learning Silverlight 2.0 is, which focuses on delivering rich and comprehensive tutorials about Silverlight. In addition, you can download the Microsoft Silverlight 2.0 SDK documentation (, which covers Silverlight's features.

Master-Detail Using ComboBox Control

Let's start by working through an example that shows you how to implement a Master/Detail scenario using a ComboBox control together with a popping modal UserControl. Figure 1 shows the end result of implementing the Master/Detail scenario using the ComboBox control. As Figure 1 shows, a user can select the employee's full name from a ComboBox control, and the details UserControl will pop up in a modal form, showing additional details for the selected employee.

The trick in showing modal UserControls is taken from a blog post written by Scott Guthrie, "Silverlight Tutorial Part 6: Using User Controls to Implement Master/Detail Scenarios," at To start with implementing the Master/Detail example in Figure 1, we'll build the UserControl that will display the details of an employee record.

Figure 1: Master/Detail using modal UserControl

The UserControl is simple and based on XAML only, as you can see in Figure 2. The only trick is in the Rectangle control that's placed as the first control at callout A in Figure 2.



// Begin callout A

Fill="#FF8A8A8A" />

// End callout A]

HorizontalAlignment="Center" VerticalAlignment="Center" Width="350" Height="100"

Padding="10" Margin="10" BorderBrush="BlanchedAlmond">

Hide comments


  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.