Using Client-Side Filtering in Cascading ASP.NET WebDropDown controls

Let’s say you have a requirement to have your application make the absolute minimum of calls to the server. One class of calls you can consider eliminating is the calls made by cascading drop down controls, which retrieve a list of items to display based on the selected item in the preceding drop down controls. Although the WebDropDown, one of the many controls in the NetAdvantage for .NET, does not provide this functionality out-of-the box, it can be easily extended to support it.

This blog post describes how the WebDropDown can be extended to support client-side item filtering. Here’s a view of the sample application screen showing the cascading drop-down list scenario:

The Approach

The approach to enabling client-side filtering is fairly simple:

1. Set the EnableAutoFiltering property of the second-level WebDropDown to Client. This enables filtering to be done on the client, as shown in the segment below:

<ig:WebDropDown ID="citiesDropDown" runat="server" Width="200px" EnableAutoFiltering="Client">
   <Items>
    ….
   </Items>
</ig:WebDropDown>

2. Add an event handler for the SelectionChanged client-side event of the first-level WebDropDown control, as shown below:

<ig:WebDropDown ID="countriesDropDown" runat="server" Width="200px">
     <Items>
      …
     </Items>
     <ClientEvents SelectionChanged="CountriesDropDown_SelectionChanged" />
</ig:WebDropDown>

3. In the event handler of the SelectionChanged of the first-level WebDropDown control, get a reference to the second WebDropDown, remove all its items, and only add those, having a value matching the selected value in the first-level WebDropDown, as implemented below:

function CountriesDropDown_SelectionChanged(sender, eventArgs)
{
    // get the text of the selected item
    var selectedCountry = sender.get_selectedItem().get_text();

    //get a reference to the second drop-down
    var citiesDropDown = $find("citiesDropDown");
    //clear all elements of the cities drop down
    citiesDropDown._elements["List"].innerHTML = '';

    var count = 0;
    //add cities elements with matching country values matching the selected country
    for (i = 0; i < citiesDropDown.get_items().get_length(); i++) {
        if (citiesDropDown.get_items().getItem(i).get_value() == selectedCountry || selectedCountry == 'All') {
            citiesDropDown._elements["List"].appendChild(citiesDropDown.get_items().getItem(i)._element);
        }
    }

    //set an empty current value
    citiesDropDown.set_currentValue("", true);
    //expand the second drop-down
    //remove this line as it only serves here to more easily show that the second drop-down has been filtered
    citiesDropDown.openDropDown();

}

Summary

Using client-side filtering in cascading WebDropDown controls is useful in scenarios where you’d like to send the control-bound data to the client in one go, and then deliver a seamless experience to the user, free of any delays for data retrieval. This blog post showed how simple it is to extend the WebDropDown to support this scenario, and adapt the control to your particular needs.