Editor’s note: This article was originally published March 27, 2007.

In this article, I combine the GridView, DetailsView, and FormView data controls to provide a drill down option for the GridView control, giving users a more detailed look at individual data rows.

The master

The DetailsView and FormView controls are great at displaying single records from a backend data source, but it’s not practical to force a user to page through an endless number of records. For this reason, it’s possible to combine the GridView control with a DetailsView or FormView control to allow a user to select an individual column from the GridView control and view or manipulate its contents with a DetailsView or FormView control. So, the GridView is the master, while details are displayed via the other controls.

The first step with this approach is making the individual rows within a GridView control selectable (i.e., allow the user to select the row for display in another control). In addition, the GridView control’s SelectedRowStyle property may be used to visually style the selected row, so the user knows or can easily remember what row is currently selected.

A command field is used to facilitate row selection. The ShowSelectButton property of the CommandField element makes it the element for row selection. The CommandField’sButtonType property allows you to control how the selection is made. When a row is selected, the DataKeyNames property of the GridView control specifies what value is assigned to that selection-the value that may be passed to another control via the selection event.

When a GridView row’s Select button is clicked, a postback ensues and the GridView’sSelectedRow property is updated. In addition to the SelectedRow property, the GridView provides the SelectedIndex, SelectedValue, and SelectedDataKey properties. The SelectedIndex property returns the index of the selected row, whereas the SelectedValue and SelectedDataKey properties return values based upon the GridView’sDataKeyNames property.

The details

Now that the master GridView control is set up, the next step is adding a DetailsView or FormView control to display data from the selected row. For our example, a DetailsView control will be added to the same page as the GridView. In addition, the DetailsView needs a data source, so another SQL Server data source is required. I want the DetailsView control to display the data for the row selected in the GridView control, so the selected id will be passed.

The best way to demonstrate the marriage of a GridView control with other data controls is with example code. The following GridView control connects to SQL Server and displays data from the Northwind database. It utilizes three controls: DropDownList, GridView, and DetailsView.

The DropDownList lets the user specify the data to load into the GridView control. The user selects a city, and the corresponding employee data is loaded. Consequently, the details of a specific employee are displayed in a DetailsView control when the record is selected in the GridView control via the command button that is displayed as a link labeled Select. Also, the selected row is highlighted in yellow to let the user easily identify which row was selected.

The code uses three SqlDataSource objects to load the data for each control. The GridView control uses the selected value from the DropDownList control in its SQL. This is accomplished by passing the value from the DropDownList control to the SQL via the SelectParameters element of the SqlDataSource control as the code in Listing A demonstrates.

The ControlParameter element allows you to pull data from another control on the form by specifying its id and the property you want to use. The name assigned to the ControlParameter is used in the SelectCommand property of the SqlDataSource object. Also, the key value is passed from the GridView to the DetailsView control via a ControlParameter element as the SelectedValue property is passed. The SelectedValue of the selected GridView row is assigned using the DataKeyNames value specified for the GridView control. In addition to pulling data from controls, you may also use data from the QueryString, cookies, and many more options.

Listing B contains the full source code for the page with the three controls and the objects for loading the data. This example demonstrates the use of data controls to drill down on data without any coding required. Each control provides plenty of events that may be coded to accomplish the same tasks covered in this article, as well as many more tasks.

More powerful interfaces

ASP.NET 2.0 includes a variety of new data controls with GridView leading the way. It allows you to easily display a set of data from a backend data source. You can also combine GridView with other controls like DetailsView or FormView to let users drill down into specific data elements and display the data for editing or viewing within its own area on a form or a separate form.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.


Get weekly development tips in your inbox
Keep your developer skills sharp by signing up for TechRepublic’s free Web Developer newsletter, delivered each Tuesday. Automatically subscribe today!