How to: Optimize RadCombobox Ajax

One of the nice things about attending conferences like TechEd is all of the direct feedback you get from Telerik "fans" (people that use the RadControls everyday and love them). These fans love to use the RadControls and they also love to push the controls to their limits. That often leads to some interesting questions, such as this one I was presented with at the Telerik booth:

"Is it possible to delay the RadCombobox autocomplete callback until a certain number of characters have been typed? Or is it possible to delay the callback so that it doesn't start until users stop typing a number of characters?"

The answer to both questions is a resounding 'yes'. Today we'll take a quick look at the RadCombobox client-side API to see how easy it is to add some custom handling of the autocomplete Ajax callbacks.

Approach 1: ItemRequestTimeout Property
One of the easiest ways to solve the problem of "too many" Ajax callbacks being generated by RadCombobox's AutoComplete features is to adjust the ItemRequestTimeout property. This simple property sets in milliseconds the amount of time that RadCombobox will wait after the last key is pressed before sending an Ajax request to the server. If another key is pressed before the timeout elapses, the timeout is shifted and no extra callbacks are made to the server.

The default value for this property is 300ms, but you can easily change it like this:



Approach 2: Delaying Callbacks Manually
If for some reason you want more control over this delay, you can very easily write your own JavaScript to delay RadCombobox callbacks. To do this, you must use one of RadCombobox's client-side events: OnClientKeyPressing. This client event fires when a key is pressed in the RadCombobox textbox area and before any callbacks are made. This event receives two arguments: a reference to the RadCombobox object on the page and a collection of EventArgs. The EventArgs object contains a number of properties about the key that was pressed, including:

• type: string, type of keypress (usually "keydown")
• charCode: int
• keyCode: int
• ctrlKey: bool, indicates if key pressed was control key
• altKey: bool, indicates if key pressed was alt key
• shiftKey: bool
• metaKey: bool
• isChar: bool

We don't actually need to use the EventArgs to do our manual callback delay, but it is good to know the information is there if you need it for another scenario. Instead, we just need to write some JavaScript that uses standard timers to delay a call to the Combobox's client side RequestItems method. This method manually fires an Ajax callback to load items in the Combobox's drop down and accepts two arguments: the value to send to the server to request items and a boolean value indicating if new list items should be appended or replace existing items. Here is the JS that we'll use to accomplish this task:


Fig1: Handle KeyPress event and setup timer


Fig2: Helper functions to clear timer, manually request items, and add some debugging info to the screen

And here is how we'll configure RadCombobox to use these client-side events:



This will now achieve results very similar to approach 1, but the process exposes you to a number of helpful RadCombobox client-side features.

Approach 3: Creating Minimum Characters Delay
The final approach we want to look at here is delaying RadCombobox callbacks until a certain number of characters have been entered. You might add this to your RadCombobox if single character searches return too many results and slow down your application. This approach requires much less JavaScript that approach 2 and takes advantage of a different RadCombobox client-side event: OnClientItemsRequesting. This event fires before the Combobox sends an Ajax request to the server for new list items and it can be cancelled (thus cancelling any Ajax callbacks) by returning false.

The JavaScript that we need to make this work looks like this:



And we configure our RadCombobox like this:



Now callbacks will only be fired after at least 3 characters have been entered in our Combobox. If used in conjunction with approach 1 or approach 2, you can highly tune your RadCombobox load on demand behavior to match the behavior of your users and reduce callbacks to your server.

Hopefully these three approaches will help you tune your RadCombobox and help you become more familiar with the RadCombobox client-side API. All RadControls have powerful client-side APIs that enable you to do some very neat things, so don't be afraid to brush up on your JavaScript skills and start maximizing your RadControls experience.

Download supporting code for this post