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

Help with client side item matching

1 Answer 29 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Diane
Top achievements
Rank 1
Diane asked on 01 Apr 2010, 09:25 AM
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%">

1 Answer, 1 is accepted

Sort by
0
Accepted
Kalina
Telerik team
answered on 06 Apr 2010, 03:44 PM
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.
Tags
ComboBox
Asked by
Diane
Top achievements
Rank 1
Answers by
Kalina
Telerik team
Share this question
or