Synchronizing Master-Detail Web Forms DataGrids

The code-behind file contains four event handlers and a single method: Page.Load Calls the CreateDataSource method and binds the parent data to the parent Web Forms DataGrid, if the pag

[ Team LiB ]

Recipe 7.6 Synchronizing Master-Detail Web Forms DataGrids

Problem

You need to create a master-detail pair of DataGrid controls and synchronize them so that when you select a record in the master, the child grid is updated with the corresponding records

Solution

Fill a DataSet with results from both tables, and create the necessary relations before binding the DataGrid to the DataSet

The code for the Web Forms page is shown in Example 7-11

Example 7-11 File: ADOCookbookCS0706.aspx

<form id="ADOCookbookCS0706" method="post" runat="server">

<asp:HyperLink id="HyperLink1"

style="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 24px"

runat="server" NavigateUrl="default.aspx">

Main Menu

</asp:HyperLink>

<br>

<br>

<br>

<asp:DataGrid id="ordersDataGrid" runat="server" PageSize="5"

AllowPaging="True">

<SelectedItemStyle BackColor="#80FF80"></SelectedItemStyle>

<AlternatingItemStyle BackColor="#FFFF99"></AlternatingItemStyle>

<Columns>

<asp:ButtonColumn Text="Detail" CommandName="Select">

</asp:ButtonColumn>

</Columns>

</asp:DataGrid>

<br>

<br>

<asp:DataGrid id="orderDetailsDataGrid" runat="server" PageSize="2"

AllowPaging="True" Width="200px">

<AlternatingItemStyle BackColor="#FFFF99"></AlternatingItemStyle>

</asp:DataGrid>

</form>

The code-behind file contains four event handlers and a single method:

Page.Load

Calls the CreateDataSource( ) method and binds the parent data to the parent Web Forms DataGrid, if the page is being loaded for the first time

CreateDataSource( )

This method fills a DataSet with the Orders table and the Order Details table from the Northwind sample database, creates a relation between the tables, and stores the DataSet to a Session variable to cache the data source for both parent and child DataGrid objects

Orders DataGrid.SelectedIndexChanged

Gets the cached data from the Session variable If a row is selected in the Orders data grid, a DataView is created containing Order Details for the row selected in the Orders data grid and bound to the Order Details data grid; otherwise the Order Details data grid is cleared

Orders DataGrid.PageIndexChanged

Sets the SelectedIndex to -1 so that no Order is selected after the page is changed The cached data is retrieved from the Session variable, the new page index for the Orders data grid is set, and the data is bound

Order Details DataGrid.PageIndexChanged

Gets the cached data from the Session variable, creates a DataView containing Order Details for the row selected in the Orders data grid, sets the new page index for the Order Details data grid, and binds the data

The C# code for the code-behind is shown in Example 7-12

Example 7-12 File: ADOCookbookCS0706.aspx.cs

// Namespaces, variables, and constants

using System;

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

//

if(!Page.IsPostBack)

{

DataSet ds = CreateDataSource( );

// Bind the Orders data grid

ordersDataGrid.DataSource = ds.Tables["Orders"].DefaultView;

ordersDataGrid.DataKeyField = "OrderID";

Page.DataBind( );

}

private DataSet CreateDataSource( )

{

DataSet ds = new DataSet( );

// Create a DataAdapter and fill the Orders table with it

SqlDataAdapter da = new SqlDataAdapter("SELECT * FROM Orders", ConfigurationSettings.AppSettings["DataConnectString"]);

da.FillSchema(ds, SchemaType.Source, "Orders");

da.Fill(ds, "Orders");

// Create a DataAdapter and fill the Order Details table with it

da = new SqlDataAdapter("SELECT * FROM [Order Details]",

ConfigurationSettings.AppSettings["DataConnectString"]);

da.FillSchema(ds, SchemaType.Source, "OrderDetails");

da.Fill(ds, "OrderDetails");

// Add a relation between parent and child table

ds.Relations.Add("Order_OrderDetail_Relation",

ds.Tables["Orders"].Columns["OrderID"],

ds.Tables["OrderDetails"].Columns["OrderID"]);

// Store data in session variable to store data between

// posts to server

Session["DataSource"] = ds;

return ds;

}

private void ordersDataGrid_SelectedIndexChanged(object sender,

System.EventArgs e)

{

// Get the Orders data view from the session variable

DataView dv =

((DataSet)Session["DataSource"]).Tables["Orders"].DefaultView;

// Bind the data view to the Orders data grid

ordersDataGrid.DataSource = dv;

// Bind the default view of the child table to the DataGrid

if(ordersDataGrid.SelectedIndex != -1)

{

// Get the OrderID for the selected Order row

int orderId =

(int)ordersDataGrid.DataKeys[ordersDataGrid.SelectedIndex];

// Get the selected DataRowView from the Order table

dv.Sort = "OrderID";

DataRowView drv = dv[dv.Find(orderId)];

// Bind the child view to the Order Details data grid

orderDetailsDataGrid.DataSource =

drv.CreateChildView("Order_OrderDetail_Relation");

// Position on the first page of the Order Details grid

orderDetailsDataGrid.CurrentPageIndex = 0;

}

else

orderDetailsDataGrid.DataSource = null;

Page.DataBind( );

}

private void ordersDataGrid_PageIndexChanged(object source,

System.Web.UI.WebControls.DataGridPageChangedEventArgs e) {

// Deselect Orders row after page change

ordersDataGrid.SelectedIndex = -1;

// Get the Orders data from the session variable

DataView dv =

((DataSet)Session["DataSource"]).Tables["Orders"].DefaultView;

// Bind the data view to the data grid

ordersDataGrid.DataSource = dv;

// Update the current page in data grid

ordersDataGrid.CurrentPageIndex = e.NewPageIndex;

Page.DataBind( );

}

private void orderDetailsDataGrid_PageIndexChanged(object source,

System.Web.UI.WebControls.DataGridPageChangedEventArgs e)

{

// Get the Orders data view from the session variable

DataView dv =

((DataSet)Session["DataSource"]).Tables["Orders"].DefaultView;

// Get the OrderID for the selected Order row

int orderId =

(int)ordersDataGrid.DataKeys[ordersDataGrid.SelectedIndex];

// Get the selected DataRowView from the Order table

dv.Sort = "OrderID";

DataRowView drv = dv[dv.Find(orderId)];

// Bind the child view to the Order Details data grid

orderDetailsDataGrid.DataSource =

drv.CreateChildView("Order_OrderDetail_Relation");

// Update the current page index

orderDetailsDataGrid.CurrentPageIndex = e.NewPageIndex;

orderDetailsDataGrid.DataBind( );

}

Discussion

Unlike the Windows Forms DataGrid control, the Web Forms DataGrid control does not inherently support master-detail views of data Instead, you must use two Web Forms DataGrid controls and programmatically synchronize them

The master and child data DataGrid controls in this solution each display one DataTable from a DataSet Displaying and paging through the data in each of the grids is

fundamentally the same as shown in Recipe 7.4

The SelectedIndexChanged event handler keeps the two data grids synchronized When a new item is selected in the Orders DataGrid, the Order data is retrieved from the cached data in the Session variable and bound to the Order DataGrid The OrderID is obtained from the DataKeys collection for the selected row and used to create a child DataView of the Order Details records that is bound to the Order Details DataGrid

For information about master-detail data using the Windows Forms DataGrid, see Recipe 2.22

[ Team LiB ]