Or is it?? Of course not!! Buuut, while the out-of-the-box functionality of most of the current Ajax Toolkit components do some nifty things and prove useful for fundamental, non-volume or performance intensive tasks, they also leave a lot to be desired if you’re looking for more enterprise-level applicability and functionality. As a result, I have adapted 2 of the current toolkit components for my own web application purposes when I found them lacking: the ListSearch(Extender) control and the CascadingDropDown control.
The ListSearch(Extender) is a control that incorporates a behavior already found by default in the Mozilla’s browser (but not in IE 6) whereby a user can select a DropDown (or ListBox) into focus and then type characters to auto-navigate themselves to the first corresponding record within the control. IE 6’s current behavior will only ‘remember’ a single character so when the user enters ‘TRA’ to navigate themselves to the record labeled ‘Tracy’, IE will first take them to the first record beginning with ‘T’, then the first record beginning with ‘R’, and finally the first record beginning with ‘A’; NOT the desired behavior.
Enter: The ListSearch(Extender) control which alleviates this annoying behavior within IE 6 and replaces it with the expected and desired multi-character, auto-navigate behavior. Upon discovering this splendid fact, I wasted no time in implementing the control within our company websites where corporate mandates our users browse with IE 6. Unfortunately, my excitement soon faded when I realized that a number of records within my DropDown or Listbox control exceeding ~5000, the performance of the auto-navigation became increasingly slower and was virtually un-usable when all of our required ~50,000 records were included :-(.
[Sigh]…my seemingly heroic AJAX control, it would seem, is too slow to serve its purpose; what’s a girl to do? Google it!! And discover this guy’s brilliant solution and implement it - like I did (or better yet…just download the 10920 version of the Toolkit where the Mr.Brilliant has now pre-included his fix ^_^). Oh, hhhappy days are heeere agaaaaain…
Now then AJAX control #2, the handy-dandy CascadingDropDown. This control’s preliminary description lent itself to be highly useful for our gee-gan-tay search pages where our users select a bunch of different filter criteria from a bunch of different Dropdown/Listbox controls, then ‘Submit’ to obtain their associated results, only to learn that they’ve selected a combination of criteria that doesn’t exist and they’ll now have to ‘guess’ which selection item(s) need to be altered.
Anyone who’s tried to alleviate this problem by dynamically auto-populating the controls with a number of records based upon the user’s selections server-side has quickly figured out the ree-dic-u-luss postback times associated with the necessary page re-rendering.
Enter: The CascadingDropDown control which dynamically populates the Dropdown contents via JavaScript and Web Method (yippee, no more postback delay!!). But, before one begins a premature celebration, the controls’ associated DropDown can only have a single other DropDown control’s contents influencing its own contents (read: One parent). OH…the humanity of it all!! And what do we do when the standard AJAX control fails us? Google it!!
This time, however, Google did not reveal any Mr. (or Ms.) Brilliant’s to me which left me no alternative but to modify the control code myself to accommodate multiple influential parent controls.
Here is the JavaScript source file which should be the only file you need to change within the control and some examples of the new control’s use.
In a nutshell, the control behaves the same as its predecessor (so I recommend successfully implementing it before attempting this one since that will throw enough of a learning curve at you initially), with the exception of the ability to enter a comma delimited (space free!!) list of parent ID’s within the CascadingDropDown’s ParentControlID attribute rather than just a single ID value. With that, the indicated control’s associated web method will be called every-time any of those parent controls’ selected-values is changed by the user.
Due to the fact that the order in which the web methods are called must remain arbitrary, there are a few caveats to remember:
- You must always have a non-filtering, generic option appearing as the FIRST value in the dropdown that represents a ‘return all selections’ selection (All).
- In addition, this item’s Value Field must not match any of the other item’s values and it must not equal -1 (you’ll notice I used -5 in my webservice example)
- You must indicate this item as all related CascadingDropDown’s SelectedValue attribute. (see example .aspx).
- NO SPACES between the parent id’s:
o Good: ParentControlID=”ddlModel,ddlColor”
o Bad: ParentControlID=”ddlModel, ddlColor”
Otherwise, everything else works pretty much the same; you’ll still receive a semi-colon delimited list of all parent Categories and their current selected values in the knownCategoryValues parameter of the web method with which you can dynamically determine the DropDown’s contents.
As a note, testing has indicated that the Dropdown’s each seem to be good for a maximum of ~800 records before they die. I’m not sure why, but that certainly limits the usefulness of this tool.
I personally could really use an AJAX tool similar to this one without the ‘cascading’ quality. I’d like it to simply populate a single DropDownList via a Web Method (alleviating the postback), but able to handle upwards of 50,000 records without a problem. Any takers?? ^_^
Feel free to report suggestions, criticisms, observations, or questions and…happy cleaning!!
http://www.signaturesterling.com/MultiParentCascadingDropDownExtender.zip
P.S.
Just a little hint if this is the first time you’ve modified an ajax control: if you just open the entire AjaxControlToolkit solution file when you edit a control, re-building the solution will take a little while (about 15-30 seconds) regardless of the fact that Visual Studio displays ‘Ready’ in the lower-left corner. Wait until it says ‘Build Succeeded’ in the lower-left corner and the little bucket icon with the 2 moving green arrows in the bottom-middle of the screen has disappeared.