Master-detail relationships are present in all database web applications. Code On Time automatically generates two-level master-detail page layouts from your database.
You can also create three or more levels of master-detail relationships. For example, view the diagram from the Northwind database below. Order Details table references Orders table, which references Customers.
![Customers, Orders, and Order Details table relationships in the Northwind database. Customers, Orders, and Order Details table relationships in the Northwind database.](/blog/2012/05/configuring-three-level-master-detail/image02.png)
Let’s create a master-detail page that allows the user to select the customer, the order, and then view the order details.
Create a Northwind web application. Start the Project Designer. In the Explorer, right-click on Home page node and choose New Page option.
!['New Page' option in Code On Time Project Explorer. 'New Page' option in Code On Time Project Explorer.](/blog/2012/05/configuring-three-level-master-detail/image04.png)
Give this new page the following properties:
Property | Value |
Name | ThreeLevelMasterDetail |
Index | 1005 |
Title | Three-Level Master-Detail |
Path | Three-Level Master-Detail |
Style | Miscellaneous |
About This Page | This page will demo a three level master-detail data layout. |
Roles | (blank) |
Press OK to save the page.
Let’s add containers to hold the master and detail data views. In the Project Explorer, right-click on Three-Level Master-Detail page node, and select New Container.
!['New Container' option for 'Three-Level Master-Detail' page in Project Explorer. 'New Container' option for 'Three-Level Master-Detail' page in Project Explorer.](/blog/2012/05/configuring-three-level-master-detail/image06.png)
Give this container the following properties:
Property | Value |
Flow | New Row |
Press OK to save the container. Create two more containers:
Property | Value |
Flow | New Row |
CSS Style Properties | padding-top:8px; |
Property | Value |
Flow | New Row |
CSS Style Properties | padding-top:8px; |
Let’s add a data view in each container. Right-click on Three-Level Master-Detail / c100 container node, and select New Data View option.
!['New Data View' option for 'c100' container in the Project Explorer. 'New Data View' option for 'c100' container in the Project Explorer.](/blog/2012/05/configuring-three-level-master-detail/image08.png)
Give the new data view the following properties:
Property | Value |
Controller | Customers |
View | grid1 |
Text | Customers |
Show in Summary | True |
Page Size | 5 |
Press OK to save the data view. Right-click on Three-Level Master-Detail / c101 container node, and choose New Data View.
!['New Data View' option for 'c101' container in the Project Explorer. 'New Data View' option for 'c101' container in the Project Explorer.](/blog/2012/05/configuring-three-level-master-detail/image10.png)
Give the data view the following properties. The Filter Field is a field in the child view that match the primary key of the master view.
Property | Value |
Controller | Orders |
View | grid1 |
Text | Orders |
Page Size | 5 |
Show View Selector | False |
Filter Source | dv100 |
Filter Field #1 | CustomerID |
Auto Hide | Container |
Press OK to save. Create one more data view by right-clicking on Three-Level Master-Detail / c102 container node and selecting New Data View.
!['New Data View' option for 'c102' container in the Project Explorer. 'New Data View' option for 'c102' container in the Project Explorer.](/blog/2012/05/configuring-three-level-master-detail/image12.png)
Use the following properties:
Property | Value |
Controller | OrderDetails |
View | grid1 |
Text | Details |
Page Size | 5 |
Show View Selector | False |
Filter Source | dv101 |
Filter Field #1 | OrderID |
Auto Hide | Container |
Press OK to save the data view. On the tool bar, press Browse to generate the application.
When it opens in your default browser, navigate to the Three-Level Master-Detail page.
![Select a Custom from the list on the Three-Level Master-Detail page. Select a Custom from the list on the Three-Level Master-Detail page.](/blog/2012/05/configuring-three-level-master-detail/image14.png)
First, select a Customer from the list. A child data view will open underneath, showing Orders.
![Upon selecting a Customer from the list, Orders data view will be displayed. Upon selecting a Customer from the list, Orders data view will be displayed.](/blog/2012/05/configuring-three-level-master-detail/image16.png)
Select an Order, and a list of Order Details will appear below.
![All three data views visible in the master-detail relationship on the Customers page. All three data views visible in the master-detail relationship on the Customers page.](/blog/2012/05/configuring-three-level-master-detail/image18.png)
![All three data views visible in the master-detail relationship on the Customers page. All three data views visible in the master-detail relationship on the Customers page.](/blog/2012/05/configuring-three-level-master-detail/image19.png)