Combo box validation to select value from within the list

2 posts, 0 answers
  1. Rachana
    Rachana avatar
    2 posts
    Member since:
    Oct 2012

    Posted 31 Oct 2012 Link to this post

     Hi Guys,

    I am using type ahead functionality in combo box, for auto completing state. There are instances when user may enter such value which is not suggested or not in a list e.g. ZC or nv. How can we make sure that the user has selected value within the given list.

    I understand that I can use drop down list in above scenario. But I need to use the auto complete for combo box.

    I tried the property setting suggested http://www.telerik.com/help/aspnet-ajax/combobox-select-existing-item.html, but it does not work as expected.

    I also tried the javascript. it does turn red when a wrong value is enterd, but does not stop the user from saving the value, and the red background colour does not go away once the correct value is selected.
    function OnClientBlurHandler(sender, eventArgs) {
            var textInTheCombo = sender.get_text();
            var item = sender.findItemByText(textInTheCombo);
            //if there is no item with that text
            if (!item) {
                sender.set_text("");
                setTimeout(function () {
                    var inputElement = sender.get_inputDomElement();
                    inputElement.focus();
                    inputElement.style.backgroundColor = "red";
                }, 20);
            }
        }



    Thanks In Advance,

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 01 Nov 2012 Link to this post

    Hello Rachana,

    I would recommend you to add OnClientFocus event handler and modify your existing OnClientBlur event handler as follows:

    //markup code

    <telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientFocus="OnClientFocus" OnClientBlur="OnClientBlurHandler" AllowCustomText="true">
           ......          
    </telerik:RadComboBox>

    //JavaScript

    function OnClientBlurHandler(sender, eventArgs) {
           var textInTheCombo = sender.get_text();
           var item = sender.findItemByText(textInTheCombo);
           //if there is no item with that text
              if (!item) {
                   sender.set_text("");
                   var inputElement = sender.get_inputDomElement();
                   inputElement.focus();
                   inputElement.style.backgroundColor = "red";
                    }
    }
     
    function OnClientFocus(sender, args) {
          var inputElement = sender.get_inputDomElement();
          inputElement.focus();
          inputElement.style.backgroundColor = "white";
    }

    Hope that this will lead you into right direction.

    Regards,
    Boyan Dimitrov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top