Jim's Blog Ramblings about novels, comics, programming, and other geek topics

How to append options to CascadingDropDown after initially populated via AJAX Web Service

The setup: Microsoft ASP.NET and AJAX Control Toolkit components

I needed to add additional dropdown options to a DropDownList web control in use by the Ajax Control Toolkit CascadingDropDown ASP.NET AJAX extender. The CascadingDropDown provided a means to get an automatic population of a set of options called by the web service. This AJAX call also passes in the parent item, so that the list items cascade (show items related to the parent control).

An example could be 2 drop down lists: Automobile Make and Automobile Model. If the user selects “Ford” from the Automobile Make drop down list, then only Ford models are listed in the Automobile Model drop down list. If the user changes the Automobile Make to “Honda”, then the items in the Automobile Model changes to show only Honda models.

I needed a way to append an “All” option to the drop down list, but I didn’t want to automatically include “All” as valid option in my Web Service. I wanted to append it on a specific form rather than as part of the data feed.

To start, you need to have a working set of CascadingDropDown web controls. I’m not to explain that set up, because you need to figure out that before you can add additional elements.

Step 1 Update your CascadingDropDown

The BehaviorID value of your CascadingDropDown web control should also be populated with a text value. This value can be the same as your control’s ID value.

<ajaxToolkit:CascadingDropDown ID="cddAutoMake"
    runat="server"
    TargetControlID="ddlAutoMake"
    ...

    BehaviorID="cddAutoMake" />

<ajaxToolkit:CascadingDropDown ID="cddAutoModel"
    runat="server"
    TargetControlID="ddlAutoModel"
    ...
    BehaviorID="cddAutoModel" />

 

Step 2 Adding custom JavaScript

You can add your JavaScript in the code behind and register it or just add it to the form. Here’s the code that you need to modify:

function addCascadingDropDownPopulatedHandler(behaviorId, populatedEventHandler) {

    var behavior = $find(behaviorId);

    if (behavior != null) {

        behavior.add_populated(populatedEventHandler);

    }

}

 

function addAllOption(dropdownListId) {

    var dropdownList = document.getElementById(dropdownListId);

    for (var i = 0; i < dropdownList.length; i++)

       if (dropdownList.options[i].text == "All"){

          return;

       }

    }

    var opt = document.createElement("option");

    opt.text = "All";

    opt.value = "*";

    dropdownList.options.add(opt, 1);

}

 

function pageLoad(sender, args) {

    addCascadingDropDownPopulatedHandler('<%= this.cddAutoMake.BehaviorID %>', function () { addAllOption('<%= this.ddlAutoMake.ClientID %>'); });

    addCascadingDropDownPopulatedHandler('<%= this.cddAutoModel.BehaviorID %>', function () { addAllOption('<%= this.ddlAutoModel.ClientID %>'); });

}

 

The pageLoad function is called by the AJAX Control Toolkit framework when on the page load event. This function then passes the Behavior IDs and a JavaScript inline function with the ClientID as a parameter to the addCascadingDropDownPopulatedHandler function.

The addCascadingDropDownPopulatedHandler finds the CascadingDropDown behavior and adds the new function as the populated event handler. This new function (passed via the pageLoad) contains the ClientID of the dropdown, so we can know the sender/source of the request.

The addAllOption function (created inline in the pageLoad function) passes the ClientID of the dropdown element. When the populated event is called, it then calls the addAllOption and passes the ClientID value as the parameter. This function then finds the element via getElementById, creates a new option, and adds the new option to the dropdown list control at position 1. If you are not using a PromptText value, then you should set the position to 0.

 

Alternate Solutions

You can edit the AJAX Control Toolkit source code to add in better support for events as shown by Pavlo Pidoprygora at CascadingDropDown: passing additional info and adding own events.

 

References

• “CascadingDropDown: passing additional info and adding own events” (February 2007)
• CascadingDropDown Description (ASP.NET)
• CascadingDropDown Reference (ASP.NET)