Combo box validation to select value from within the list in UI for ASP.NET AJAX

This is a migrated thread and some comments may be shown as answers.

Combo box validation to select value from within the list

1 Answer 18 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

Rachana asked on 31 Oct 2012, 09:08 PM

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,

1 Answer, 1 is accepted

answered on 01 Nov 2012, 04:08 PM

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.