This sample demonstrates the WebObjectTree children items support for key/value pairs.
This feature allows each entry in the tree to contain a unique key and display value.
The unique key is used to identify the item, and the display value is a friendly description for the end-user.
To use children key/value pairs, the text for each item needs to be prefixed with a key string.
For example:
"[S101]Clothing & Sports"
"[S102]Home & Electronics"
When the WebObjectTree control sees all the children items in this format, it parses each item using the following form:
"[key]value".
The square brackets surround the key and the rest of the string contains the value.
This feature is especially useful for web applications that need to be localized.
When using key/value pairs, the path strings passed to and from WebObjectTree contain both components.
For example:
"/KeyValue:[S101]Clothing & Sports/KeyValue:[D102]Sports/KeyValue:[PS101]Baseball"
To simplify working with such paths, WebObjectTree implements client-side methods, namely
cwotExtractKeys,
cwotExtractValues and
cwotAppendKeyValue, for parsing and appending to these strings.
Below is a lookup table for the available key/value pairs used in this sample:
Stores |
Departments |
Products (Clothing) |
Products (Sports) |
Products (Home) |
Products (Electronics) |
Key |
Value |
Key |
Value |
Key |
Value |
Key |
Value |
Key |
Value |
Key |
Value |
S101 |
Clothing & Sports |
D101 |
Clothing |
PC101 |
Gloves |
PS101 |
Baseball |
PH101 |
Cabinet |
PE101 |
Camcorder |
S102 |
Home & Electronics |
D102 |
Sports |
PC102 |
Hat |
PS102 |
Basketball |
PH102 |
Chair |
PE102 |
Camera |
|
|
D103 |
Home |
PC103 |
Jacket |
PS103 |
Bicycle |
PH103 |
Desk |
PE103 |
Cell phone |
|
|
D104 |
Electronics |
PC104 |
Pants |
PS104 |
Football |
PH104 |
Lamp |
PE104 |
Ear buds |
|
|
|
|
PC105 |
Shirt |
PS105 |
Golf clubs |
PH105 |
Picture |
PE105 |
Laptop |
|
|
|
|
PC106 |
Shoes |
PS106 |
Helmet |
PH106 |
Plant |
PE106 |
MP3 player |
|
|
|
|
PC107 |
Shorts |
PS107 |
Ice skates |
PH107 |
Rug |
PE107 |
Tablet |
|
|
|
|
PC108 |
Socks |
PS108 |
Skateboard |
PH108 |
Sofa |
PE108 |
Television |
|
|
|
|
PC109 |
Sweater |
PS109 |
Sneakers |
PH109 |
Table |
PE109 |
Watch |
Pressing the "Submit" button simulates saving of your selection by writing the results below:
Click the "Reset" link to clear your selection.