Create an advanced master and detail page

You can create master and detail relationships that involve more than one data set. For an overview of how such relationships work, see Spry advanced master/detail region overview and structure.

Familiarize yourself with the structure of the data (for example, the structure of an XML file) used in creating the data set. You’ll need to understand the structure to make one data set depend on another.
Create a data set by adding the appropriate code to the head of your document. (See Working with Spry data sets.) This is the master data set.
Create a second data set (the detail data set) immediately following the master data set you just created. The URL or XPath in the constructor of the detail data set contains a data reference to one or more of the columns in the master data set. The data reference uses the following syntax: {MasterDatasetName::columnName}.
In the following example, the third script block contains the statement that creates two data sets, one called dsSpecials (the master) and one called dsIngredients (the detail):
```
<head>
. . .
<script type="text/javascript" src="../includes/xpath.js"></script>
<script type="text/javascript" src="../includes/SpryData.js"></script>
<script type="text/javascript">
		var dsSpecials = new Spry.Data.XMLDataSet("data/cafetownsend.xml", "specials/menu_item");
		var dsIngredients = new Spry.Data.XMLDataSet("data/{dsSpecials::url}", "item/ingredients/ingredient");
</script>
</head>
```
The path to the data source (in this case, an XML file) for the dsIngredients detail data set contains a data reference ({dsSpecials::url}) to the dsSpecials master data set. More specifically, it contains a data reference to the url column in the dsSpecials data set. When the url or XPath argument in the constructor that creates a data set contains a reference to another data set, the data set being created automatically becomes an observer of the data set it’s referencing.

Create the master region by adding the spry:region attribute to the HTML element that will act as the container tag for the region. See Create a Spry dynamic region and display data.

In the following example, a master dynamic region displays repeated data from the dsSpecials data set:

<body>
	<div id="Specials_DIV" spry:region="dsSpecials">
		<table id="Specials_Table">
			<tr>
				<th>Item</th>
				<th>Description</th>
				<th>Price</th>
			</tr>
			<tr spry:repeat="dsSpecials">
				<td>{item}</td>
				<td>{description}</td>
				<td>{price}</td>
			</tr>
		</table>
	</div>
</body>

Add an attribute that will allow users to change the current row in the master data set. In the following example, a spry:setrow attribute (in bold) changes the current row in the dsSpecials data set whenever a user clicks a row in the master region table:
```
<tr spry:repeat="dsSpecials" spry:setrow="dsSpecials">
	<td>{item}</td>
	<td>{description}</td>
	<td>{price}</td>
</tr>
```
Create the detail dynamic region on the page by adding the spry:region attribute to the tag that will contain the region. The attribute uses the syntax spry:region="datasetName".
Note: When creating master and detail relationships using two or more data sets, it is not necessary to use the spry:detailregion attribute as is outlined in Create a basic master and detail page. Because the current row of the detail data set never changes (it’s the current row of the master data set that changes), the spry:region attribute suffices. For more information, see Spry advanced master/detail region overview and structure.

In the following example, a div tag contains the detail dynamic region:
```
<div id="Specials_Detail_DIV" spry:region="dsSpecials">
</div>
```

Within the tag containing the detail dynamic region, insert an HTML element to display the detail data from the current row of the master data set.

In the example, an HTML table displays detail data from the {name} column in the dsIngredients data set. The dsIngredients data set creates the {name} column based on the information it receives from the dsSpecials data set.

<div id="Specials_Detail_DIV" spry:region="dsIngredients">
	<table id="Specials_Detail_Table">
		<tr>
			<th>Ingredients</th>
		</tr>
		<tr spry:repeat=”dsIngredients”>
			<td>{name}</td>
		</tr>
	</table>
</div>

The completed example code binding the master region to the dsSpecials data set, and detail region to the dsIngredients data set, would look as follows:

<head>
. . .
<script type="text/javascript" src="../includes/xpath.js"></script>
<script type="text/javascript" src="../includes/SpryData.js"></script>
<script type="text/javascript">
		var dsSpecials = new Spry.Data.XMLDataSet("data/cafetownsend.xml", "specials/menu_item");
		var dsIngredients = new Spry.Data.XMLDataSet("data/{dsSpecials::url}", "item/ingredients/ingredient");
</script>
</head>
. . .
<body>
	<div id="Specials_DIV" spry:region="dsSpecials">
		<table id="Specials_Table">
			<tr>
				<th>Item</th>
				<th>Description</th>
				<th>Price</th>
			</tr>
			<tr spry:repeat="dsSpecials" spry:setrow="dsSpecials">
				<td>{item}</td>
				<td>{description}</td>
				<td>{price}</td>
			</tr>
		</table>
	</div>
	<div id="Specials_Detail_DIV" spry:region="dsIngredients">
		<table id="Specials_Detail_Table">
			<tr>
				<th>Ingredients</th>
			</tr>
			<tr spry:repeat=”dsIngredients”>
				<td>{name}</td>
			</tr>
		</table>
	</div>
. . .
</body>