Customize drop down?

[Alex]

Is it possible to customize the drop down of the autocompletebox? (i.e. the entire drop down section, not the drop down item template which we can already do)

Ideally I would like to be able to be able to display something akin to "drop down is busy" and "show more", which would be footers in the drop down section. 

[Kalin]

Hello Alex,

Could you please share some more details about the exact scenario you want to achieve? This way we will be able to suggest a suitable solution.

I'm looking forward to hearing from you.

Regards,
Kalin
Telerik

 

 

[Alex]

I have a box which users can enter text into, which is used for searching (i.e. searching for names)
To enhance the user experience, I would like this textbox to have auto complete functionality

I would like to customize the drop down template of the auto complete to display "busy" indicators if it is loading. (These busy indicators must NOT be blocking any UI piece, these are merely to manage user expectations
The auto complete has a defined maximum number of auto complete suggestions, if this limit is reached, I would like to show a "show more results" button (or similar) which will then jump to a full search screen. 

I think the best way to achieve this is if I could modify the drop down template, and put a footer in which displays either isloading, or show more results

---
Note: My view models already exposes  the necessary members for bindings

[Kalin]

Hello Alex,

I will go straight to your questions:

1. What I can suggest you for this scenario is to check the following example from our online XAML SDK Repository:
https://github.com/telerik/xaml-sdk/tree/master/AutoCompleteBox/MinimumPopulateDelay

The example demonstrates how to implement a minimum delay before the filtering is triggered. However you can use the delay in order to modify the ItemsSource as well. During the delay a busy indicator is shown below the AutoCompleteBox indicating the loading of the data.

2. About the button you can easily add it in the ControlTemplate of the AutoCompleteBox. You will need to extract the template and look for a Grid named PopupRoot it contains a ListBox with the filtered items. You can add the button below the ListBox, bind it to a command in the ViewModel and toggle its Visibility when needed.

Hope this helps.

Regards,
Kalin
Telerik

 

 

[Alex]

Hi Kalin, 


w.r.t Busy Indicator
Ideally the busy indicator should be in the drop down it self so the example is not applicable.

w.r.t ControlTemplates
I should be able to implement my requirements with this.

Thanks for the help

[Kalin]

Hello Alex,

What you can do for the scenario with the BusyIndicator would be to extract and modify the Template of the AutoCompleteBox in order to include BusyIndicator in the drop down. You can bind its IsBusy property to a property in the ViewModel start/stop it when needed. I have prepared a sample project which demonstrates the exact approach - the BusyIndicator is shown until three letters are typed in the input field.

Hope this will help you.

Regards,
Kalin
Telerik