When it comes to built-in filtering, autocompleting search results and virtualization the RadAutoCompleteBox is the control to go. The control provides multiple selection, autocomplete and text searching modes with it’s out of the box enabled filtering and virtualization. In most scenarios when there is a need for searching/autocompleting functionality the RadAutoCompleteBox behaves perfectly and gets the job done but there are couple more complex scenarios where it is possible to improve its functionality.
By design controls of the nature of RadAutoCompleteBox need to have their ItemsSource collection set up in order to work and make their magic but there are scenarios where it is not possible or it is not performance perfect to have that ItemsSource collection statically set up. In those scenarios it is necessary to make a call to the server side where data is stored and retrieve only a small portion of it to use as ItemsSource. Such call could be made on each key stroke of the input in the control but it would quickly make the server overflow with calls and eventually jam it. The best approach to handle such issues is to implement a delay after which a call to the server side would be made for the ItemsSource or directly for populating (filtering) functionality of the control.
There are also other scenarios which could benefit of such populate delay like when the users type slower than normal and populate (filtering) functionality should be enabled only after “X” seconds after the last keyboard key press.
Implementing such behavior in the RadAutoCompleteBox control could easily be achieved with its SearchTextChanged and Populating events. In the next example I will demonstrate how to implement minimum populate delay which will enable the populate (filter) functionality of the control only after “X” seconds of no input has been detected.
First we need to create a ViewModel which hold information about the ItemsSource of the control and the custom delay that will be used. For example purpose we will use a ComboBox that will be our delay selector to selected between different delay values (2, 3, 4 or 5 seconds):
Next we need to declare the RadAutoCompleteBox and the delay selector RadComboBox in the xaml. We will use the SelectionChanged event of the RadComboBox to update the selected delay and the SearchTextChanged/Populating events of the RadAutoCompleteBox so make sure that those events are declared:
After setting up the controls and the ViewModel now we will need to handle the delaying of the populate functionality of the control. There are multiple approaches that could be used here but the most straightforward one is to:
For example purposes I will show how to use a DispatcherTimer in order to enable/disable a delay. It is possible to use the described approach with other timer mechanism. First we will need to handle the different way of deleting entered text in the control. We can use the KeyDown event of the control for this purpose:
After implementing a mechanism that detects when the input is entered or deleted we will need to handle the SearchTextChanged event. That event is triggered on each keystroke and the built-in populate (filtering) functionality is enabled by it. What we want to do is add a delay when that event is triggered and manually enable the Populate with the latest SearchText of the control:
Finally what is left is to use our isHandled field and set it to the CancelRoutedEventArgs of the Populating event of the control in order to disable the built-in automatic filtering:
The next image shows the final result of the described approach:
The full source code of the shown example can be found in the Telerik XAML SDK repository at GitHub here. You can also take advantage of our SDK Samples Browser application that provides a more convenient approach in exploring and executing the examples in the Telerik XAML SDK repository. More details could be found in the online documentation for WPF here and Silverlight here.
The SDK Samples Browser is available for download at the following address: http://demos.telerik.com/xaml-sdkbrowser/
Subscribe to be the first to get our expert-written articles and tutorials for developers!