Main page

Implementing dependent drop-down menus (dependent listboxes)

Description

This example shows how to implement dependent listboxes.

Usage

Select a category and then a product to view product details.

Steps to recreate

1. 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 both fields.
   • 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.
2. 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.
3. 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 search form.
   • Change the label control  Image_Url to an image control.
4. Switch to the HTML mode and add the JavaScript code before the </head> tag as shown in the example, excluding the block of code between <!-- BEGIN Grid store_products1 --> and <!-- END Grid store_products1 -->
5. Use the following steps to create an invisible grid within the JavaScript section, which will be used to output a JavaScript array with all product 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 Message options.
   • 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.
6. Add <span id="Products"> and </span> tags into the store_products grid, as can be seen in the HTML code of the example.
7. Modify the HTML near the s_category_id listbox by adding the following code included in the example:onchange="set_child_listbox(this, document.store_productsSearch.s_product_id,Product,'Products');".
   Similarly, near the s_product_id listbox add onchange="reload_page();" as shown in the example.
8. Make cosmetic changes as needed by modifying the text and captions within the HTML.

Database Tables used

Database: Internet

Tables: store_categories, store_products

Events Used

No CCS events were used, however two JavaScript onchange events with corresponding JavaScript functions were placed directly in HTML.