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

[Solved] Problem with ComboBox - AutoComplete and Load on Demand

3 Answers 243 Views

ComboBox

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

Paul Loeb asked on 24 Sep 2009, 02:41 AM

I am trying to use both the AutoComplete and LoadOnDemand features of the RadComboBox. I have a huge list of popular bands (about 20,000 entries in the database), and I want users to be able to select multiple items from the list by typing a few characters of the band's name.

Please help!

Thanks

Paul

The code I have now is:

<telerik:RadComboBox runat="server" ID="radSimilarArtists" EnableLoadOnDemand="true"

EnableVirtualScrolling="true" EnableTextSelection="true" Width="300" MarkFirstMatch="True"

AutoCompleteSeparator="," ShowMoreResultsBox="true" AllowCustomText="false" ShowDropDownOnTextboxClick="false"

OnItemsRequested="radSimilarArtists_ItemsRequested" Skin="Default" />

And the code behind

protected void radSimilarArtists_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)

{

MegaService megaClass = new MegaService();

string textEntered = e.Text;

DataTable data = megaClass.getSimilarArtists(textEntered).Tables["similarartists"];

int itemOffset = e.NumberOfItems;

int endOffset = Math.Min(itemOffset + ItemsPerRequest, data.Rows.Count);

e.EndOfItems = endOffset == data.Rows.Count;

for (int i = itemOffset; i < endOffset; i++)

{

radSimilarArtists.Items.Add(new RadComboBoxItem(data.Rows[i]["name"].ToString(), data.Rows[i]["id"].ToString()));

}

e.Message = GetStatusMessage(endOffset, data.Rows.Count);

}

private static string GetStatusMessage(int offset, int total)

{

if (total <= 0)

return "No matches";

return String.Format("Items 1-{0} out of {1}", offset, total);

}

3 Answers, 1 is accepted

answered on 11 Dec 2009, 12:30 PM

Hi Denise Duggan,

The Autocomplete functionality works only if the EnableLoadOnDemand property is set to false; otherwise it interferes with the latter.

In your case however, you can try using a slightly different approach - maintain a hidden field which value will be updated whenever the user selects an Item in the ComboBox. In this way you can track all Items the user has selected. Additionally, you can provide an input element which reflects the value of the hidden field and allows the value in the latter to be changed, so that the user can either type a non-existent value or simply remove already selected one.

In order to achieve this you can add the following two elements on the page:

    
            <input type="text" id="console" /> 
        
            <asp:HiddenField ID="result" runat="server" />

and handle the SelectedIndexChanged event as well as define the pageLoad handler as shown below:

    
            function onSelectedIndexChanged(sender, eventArgs) { 
        
                var result = $get("result"); 
        
                if (result.value.length > 0) 
        
                result.value += ", " ; 
        
                result.value += eventArgs.get_item().get_text(); 
        
                $get("console").value = result.value; 
        
            } 
        
            function pageLoad() { 
        
                $telerik.$("#console").keyup(function() { 
        
                $get("result").value = this.value; 
        
                }); 
        
            }

Regards,
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.