The WebDropDown is heavily geared to talk to the server for all of its needs, but if you should need to use the control in a heavily client-side capacity, here's a little something I put together that can replace the drop-down list on the client side. NOTE: It uses internal calls and pieces and will thus be fairly future-fragile.
function clientSideDropDownReplaceItems(dropDown, choices) { var tempProps = new Object(); // Clone the value properties jQuery.extend(true, tempProps, dropDown._dataStore); tempProps[2][0] = new Array(); var html = ""; var itemClass = dropDown._get_clientOnlyValue("dropDownItemClass"); for (var i = 0; i < choices.length; i++) { tempProps[2][0][i] = new Array(); tempProps[2][0][i][0] = new Array(); tempProps[2][0][i][0][$IG.DropDownItemProps.Text[0]] = choices[i][0]; tempProps[2][0][i][0][$IG.DropDownItemProps.Value[0]] = choices[i][1]; tempProps[2][0][i][1] = { c: { hoverCssClass: "", cssClass: "", disabledCssClass: "", activeCssClass: "", selectedCssClass: "" } }; html += '<li '; if (itemClass) html += 'class="' + itemClass + '" '; html += 'id="x:' + i + '.1:adr:' + i + '"><a href="BLOCKED SCRIPTvoid(0)">' + choices[i][0] + '</a></li>\n'; } dropDown._elements["List"].innerHTML = html; dropDown.set_props(tempProps); dropDown._clientStateManager = new $IG.ObjectClientStateManager(tempProps[0]); dropDown._setupCollections(); }
A simple example of use:
function dropDownOpening() { var dropDown = $find('<%= testDropDown.ClientID %>'); if (dropDown.get_items().getLength() == 0) { clientSideDropDownReplaceItems(dropDown, [["Werewolf", "w"], ["Vampire", "v"], ["Squid", "sq"], ["Mothra", "m"]]); } }
That's with dropDownOpening hooked up to the ClientEvents DropDownOpening on a WebDropDown named testDropDown. The first of each of the pairs is the value, the second, the text.
It preserves the original JavaScript object settings as much as possible. Some calls are required to "re-seed" the internals so that it can see the new choices.
--=- Ritchie
*laugh* Thanks for the mad props :)
A couple of corrections to my code above, though.
For one, of course, BLOCKED SCRIPT should be replaced with the evil j-a-v-a-s-c-r-i-p-t-:
For another, the last part of the function needs to be replaced with this:
dropDown._elements["List"].innerHTML = html; var tempEvents = tempProps[3]; tempProps[3] = undefined; dropDown.set_props(tempProps); tempProps[3] = tempEvents; dropDown._clientStateManager = new $IG.ObjectClientStateManager(tempProps[0]); dropDown._setupCollections();
...otherwise it ends up doubling-up client-side events. I had a key-up handler in there, and it was stuttering until I figured out that fix :)
Hi Ritchie,
Thanks, that's amazing ! I am sure it will help many others developers.
We will be soon oficially releasing support of client side binding and templating, so stay tuned :)
Best,
Angel