Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
395
Filling in choices on the client side only
posted

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