Master details with multiple data keys

In this post, I will show you how simple it is to get many information from a single ASP.Net grid view control. To do that, we will use the Northwind sample database.

Let start first with a simple web page with only a GridView and a SqlDataSource. We use the GridView to display the data from the Orders table. After applying a little bit of style to the GridView, the web form should look like this:

Now that we have our orders displayed, the first thing we might want to show when selecting an order is the details of that selected order. To do that, we simply drag another GridView controls from the toolbox to the design surface. We use a GridView since we want to display all the order details at the same time. From the GridView smart tag, we add a new SqlDataSource and we select all fields from the “Order Details” table like this:

Then, we select the “Where” option to specify that the OrderID field should be equals to the selected OrderID of the orders GridView control.

From the previous screen shot, we can see that the value will be the “SelectedValue” property of the orders GridView control. Click Add and then OK, Next and Finish to complete the data source configuration wizard.

Now, we can view our web page in the browser to see if everything is working fine.

 

Good. From the above captures, we can see that everything work has expected. But maybe you don’t really know why!! Well if you remember, we have set the source of the select parameters for the order details data source to the property SelectedValue of our master grid view. That return the value of the first key field of the selected row. If we look at the source of our master grid view, we can remark that the DataKeyNames for that grid view is set to “OrderId”. That means that the SelectedValue property of our grid view will return the OrderId of the grid view selected row.

Now, what if we want to display also the customer information for the selected order? We can add a DetailsView control to the web form and again, use the smart tag to configure the data source. This time, we want to display data from the Customer table.

Again, for the where clause, we should specify that the CustomerId column should be equal to the orders grid view control SelectedDataKeys property. The only problem is that we cannot change source value from the wizard and by default, it uses the grid view SelectedValue property.

How can we change this value? Well even if we are using the data source configuration wizard, it doesn’t mean that we cannot change manually the code that was generated from the wizard! So let’s change the the property name of the select parameters from SelectedValue to SelectedDataKey.Value[CustomerId].

Now, if we look at the page in the browser and we select an order, you should have the following result:

You can notice that we don’t have the customer information displayed. The reason is simple, the master grid view does not have the CustomerID in his data keys. All we have to do is to add it in the grid view DataKeyNames attribute like this:

And now, we have the order details and customer information for the selected order.

Now, if I ask you how I can display the Employee information for the selected order, I’m pretty sure you all know how to do it! :)

Regards,

Bruno