Configuring a Three-Level Master-Detail Page

Labels
AJAX(112) App Studio(7) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(183) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Friday, May 11, 2012PrintSubscribe
Configuring a Three-Level Master-Detail Page

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.

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.

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.

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.

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.

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.

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.

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.

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.