Create a basic master and detail page

When working with Spry data sets, you can create master and detail dynamic regions to display more detail about your data. One region on the page (the master), drives the display of the data in another region on the page (the detail).

For an overview of how basic master and detail dynamic regions work, see Spry basic master/detail region overview and structure.

Create a data set. See Create a Spry XML data set.

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:

<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");</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">
				<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 data set. In the following example, a spry:setrow attribute (in bold) changes the current row in the data set whenever a user clicks a row in the master region table:
```
<tr spry:repeat="dsSpecials" spry:setrow="ds_Specials">
	<td>{item}</td>
	<td>{description}</td>
	<td>{price}</td>
</tr>
```
Create the detail dynamic region on the page by adding the spry:detailregion attribute to the tag that will contain the region. The attribute uses the following syntax: spry:detailregion="datasetName".
In the following example, a div tag contains the detail dynamic region:
```
<div id="Specials_Detail_DIV" spry:detailregion="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 data set.

In the example, an HTML table displays detail data from the {ingredients} column and {calories} column in the dsSpecials data set.

<div id="Specials_Detail_DIV" spry:detailregion="dsSpecials">
	<table id="Specials_Detail_Table">
		<tr>
			<th>Ingredients</th>
			<th>Calories</th>
		</tr>
		<tr>
			<td>{ingredients}</td>
			<td>{calories}</td>
		</tr>
	</table>
</div>

The completed example code binding both the master and detail dynamic regions to the dsSpecials data set would look as follows:

<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:detailregion="dsSpecials">
	<table id="Specials_Detail_Table">
		<tr>
			<th>Ingredients</th>
			<th>Calories</th>
		</tr>
		<tr>
			<td>{ingredients}</td>
			<td>{calories}</td>
		</tr>
	</table>
</div>