Click here to Skip to main content
Click here to Skip to main content

Loading huge data in a Silverlight AutoCompleteBox

, 9 Aug 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
Creating a custom AutoCompleteBox which will filter large amounts of data quickly.

Table of contents

  1. Introduction
  2. Prerequisites
  3. Modifying the AutoCompleteBox to load huge data
  4. Conclusion

Introduction

AutoCompleteBox is a very useful control in Silverlight. It gives suggestions to the user based on input from the ItemsSource assigned to it. This control works fine when a limited number of items are added as ItemsSource; say a few thousands of entries. But if the items assigned to it grows after may be 20000+, the UI will hang and this would create a bad user experience.

For normal applications, huge data like this may not be expected but in a business application, this is a quite possible scenario. In one of my previous projects, I came across such a scenario. I resolved this by tweaking one of AutoCompleteBox’s properties (TextFilter) and it gave me a very good result. I would like to share this so that it will be useful to someone who has such a requirement in Silverlight.

Prerequisites

This sample application is developed in VS-2010 Express edition and Silverlight 4. Please download them from Microsoft website if you don’t have them installed. I created the sample application using the Silverlight Navigation project.

Modifying AutoCompleteBox to load huge data

See the screenshot of the sample application:

Sample.jpg

Here, the page has an AutoCompleteBox from the SDK and it is getting loaded with 20,000 strings.

sourceList = new List<string>();
for (int i = 0; i < 20000; i++)
{
    sourceList.Add("Item-" + i);
}
this.acbSample.ItemsSource = sourceList;

If the user tries to type a letter, the AutoCompleteBox will not load data and the page will hang. Eventually, data will get loaded after sometime. This delay will increase with more data. This is because the control tries to load the entire entries and then tries to match the data. We can improve the loading performance if we can limit the number of items getting loaded in the dropdown of AutoCompleteBox. Setting the MaxDropDownHeight property will not help here as this will only limit the height of the dropdown and still the control will try to load everything. So I created a custom AutoCompleteBox with an AutoCompleteBox in the usercontrol. This is present in the FastLoadingACB library in the attached solution.

As you can see, in FastLoadingACB.xaml.cs, only the required properties are exposed as Dependency Properties (DP). I have exposed the Width and ItemsSource properties of AutoCompleteBox in the new user control. AutoCompleteBox’s SelectionChangedEvent is also exposed in the user control. A new DP called MaxItemsInDropDown is added in the user control to limit the number of items getting loaded in the AutoCompleteBox dropdown. The magic of limiting the number of items is achieved by modifying the AutoCompleteFilterPredicate<string> TextFilter property of the AutoCompleteBox. This property’s documentation from the metadata is “Gets or sets the custom method that uses the user-entered text to filter items specified by the System.Windows.Controls.AutoCompleteBox.ItemsSource property in a text-based way for display in the drop-down”. In AutoCompleteBox’s Loaded event, a new predicate is given for TextFilter, as shown below:

private void acbFastLoading_Loaded(object sender, RoutedEventArgs e)
{
    this.acbFastLoading.TextFilter = (search, value) =>
        {
            if (value.Length > 0)
            {
                if ((this.counter < MaxItemsInDropDown) &&
                    (value.ToUpper().StartsWith(search.ToUpper()) || 
                     value.ToUpper().Contains(search.ToUpper())))
                {
                    this.counter++;
                    return true;
                }
                else
                    return false;
            }
            else
                return false;
        };
}

A private member counter is introduced which is set to 0 when AutoCompleteBox’s text changes as shown above. This will ensure that whenever the user types something, only the number of items mentioned in MaxItemsInDropDown will get populated in the dropdown. Now the new control is loaded with 200,000 strings; 10 times more than the previous case.

IList<string> sourceList = new List<string>();

for (int i = 0; i < 200000; i++)
{
    sourceList.Add("Item-" + i);
}

this.acbFastLoading.FastLoadingACBItemsSource = sourceList;

As you can see, the data gets filtered and loaded in the dropdown very quickly.

Modified_ACB_DataLoad.jpg

Conclusion

This approach is a simple way to improve the loading and filtering performance of an AutoCompleteBox. Any/all properties required by the consuming application should be exposed as a Dependency Property in the new user control created. This approach may not be required when the application loads small amounts of data but will be really useful if you are working with huge amounts data. Happy coding…

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Renil Joy, Bangalore
Software Developer (Senior) Societe Generale
India India
I am a .Net developer, currently working with Societe Generale Global Solution Centre, Bangalore and was previously with Cognizant.I have more than 8 years of .Net experience in BFSI domain. I am an experienced developer in C#, VB.Net, Silverlight, WPF, WCF, LINQ, Entity Framework, SSIS, NHibernate, ASP.Net and SQL Server.
Follow on   LinkedIn

Comments and Discussions

 
SuggestionSlight Improvement in this solution Pinmembermicrogold13-Aug-14 9:42 
GeneralRe: Slight Improvement in this solution PinmemberRenil Joy, Bangalore19-Aug-14 16:57 
QuestionThanks PinmemberTortNum4-Aug-14 4:01 
AnswerRe: Thanks PinmemberRenil Joy, Bangalore4-Aug-14 15:53 
QuestionGetting ACB Text Value Pinmemberarunpalanisamy19-Aug-13 2:51 
QuestionHow to Get this autocomplete Box Text Value Pinmemberarunpalanisamy18-Aug-13 20:10 
QuestionVery Cool Pinmemberciviceng14-Mar-13 5:01 
AnswerRe: Very Cool PinmemberRenil Joy, Bangalore21-Mar-13 9:20 
BugProblem downloading sample Pinmemberbeffes27-Jun-12 23:26 
GeneralRe: Problem downloading sample PinmemberRenil Joy, Bangalore29-Jun-12 14:53 
Questionlooks pretty good BUT Pinmemberjohn010118-Apr-12 3:56 
AnswerRe: looks pretty good BUT PinmemberRenil Joy, Bangalore18-Apr-12 11:10 
SuggestionAwesome! Pinmemberjlester4229-Dec-11 18:09 
GeneralRe: Awesome! [modified] PinmemberRenil Joy, Bangalore2-Jan-12 0:38 
QuestionBind to an object Pinmemberrrre_e23-Aug-11 22:18 
AnswerRe: Bind to an object PinmemberRenil Joy, Bangalore17-Sep-11 15:18 
QuestionAutoCompleteBox.Populating PinmemberPaulLinton16-Aug-11 14:40 
AnswerRe: AutoCompleteBox.Populating PinmemberRenil Joy, Bangalore17-Sep-11 15:23 
AnswerRe: AutoCompleteBox.Populating PinmemberDrew Noakes21-Oct-11 2:38 
GeneralMy vote of 5 PinmemberSunasara Imdadhusen9-Aug-11 18:38 
GeneralRe: My vote of 5 PinmemberRenil Joy, Bangalore13-Aug-11 8:28 
SuggestionGood Work PinmemberMember 467431728-Jul-11 18:13 
GeneralRe: Good Work PinmemberRenil Joy, Bangalore29-Jul-11 17:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141216.1 | Last Updated 9 Aug 2011
Article Copyright 2011 by Renil Joy, Bangalore
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid