prevent using down and up arrow if combo box text is less than two characters

2 posts, 0 answers
  1. Ryan
    Ryan avatar
    3 posts
    Member since:
    Dec 2010

    Posted 06 Jun 2011 Link to this post

    I am binding a list of names to a combo box, and trying to limit the number of names visible to the user.  I have used filter="contains" to narrow the list.  I have also written a onkeyup handlers to only show names after at lease two characters are typed.  My problem is that if you use the up or down arrow key, it will still show the entire list.  I have attempted to write an onkeydown handler and check for e.keycode 38 and 40, but it's still not working correct.  my code follows:

     
    function OnClientDropDownOpening(Sender, args) {
         //only open if there is moer than 1 characters
         if (!open)
             args.set_cancel(true);
     }
     
     
     function pageLoad() {
         // set up onkeyup and onkey down event
         var combo = $find("<%=cboSLPName.ClientID %>");
         var input = combo.get_inputDomElement();
         input.onkeyup = onKeyUpHandler;
         input.onkeydown = onKeyDownHandler;
     }
     
     
     function onKeyDownHandler(e) {
         if (!e)
             e = window.event;
              
         var combo = $find("<%=cboSLPName.ClientID %>");
         var comboText = String(combo.get_text());
     
     
         if (comboText.length < 2) {
             //////////////////////////////
             //
             //  don't do anything if the length is less than two and you press up arrow and down arrow
             //
             if (e.keyCode == 38 || e.keyCode == 40) {
                 e.returnValue = false;
                 if (e.preventDefault) {
                    e.preventDefault();
                }
                return false;
             }
         }
     }
     
     
     function onKeyUpHandler(e) {
         var combo = $find("<%=cboSLPName.ClientID %>");
         var comboText = combo.get_text();
     
     
         if (comboText.length < 2) {
             open = false;
             combo.hideDropDown();
         }
         else {
             open = true;
             combo.showDropDown();
         }
     }

    and my server control:

    <telerik:RadComboBox runat="server" ID="cboSLPName" Width="250px"
                            EmptyMessage="Type Name" MarkFirstMatch="true" Filter="Contains" ExpandAnimation-Type="None"
                               ShowMoreResultsBox="false" ShowWhileLoading="false"
                             AllowCustomText="true"
                            ShowToggleImage="false" EnableItemCaching="true" LoadingMessage="Loading..."
            HighlightTemplatedItems="true" EnableLoadOnDemand="true" ShowDropDownOnTextboxClick="false"
                            OnClientDropDownOpening="OnClientDropDownOpening"
                            onselectedindexchanged="cboSLPName_SelectedIndexChanged"
                            AutoPostBack="true"  />


    any suggestions you can give to help would be appreciated.  Thanks!

    I know my code isn't pretty, so any suggestions you have for a more elegant design is also appreciated!!
  2. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 09 Jun 2011 Link to this post

    Hi Ryan,

    You may try to use the OnClientKeyPressing client-side event instead.
    Here is a sample code:
    <script type="text/javascript">
        var open;
        function OnClientDropDownOpening(Sender, args) {
             
            //only open if there is moer than 1 characters
             
                args.set_cancel(!open);
        }
     
        function pageLoad() {
     
            open = false;
        }
     
        function keyPressing(sender, eventArgs) {
     
            var combo = $find("<%=cboSLPName.ClientID %>");
            var comboText = String(combo.get_text());
     
            if (comboText.length < 2) {
     
                if (eventArgs.get_domEvent().keyCode == 38 || eventArgs.get_domEvent().keyCode == 40) {
                    open = false;
                    combo.hideDropDown();
                }
            }
            else {
                open = true;
                combo.showDropDown();
            }
        }  
    </script>



    Regards,
    Helen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top