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

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 webapplications that use Silverlight

By Bilal Haidar

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

Here, I'll discuss two different options forimplementing Master/Detail views in your applications by using the DataGrid andother helping Silverlight controls. In the first scenario, we'll use a ComboBoxcontrol together with a UserControl to simulate a Master/Detail in Silverlight.In the second scenario, we'll use the DataGrid's RowDetailsTemplate feature tocreate a Master/Detail view of data.

References to Silverlight 2.0

This article assumes a fair knowledge of usingSilverlight 2.0, especially its data-binding features, and is not intended toexplain the fundamentals of using Silverlight 2.0. If you feel you need moreinformation about Silverlight 2.0, I recommend that you check Microsoft's officialSilverlight website at www.silverlight.net, which contains dozens ofSilverlight articles and videos. Another major resource for learningSilverlight 2.0 is www.silverlightshow.net, which focuses on delivering richand comprehensive tutorials about Silverlight. In addition, you can downloadthe 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 thatshows you how to implement a Master/Detail scenario using a ComboBox controltogether with a popping modal UserControl. Figure 1 shows the end result ofimplementing the Master/Detail scenario using the ComboBox control. As Figure 1shows, a user can select the employee's full name from a ComboBox control, andthe details UserControl will pop up in a modal form, showing additional detailsfor the selected employee.

The trick in showing modal UserControls is takenfrom a blog post written by Scott Guthrie, "Silverlight Tutorial Part 6:Using User Controls to Implement Master/Detail Scenarios," attinyurl.com/silverlight-tutorial6. To start with implementing the Master/Detailexample in Figure 1, we'll build the UserControl that will display the detailsof 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 placedas 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"> Grid.Column="2" Background="Beige"BorderThickness="1" /> Grid.Column="0" HorizontalAlignment="Center"VerticalAlignment="Center" /> Margin="10,0,0,0" HorizontalAlignment="Left"VerticalAlignment="Center" /> HorizontalAlignment="Center"VerticalAlignment="Center"/> Margin="10,0,0,0" HorizontalAlignment="Left"VerticalAlignment="Center" />

Figure 2: Details UserControl

This Rectangle is set to "Stretch"vertically and horizontally to spread all over the space where the UserControlis placed. In addition, its Opacity is set to a fraction of 1, which means theFill color set will be lighter hence giving the modal dialog sense, as shown inFigure 1. When the control is displayed, everything beneath it will be disabledsince the Rectangle control will fill the space behind the actual content ofthe details UserControl.

Now that the details UserControl is done, let usmove to the ComboBox control, as Figure 3 shows. The ComboBox control uses anItemTemplate to define the UI for each of its items. The ItemTemplate is set toa 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 controlThe ComboBox control sets its ItemsSource propertyto the binding markup extension and its DataContext is bound from inside thecode-behind as follows:// Get the FirstName/LastName from the Employee list var query = from e inEmployeeManager.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-IntegratedQuery (LINQ) technique, and the result is set to the ComboBox's DataContext. The details UserControl is placed as part of themain 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 getsloaded 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 eventhandler for the SelectionChanged event. This event handler, which Figure 4shows, retrieves the item selected in the ComboBox and shows the details ofthat item in the details UserControl.private void cboEmployees_SelectionChanged(object sender,SelectionChangedEventArgs e) { // Get theselected item EmployeeselectedItem = (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 handlerThe event handler starts by retrieving the selecteditem using the SelectionChangedEventArgs property, then uses AddedItems to get allthe items that were selected in the control. Next, the event handler retrieves thedetails about the record. In this case, the details are retrieved from apredefined collection, but in a more realistic scenario, detailed informationcan be retrieved from the server instead.Finally, the Visibility property of the detailsUserControl is set to "Visibility.Visible" so that the control nowshows up. The control's DataContext is set to the query results holding theinformation to show within the UserControl.Master-Detail Using RowDetailsTemplateThe Silverlight 2.0 DataGrid control provides a newand unique feature that let developers show or hide a details section for eachand every row displayed inside the DataGrid control. This feature allows inlineMaster/Detail implementation in an easy and configurable way.The DataGrid control provides theRowDetailsTemplate, so that you use this property to define the DataTemplatefor the row details section that's always displayed beneath each row inside theDataGrid control. The XAML in Figure 5 shows the definition of a DataGridcontrol 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 RowDetailsTemplateThe RowDetailsTemplate is a simple template whosevalue 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 ofthe underlying bound object.In addition to setting the RowDetailsTemplate, youcan control the visibility of the row details section by setting the value ofRowDetailsVisibilityMode property on the DataGrid control itself. This propertyis of type DataGrid RowDetailsVisiblityMode enumeration and has the followingvalues:         Collapsed: The row details section will behidden for all rows in the DataGrid.         Visible: The row details section will bedisplayed for all rows in the DataGrid.         VisibleWhenSelected: The row details section isdisplayed only for the selected rows.It's wise to set the RowDetailsVisiblityMode to the"VisibleWhenSelected"; this way, you'll have all your rows' detailssections hidden and shown only when a row or set of rows are being selected.Figure 6 shows the DataGrid control when one of itsrows is selected, where the row details section is displayed just below theselected row. One of the rows inside the DataGrid is selected, and beneath itthe row details section is shown, as it was defined inside theRowDetailsTemplate. Clicking any row shows the row details section beneath it.Figure 6:DataGrid row details sectionAs you've seen in this section, the DataGrid rowdetails feature provides an easy and implicit way to show master/detailinformation inside the DataGrid control itself. I've created a demo showing theoutput 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 usingthe Master/Detail view.Mastering Master/DetailThis article explores two different options todisplay data in Silverlight in a Master/Detail fashion. The first option is touse a ComboBox control where the user selects an item out of the ComboBox and amodal UserControl pops up, showing the details of that record selected. Anotheroption is to use the row details section, which is a newly introduced featureof the Silverlight DataGrid control. This technique provides a smart way toshow more details for a record just beneath the selected row. Whichever methodyou choose, you'll find that the DataGrid's Master/Detail view will give youmore 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 multinationalconstruction 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