Combo box validation to select value from within the list

[Rachana]

 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,

[Boyan Dimitrov]

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