Help with client side item matching

[Diane]

Hi,

I have a load-on-demand combo box but have a problem where you can type something in the text field and even if what is typed does not match an item in the combobox, if you tab out, or click out of the control, the page posts back, the selected index changes and what was typed remains in the combobox text field.

I would like the behaviour of the control to not post back if what someone types does not match an item, but does post back if the item matches. I presume this is a client-side event I need to handle for this, but I would appreciate some help.

Thanks
Tom

Control:

<telerik:RadComboBox ID="ddlStudents" EnableViewState="false" runat="server" EnableVirtualScrolling="true"
                      ShowMoreResultsBox="true" EnableLoadOnDemand="true" OnItemsRequested="ddlStudents_ItemsRequested"
                       OnClientDropDownOpening="OnClientDropDownOpening" AutoPostBack="true" EnableItemCaching="true" HighlightTemplatedItems="true" EmptyMessage="Select a student or start typing their name" ExpandAnimation-Duration="150"
                       MarkFirstMatch="true" EnableTextSelection="true" IsCaseSensitive="false" CollapseAnimation-Duration="9" Skin="Default" DataValueField="StudentId"
                        DataTextField="CombinedName" ToolTip="Select a student from the drop down list or start typing their name/ID to return only those students matching your criteria."
                        OnSelectedIndexChanged="ddlStudents_SelectedIndexChanged" MaxHeight="250px" Width="100%">

[Kalina]

Hello TomL,

To prevent post back when user types text that does not match an item in the RadComboBox dropdown you can use CustomValidator and implement a client-side validation function:

<asp:CustomValidator id="CustomValidator1"

   ControlToValidate="ddlStudents"

   ClientValidationFunction="ClientValidate"    

   Display="Static"

   ErrorMessage="There is no such item"

   ForeColor="red"

   EnableClientScript="true"

   runat="server"/>

   <br />

<telerik:RadComboBox ID="ddlStudents" AllowCustomText="false"

    runat="server" EnableVirtualScrolling="true"

    ShowMoreResultsBox="true"

    nableLoadOnDemand="true"

    OnClientItemsRequesting="OnClientItemsRequestingHandler"

    OnItemsRequested="ddlStudents_ItemsRequested"

    OnSelectedIndexChanged="ddlStudents_SelectedIndexChanged"

    OnClientDropDownClosed="OnClientDropDownClosedHandler"

    OnClientBlur="OnClientBlurHandler"

    AutoPostBack="true"

    EnableViewState="false" EnableItemCaching="true"

    HighlightTemplatedItems="true"

    EmptyMessage="Select a student or start typing their name"

    MarkFirstMatch="true" EnableTextSelection="true"

    ExpandAnimation-Duration="150"

    IsCaseSensitive="false" CollapseAnimation-Duration="9"

    Skin="Default" DataValueField="StudentId"

    DataTextField="CombinedName"

    ToolTip="Select a student from the drop down list or start typing their

        name/ID to return only those students matching your criteria."

    MaxHeight="250px" Width="100%">

</telerik:RadComboBox>

function ClientValidate(source, arguments) {

    var combo = $find("<%=ddlStudents.ClientID %>");
    var textEntered = combo.get_text();
    var item = combo.findItemByText(textEntered);
    if (!item) {

        arguments.IsValid = false;
        combo.clearSelection();
        combo.get_inputDomElement().value = combo.get_emptyMessage();
        combo.get_inputDomElement().className += " rcbEmptyMessage";
        combo._originalText = "";
    }
    else {
        arguments.IsValid = true;

    }
}

I made a sample page for you to illustrate the approach.

Please let me know if this was helpful.

Regards,
Kalina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.