[Solved] Ensuring item selected from LoadOnDemand

[Michael Viglianco]

 

I have a combo box that I populate with with searchig a db once the user has typed at least two characters. How do I make sure that the user actually selects one of the returned items and doesn't simply type a few characters and move on? I need the value in the control to be one of the returned items whether the user types it all the way out or selects an option after the LoadOnDemand. Is there a property I am not using correctly or a client side script approach?

 

 <telerik:RadComboBox ID="cboAccounts" runat="server" Width="300" Font-Size="11px"
                        EnableLoadOnDemand="true" AllowCustomText="false" MarkFirstMatch="true" EnableTextSelection="true"
                        EmptyMessage="Search/Select an Account" IsCaseSensitive="false" EnableItemCaching="true"
                        LoadingMessage="Fetching matching items..." ShowDropDownOnTextboxClick="false"
                        Height="100" AutoPostBack="true" CausesValidation="false">
                        <ExpandAnimation Duration="200" />
                        <CollapseAnimation Duration="200" />
 </telerik:RadComboBox>
 <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="cboAccounts"
                        runat="server" ErrorMessage="*" CssClass="ErrorMsg"></asp:RequiredFieldValidator>

 

     Private Sub cboAccounts_ItemsRequested(ByVal o As Object, ByVal e As Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs) Handles cboAccounts.ItemsRequested

        If e.Text <> String.Empty And Len(e.Text) >= 2 Then
            Dim dtbl As DataTable = SearchAccounts("", e.Text, Url.GetPath(), ActiveUser.UserID)

            For Each row As DataRow In dtbl.Rows
                Dim item As New RadComboBoxItem(row("account_name").ToString() & " (" & row("account_type").ToString() & ")", row("account_no").ToString())
                cboAccounts.Items.Add(item)
            Next
        End If
    End Sub

    Private Function SearchAccounts(ByVal top As String, ByVal prefixText As String, ByVal path As String, ByVal user_id As String) As DataTable
        Dim dvw As DataTable

        With New VBDataLayer.SqlServer(conStr)
            .AddParameter("@top", top)
            .AddParameter("@prefixText", prefixText)
            .AddParameter("@path", path)
            .AddParameter("@user_id", user_id)
            .AddParameter("@version", CStr(Session("version")))
            dvw = .RunProc("wsp_web_Search_Accounts2", "Accounts").Tables(0)
        End With

        Return dvw
    End Function

 

 

 

[Michael Viglianco]

This might be what I am looking for

http://www.telerik.com/community/forums/aspnet-ajax/combobox/load-on-demand-and-allowcustomtext.aspx

[Simon]

Hello Michael Viglianco,

You can also use the second approach described in this help article.

Best wishes,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Michael Viglianco]

That works if you type text that does not return any matches and click off the ComboBox but not if you type text and then hit enter. Hitting enter still allows for unmatched text.  

 

 

[Michael Viglianco]

<script type="text/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("");
       sender.set_value("");
       setTimeout(function()
                   {
                       var inputElement = sender.get_inputDomElement();
                       inputElement.focus();
                       /*inputElement.style.backgroundColor = "red";*/
                    }, 20);
   }
}
function OnClientKeyPressingHandler(sender, eventArgs)
{
   var keyCode = eventArgs.get_domEvent().keyCode;

    if (keyCode == 13)
    {
        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);
        }
    }


}


</script>

The combo of these two client side scripts seems to get me almost there. The resetting of the text doesn't keep it from passing the Required Field valdiator though. Any ideas how to reset such that it fails the validiator?

 

 

[Kalina]

Hi Michael Viglianco,

I tried to reproduce the issue locally and it looks good, and the validator works (I tested under FireFox and IE8).

I am sending you the sample page - take a look at it please.

Can you change it in order to reproduce the issue and send it back to me?

Thank you in advance.

 
Greetings,
Kalina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Michael Viglianco]

The account selection causes the second dropdown to populate with associated contacts. If I hit enter on a typed account entry that is not in the list, then no Error message shows (though it does prevent a postback) then once I interact some more to select a real account I get an ajax error about the Viewstate being corrupt.

[Kalina]

Hi Michael,

Could you please send us a sample page? If you prefer you can modify the one I sent to you in a way that represents the issue and then send it back.

Thank you in advance.

Best wishes,
Kalina
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.