Main page

Implementing multiple dependent drop-down menus (three dependent listboxes)

Description

This example shows how to implement dependent listboxes.

Usage

Select "Computers and Internet" and then "Software" to view the list of related items. Then click on an item to see its details.

Steps to recreate

1. Use Grid Builder to create the directory_items_states grid (based on the directory_items table in the Internet database) and the search form that includes the category_id and item_id fields.
   • On Step 2 use the 'Build Query' option and select 2 tables: directory_items and states , then select from the directory_items table the fields desired for the grid that will show item details. Also select the state_name field from the states.
   • On Step 3 select ListBox in the 'Control Type' field for both search 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 as the Grid layout.
2. While in the design mode, modify the search form as follows:
   • Insert a new row into the record form (select "Insert row" from the context menu shown on right mouse click) below item_id .
   • Add the s_subcategory_id listbox from the Forms tab of the Toolbox.
   • For the s_category_id listbox, set the Connection property to InternetDB, select directory_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. Then open the 'Data Source' dialog and add the following Where parameters:
     - category_id (is null) , with the Parameter Source set to 1 and Parameter Source Type set to Expression. Also set And/Or property to Or.
     - category_id_parent equals(=) 0, with the Parameter Source   Type set to Expression.
   • For the s_subcategory_id listbox, set the Connection property to InternetDB, select directory_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. Then open the 'Data Source' dialog and add the following Where parameter:
     - category_id equal(=) s_category_id , Parameter Source Type set to to Url and Default Value set to -1.
   • For the s_item_id listbox, set the Connection property to InternetDB , select directory_items in the Data Source property, item_id in the Bound Column property, item_name in the Text Column property and integer in the Data Type property. Then open the 'Data Source' dialog and create the following Where parameter:
     - category_id (is not null) s_subcategory_id, Parameter Source Type set to Url.
3. Modify the grid to retrieve values matching the last listbox selection:
   
   • Open the 'Data Source' dialog from the Data Source property, remove the parameter  category_id equals(=) category_id , then change the Default Value of the parameter  item_id equals(=) s_item_id  to -1, so that no records are shown until product_id is selected.
   • Change the Url label to a link control.
4. Switch to the HTML mode and before the </head> tag add the JavaScript code as shown in the example, excluding the block of code between <!-- BEGIN Grid directory_categories --> and <!-- END Grid directory_items -->.
5. Use the following steps to create two invisible grids within the JavaScript section, which will be used to output JavaScript arrays containing product categories, subcategories and items:
   • Use Grid Builder to create the directory_categories grid based on the directory_categories table.
   • On Step 2 of the buider select category_id, category_id_parent and category_name fields, then  select category_name in Order By.
   • On Step 4 select No Sorting and No Page Navigator . Also leave blank Records Per Page and No Records Found Message options.
6. Delete all HTML tags from the new grid, then add the code <!-- BEGIN Separator -->,<!-- END Separator --> after the Row block.
7. Enter var SubCategory = new Array( before the Row block and ); after the Separator block.
8. Inside the Row block add new Array( ) and comma separators (,). Also enclose the label in single quotes as it will output text values.
9. Use Grid Builder to create the 2nd grid, directory_items , based on the directory_items table.
   • On Step 2 of the buider select item_id, category_id and item_name fields, then select item_name in Order By .
   • On Step 4 select No Sorting and No Page Navigator . Also leave blank Records Per Page and No Records Found Message options.
10. Delete all HTML tags from the new grid, then add the code <!-- BEGIN Separator -->,<!-- END Separator --> after theRow block.
11. Enter var Items = new Array before the Row block and ); after the Separator block.
12. Inside the Row block add new Array( ) and comma separators (,). Also enclose the label in single quotes as it will output text values.
13. Add <span id="Items"> and </span> tags into the directory_items_states grid, as can be seen in the HTML code of the example.
14. Add the Before Show event code to the grid as shown, or copy it from the example.
15. Modify the HTML code near the s_category_id listbox by adding the following code included in the example: onchange="set_child_listbox(this, document.directory_items_statesSearch.s_subcategory_id,SubCategory,'Items');".
    Similarly, near the s_subcategory_id listbox add onchange="set_child_listbox(this, document.directory_items_statesSearch.s_item_id,Items,'Items');" as shown in the example.
    Then near the s_item_id listbox add onchange="reload_page();" as shown in the example.
16. Make cosmetic changes as needed by modifying the text and captions within the HTML.

Database Tables used

Database: Internet

Tables: directory_categories, directory_items, states

Events Used

Server Side

Grid's Before Show event - used to hide the Grid when no matching records are found.

Client Side

The following JavaScript functions executed via onchange events were placed directly in HTML:

• disable_child_listbox function - disables child listboxes if nothing is selected in the parent listbox
• reload_page function - reloads the page when a selection in the 3rd listbox is made
• set_child_listbox function - repopulates child listbox when a selection in parent listbox is made