Add Outlook AutoComplete functionality to your WinForms apps in a few simple steps

In Q2 2012 we introduced a cool brand new control in Telerik’s WinForms suite – RadAutoCompleteBox. This control allows end-users to easily fill-in text thanks to autocomplete functionality and tokens of text coming “out of the box”. This behavior enables you to easily simulate the  Outlook and Facebook autocomplete functionality available to users each time they send a new message and pick the recipients  in the ‘To:’ field of their outgoing message from a convenient pop-up list with suggestions. 

In the following example, I am going to demo a solution to a real-world scenario in which we need to achieve the visual appearance you get in Outlook when some of your recipients are online, others are offline or away, and there are some external parties for your organization involved in the communication, so you are not able to pull out their availability status. This is what we will end up with:

As you can see above, Lee Cooper is marked as offline, Adam Peter is marked as busy, Joe Smith is away, Daniel Finger is online, there is one e-mail address  unknown to our organization, and we are about to enter a suggested name starting with “R”. So let’s see how this is done.

Setting auto-complete data

Starting from the ground up, let’s first analyze how RadAutoCompleteBox becomes aware of the data suggestions that it should pop up as you type. You can add such data manually by adding RadListDataItems to its AutoCompleteItems collection like shown below:

For our case, however, we are going to use the data-bound approach that RadAutoCompleteBox offers. In this approach, we should have at hand a data-structure of sample Persons where each person has a FullName, an Email address, and a Status:

Then, we should simply bind RadAutoCompleteBox to that data using the AutoCompleteDataSource, AutoCompleteValueMemeber and AutoCompleteDisplayMember properties:

As the background is set, it now comes the interesting part. 

Data Validation

The data validation occurs at the TokenValidating event where, based on some conditions, we should decide where the data entered in the control should be tokenized or not. Our requirement is to have text that matches a known FullName or text that represents an e-mail address:

Plugging in custom tokens

From the screenshot at the top you should have noticed that the tokens contain little circles that provide information about the status of the persons. These circular images, however, do not come with RadAutoCompleteBox by default, so we should add them to the project and extend the default token to support them. Here is how the extended version of the token can be implemented:

Basically, here we complement the default token implementation with a single LightVisualElement – one of the basic types of bricks that form the look of many RadControls. Later, we’ll be able to further customize the circular image next to this LightVisualElement.

Formatting the tokens

Finally, we should define the look of the tokens depending on the status of the Person that is entered. This operation should be done in the TextBlockFormatting event:

This is it! Now if the entered text matches a known Person, the token will be colored according to the status.

Check our Getting Started with RadAutoCompleteBox for WinForms video that guides you through this scenario in a friendly step-by-step manner.