This demo shows an example of a two-tier data relationship. In these examples, I am using the xml DataBinding features in IE to represent the One To Many relationship of data in an XML file. Each of the examples allow the user to hide and show the child elements. This allows for better screen real estate and a more elegant display of the data. Below are different variations on how this can be done.
Some of the variations are displayed below:
Details at the top and parent/child table at the bottom (without scrolling child elements)
Details at the top and parent/child table at the bottom(with scrolling child elements)
Details at the bottom and parent/child table at the top(with scrolling child elements)
As part of this demo, you will see examples of various useful functionality that can be used in numerous scenarios:
- Paging. 5 categories are displayed on each page, allowing the user to page backwards and forwards between pages of quotes.
- Using DIVs on the detail listing so that the paging can scroll more elegantly.
- Loading a combobox from an xml string and javascript.
- Using CSS to set the background image for a table cell.
- Using CSS to set the behavior of a cell via. an HTC. I use 3 HTCs in this demo:
- InputText.htc - Used for changing the background color of a textbox as it receives and loses focus.
- Highlight.htc - Used to highlight the row of a table as the user mouses over it.
- Hover.htc - To display a table cell as raised when the mouse moves over it.
- You can click on the expand all button to expand all child elements
- You can click on the "X" icon to call a function to delete a record
- You can click on a folder icon to display a new screen of all emenets for a given category
- You can click on a row to display all of the details for that row
I think that you will be surprised at how little code is required to accomplish all of this. The style of coding is also consistent throughout the demo to allow for easy readability and maintenance. This demo can be used as a template for similar data entry scenarios that have a master/detail relationship.
TwoTier.zip
|