BizTalk Utilities CV ,   Jobs ,   Code library
 
Home Page


Add/Edit your code items
Search the code library
Browse for the code library

JavaScript

JavaScript

JavaScript Contents

Escape special characters using JavaScript and regular expressions
Sticky Table Headers
Dynamically Filling HTML Select Box from XML Data Island using Javascript.
XML Basics Handbook
 
 

 LAMP >>

By David Silverlight
First Posted 04/25/2003
Times viewed 199

Two Tier Data Islands with Expanding/Collapsing Child elements.

This post contains attachments
v20030425122454.zip 

Summary This snippet how to use XML Data Islands in IE to display XML that stores a parent-child relationship. It also demonstrates how you can expand/collapse child elements for a cleaner display of your data.

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.

Rate this article on a scale of 1 to 10 (0 votes, average 0)

Your vote :  

 LAMP >>



Leave a comment for this article
Your name
Your email (optional)
Your comment
Optional: Upload an attachment
Enter the code shown:

 
 

    Email TopXML