asp:Feature
LANGUAGES: C#
ASP.NET VERSIONS: 3.5
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 www.silverlight.net, which contains dozens of Silverlight articles and videos. Another major resource for learning Silverlight 2.0 is www.silverlightshow.net, which focuses on delivering rich and comprehensive tutorials about Silverlight. In addition, you can download the Microsoft Silverlight 2.0 SDK documentation (tinyurl.com/SilverlightSDK), 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 tinyurl.com/silverlight-tutorial6. 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.
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> // Begin callout A Fill="#FF8A8A8A" /> // End callout A]
HorizontalAlignment="Center"
VerticalAlignment="Center" Width="350"
Height="100" Padding="10"
Margin="10" BorderBrush="BlanchedAlmond">
Figure 2: Details UserControl
This Rectangle is set to "Stretch" vertically and horizontally to spread all over the space where the UserControl is placed. In addition, its Opacity is set to a fraction of 1, which means the Fill color set will be lighter hence giving the modal dialog sense, as shown in Figure 1. When the control is displayed, everything beneath it will be disabled since the Rectangle control will fill the space behind the actual content of the details UserControl.
Now that the details UserControl is done, let us move to the ComboBox control, as Figure 3 shows. The ComboBox control uses an ItemTemplate to define the UI for each of its items. The ItemTemplate is set to a DataTemplate that displays the employee's full name in the form of "LastName, FirstName".
SelectionChanged="cboEmployees_SelectionChanged"
Width="Auto" Height="Auto"
Margin="5,0,5,5" ItemsSource="{Binding}">
Figure 3: ComboBox control
The ComboBox control sets its ItemsSource property to the binding markup extension and its DataContext is bound from inside the code-behind as follows:
// Get the FirstName/LastName from the Employee list
var query = from e in EmployeeManager.GetEmployeeList()
select new Employee
{
LastName = e.LastName,
FirstName = e.FirstName
};
this.cboEmployees.DataContext = query;
The "FirstName" and "LastName" properties are retrieved from the list of employees using a Language-Integrated Query (LINQ) technique, and the result is set to the ComboBox's DataContext.
The details UserControl is placed as part of the main UserControl, showing the ComboBox control as follows:
xmlns:bhaidar="clr-namespace:DataGridMasterDetail" x:Name="employeeDetails"
Visibility="Collapsed" /> The control is displayed on the page so that it gets
loaded intro memory; however, its Visibility property is set to "Collapsed,"
meaning that the control is hidden when the page initially loads. The ComboBox control in Figure 3 defines an event
handler for the SelectionChanged event. This event handler, which Figure 4
shows, retrieves the item selected in the ComboBox and shows the details of
that item in the details UserControl. private void cboEmployees_SelectionChanged(object sender,
SelectionChangedEventArgs e) { // Get the
selected item Employee
selectedItem = (Employee)e.AddedItems[0]; var query =
from emp in EmployeeManager.GetEmployeeList()
where emp.FirstName.Equals(selectedItem.FirstName) &&
emp.LastName.Equals(selectedItem.LastName)
select new Employee {
IsMarried = emp.IsMarried,
JobTitle = emp.JobTitle };
this.employeeDetails.Visibility = Visibility.Visible;
this.employeeDetails.DataContext = query.ToList()[0]; } Figure 4:
Event handler The event handler starts by retrieving the selected
item using the SelectionChangedEventArgs property, then uses AddedItems to get all
the items that were selected in the control. Next, the event handler retrieves the
details about the record. In this case, the details are retrieved from a
predefined collection, but in a more realistic scenario, detailed information
can be retrieved from the server instead. Finally, the Visibility property of the details
UserControl is set to "Visibility.Visible" so that the control now
shows up. The control's DataContext is set to the query results holding the
information to show within the UserControl. Master-Detail Using RowDetailsTemplate The Silverlight 2.0 DataGrid control provides a new
and unique feature that let developers show or hide a details section for each
and every row displayed inside the DataGrid control. This feature allows inline
Master/Detail implementation in an easy and configurable way. The DataGrid control provides the
RowDetailsTemplate, so that you use this property to define the DataTemplate
for the row details section that's always displayed beneath each row inside the
DataGrid control. The XAML in Figure 5 shows the definition of a DataGrid
control that uses a RowDetailsTemplate to show more details about each row.
RowDetailsVisibilityMode="VisibleWhenSelected" LoadingRow="dgEmployees_LoadingRow">
. .
HorizontalAlignment="Left" Width="Auto">
Margin="0,0,10,0" VerticalAlignment="Center"
HorizontalAlignment="Center" />
HorizontalAlignment="Center"/>
Margin="0,0,10,0" VerticalAlignment="Center"
HorizontalAlignment="Center" />
HorizontalAlignment="Center"/>
Margin="0,0,10,0" VerticalAlignment="Center"
HorizontalAlignment="Center" />
HorizontalAlignment="Center"/>
Figure 5:
DataGrid control using a RowDetailsTemplate The RowDetailsTemplate is a simple template whose
value is set to a DataTemplate to design the UI for the row details section.
All you do is place the controls you want and bind them to the properties of
the underlying bound object. In addition to setting the RowDetailsTemplate, you
can control the visibility of the row details section by setting the value of
RowDetailsVisibilityMode property on the DataGrid control itself. This property
is of type DataGrid RowDetailsVisiblityMode enumeration and has the following
values:
Collapsed: The row details section will be
hidden for all rows in the DataGrid.
Visible: The row details section will be
displayed for all rows in the DataGrid.
VisibleWhenSelected: The row details section is
displayed only for the selected rows. It's wise to set the RowDetailsVisiblityMode to the
"VisibleWhenSelected"; this way, you'll have all your rows' details
sections hidden and shown only when a row or set of rows are being selected. Figure 6 shows the DataGrid control when one of its
rows is selected, where the row details section is displayed just below the
selected row. One of the rows inside the DataGrid is selected, and beneath it
the row details section is shown, as it was defined inside the
RowDetailsTemplate. Clicking any row shows the row details section beneath it. Figure 6:
DataGrid row details section As you've seen in this section, the DataGrid row
details feature provides an easy and implicit way to show master/detail
information inside the DataGrid control itself. I've created a demo showing the
output of the sample code explored in this article, which you can see at bhaidar.net/SilverlightDataGrid/MasterDetail.aspx.
This demo will give you a sense of what an end user will experience when using
the Master/Detail view. Mastering Master/Detail This article explores two different options to
display data in Silverlight in a Master/Detail fashion. The first option is to
use a ComboBox control where the user selects an item out of the ComboBox and a
modal UserControl pops up, showing the details of that record selected. Another
option is to use the row details section, which is a newly introduced feature
of the Silverlight DataGrid control. This technique provides a smart way to
show more details for a record just beneath the selected row. Whichever method
you choose, you'll find that the DataGrid's Master/Detail view will give you
more options for enabling users to view database data in web applications. Bilal Haidar
([email protected]) is a Microsoft MVP in ASP.NET. He is an MCP, MCTS, MCPD,
MCT, and Telerik MVP. He is a senior software developer at CCC, a multinational
construction company based in Athens, Greece.
Previous Articles in this Series
"Columns & Rows: Silverlight 2.0 DataGrid Properties," June 2009
"Columns & Rows: Part II: Silverlight 2.0 DataGrid Columns," July 2009
