Multi-value AJAX Cascading Dropdowns

Occasionally when working with multiple dependent Cascading Dropdowns, there may be instances where you need to pass multiple values to a subsequent drop-down.

Remember that AJAX cascading dropdowns by default only look at the dependent field from the previous dropdown to populate the valid values. Take for example a Report with three cascading drop-downs. One for state, one for county, and the other for city. I have built these using the standard approach to creating cascading dropdowns; My first state dropdown is a regular AJAX Dropdown, and the subsequent city and county dropdowns were created as AJAX Cascading dropdowns.

When I am selecting a county, this list is filtered based on my state that I’ve selected in the state dropdown. When I select my city, this list is filtered off the county I’ve selected. While this is the intended behavior, there are scenarios where you may run into problems and need to pass multiple values to subsequent cascading dropdowns.

Report Example

To help understand, observe the records in the underlying table that I’ve built my AJAX cascading dropdowns over:

Table data

When a user goes to select the city after choosing a state (IN) and county (Boone), the list shows all cities within Boone county.

Report Example 2

Notice however that in my table, Boone county exists in the state of Indiana and Missouri, therefore my city dropdown is showing me all cities for Boone county, irregardless of my selected state. In this case I would need to use a multi-value cascading dropdown to pass not only the selected county, but the selected state as well to my city dropdown, in order to filter my dropdown appropriately and only show me the cities within Indiana’s Boone county (those being Whitestown, Jamestown, Zionsville).

To do this first open up the Report in m-Painter. I’m going to remove my previously created AJAX Cascading Dropdown on my third level dropdown and convert this back to a normal text input (the JavaScript code I’m going to paste in the next step will handle creating the necessary dropdown at run-time).

Editing AJAX Cascading Dropdown
Remove AJAX Helper

Now you may copy and paste a little bit of Javascript into your HTML source directly before the section of your HTML where you plan on using this.

<script type=”text/javascript” src=”/mrcjava/mrcclasses/_ajax_multi_cascade.js”></script>
<script>
jQuery(function(){
     var cascadeConfig = {
          lookup:’DD.I00010s’,
          applyTo: ‘R003’,
          lookupField: ‘USCITY’,
          dependencies: [
                {
                   triggerRefresh: true,//change of this field triggers select list to populate
                   field: ‘R002’,
                    lookupField: ‘USCOUNTY’
                },
                {
                   field: ‘R001’,
                   lookupField: ‘USSTATE’
                 }
             ]
     }
      ajaxMultiCascade.initMultiCascade(cascadeConfig);
});
</script>

Once you have added this script to your application, make sure to make follow these instructions and make edits as necessary to the code:

-Change the lookup value to point to the option list template that accesses your third level dropdown (where DD is your dictionary name, followed by the retrieval application number).
applyTo: Name of field in the current app (In this case, I am applying this to a runtime record selection ‘R00#’, but this can also be applied to a field)
lookupField: Name of field in lookup (the external option list retrieval app)
triggerRefresh: set this to true on the field that you wish to trigger the new dropdown value to load. In my case, I want the city drop down to load after I have picked the county, so that’s why I have set it as the above.
field: Name of field in current app
-If you need to filter the dropdown by more than two values, simply add a new block below the state section.

Note: In the event you need to have more than just one multi-value cascading dropdown in your application (ex. there are 4 runtime value record selections; State->County->City->District and this new selection for District needs to be a multi-value cascading drop-down as well) you can reuse the above code to add an additional variable block called cascadeConfig2, which will perform the multi-value dropdown filtering for District.

<script type=”text/javascript” src=”/mrcjava/mrcclasses/_ajax_multi_cascade.js”></script>
<script>
jQuery(function(){
     var cascadeConfig2 = {
          lookup:’DD.I00020s’,
          applyTo: ‘R004’,
          lookupField: ‘DISTRICT’,
          dependencies: [
                {
                   triggerRefresh: true,//change of this field triggers select list to populate
                   field: ‘R003’,
                    lookupField: ‘USCITY’
                },
                {
                   field: ‘R002’,
                   lookupField: ‘USCOUNTY’
                 }
                {
                   field: ‘R001’,
                   lookupField: ‘USSTATE’
                }
             ]
     }
      ajaxMultiCascade.initMultiCascade(cascadeConfig2);
});
</script>

Related Posts:

  • No Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *