Implementing dependent drop-down menus (dependent listboxes)
This example shows how to implement dependent listboxes.
Select a category and then a product to view product details.
Steps to recreate
- Use Grid Builder to create the store_products grid (based on
the store_products table in the Internet database) and the
search form that includes category_id and product_id fields.
- On Step 3 select ListBox in the Control Type field for
- On Step 4 select No Sorting and No Page Navigator. Also
enter 1 in the Records Per Page property so that only one
record is displayed on a page.
- On Step 5 select Columnar in the Grid layout listbox.
- While in the Design mode, modify properties of the following fields within
the search form:
- For the s_project_id listbox, set the Connection property
to InternetDB , select store_categories in the Data Source property, category_id in
the Bound Column property, category_name in the Text Column property
and integer in the Data Type property.
- For the s_product_id Listbox, set the Connection property
to InternetDB , select store_products in the Data Source property, product_id in
the Bound Column property, product_name in the Text Column Property
and integer in the Data Type property. Then open the 'Data
Source' window by clicking on the [...] button next to the Data Source property,
add a Where parameter with the condition: category_id equals(=)
s_category_id and set the Parameter Source Type to URL.
- Modfy the grid as follows:
- Open the 'Data Source' window by clicking on the [...] button next to
the Data Source property, then change the the Default Value of
the Where parameter 'product_id equals(=) s_product_id' to -1 ,
so that no records are shown until product_id is specified in the
- Change the label control Image_Url to an image control.
</head> tag as shown in the example, excluding the block of code
between <!-- BEGIN Grid store_products1 --> and <!-- END Grid
categories and product names.
- While in the HTML mode position the cursor before the </script>
tag and use Grid Builder to create the store_products1 grid
that is based on the store_products table.
- On Step 2 of the builder select the fields product_id, category_id and product_name and
in the Order By select product_name.
- On Step 4 select No Sorting and No Page Navigator . Also
leave blank Records Per Page property and No Records Found
- Delete all HTML tags from the new grid, then add the code <!--
BEGIN Separator -->,<!-- END Separator --> after the Row block.
- Enter var Product = new Array( before the Row block
and ); after the Separator block.
- Inside the Row block add new Array( ) and comma
separators (, ). Also enclose the label
in single quotes as it will output text values.
- Add <span id="Products"> and </span> tags
into the store_products grid, as can be seen in the HTML code
of the example.
- Modify the HTML near the s_category_id listbox by adding the
following code included in the example:onchange="set_child_listbox(this,
Similarly, near the s_product_id listbox add onchange="reload_page();"
as shown in the example.
- Make cosmetic changes as needed by modifying the text and captions within
Database Tables used
Tables: store_categories, store_products