WebDrillDown Studio
Select product:
  Reset
Popup Key/Value Pairs:
This sample demonstrates the WebDrillDown popup menu support for key/value pairs. This feature allows each entry in the popup menu 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 popup 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 WebDrillDown 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 WebDrillDown contain both components. For example:

"/KeyValue:[S101]Clothing & Sports/KeyValue:[D102]Sports/KeyValue:[PS101]Baseball"

To simplify working with such paths, WebDrillDown implements client-side methods, namely cwddExtractKeys, cwddExtractValues and cwddAppendKeyValue, 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.
Control being used:
View the code:
The code is available in the samples directory under:
/BasicFeatures
    /PopupKeyValuePairs