This is a migrated thread and some comments may be shown as answers.

Display all items on focus

6 Answers 304 Views
AutoCompleteBox
This is a migrated thread and some comments may be shown as answers.
Michal
Top achievements
Rank 1
Michal asked on 09 Jan 2020, 05:31 AM

Hi,

Currently the AutoCompleteBox will display items only when you type at least one letter.

Is it possible to display all items when AutoCompleteBox gets a focus? Basically if I click on the AutoCompleteBox I would like to see the list of all available items, then if you start typing it will filter as standard.

 

Cheers

Mike

6 Answers, 1 is accepted

Sort by
0
Dinko | Tech Support Engineer
Telerik team
answered on 13 Jan 2020, 01:35 PM

Hello Michal,

Thank you for your interest in our RadAutoCompleteBox control.

The control populates its drop-down content on-demand when the user starts typing in the text box. If we open the drop-down and populated it the dropdown the selection will not work as expected. What you can consider using is RadComboBox control instead. The control provides out of the box autocomplete feature as wee. You can check the following articles for more information.

I hope the RadComboBox control will fit in your application.

Regards,
Dinko
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Michal
Top achievements
Rank 1
answered on 15 Jan 2020, 03:05 AM

Hi Dinko,

Thank you for your reply.

 

Unfortunately the RadComboBox doesn't support multi select (at least in Silverlight), therefore I used the RadAutoCompleteBox control which works fine, but I get lots of complains from clients as they can't see all the options which they can select. I know you need to enter at least first letter, but that is not great if you don't know what you looking for.

Therefore I'm trying to figure out how I can display all items when users clicks(get focus) on the RadAutoCompleteBox control. I still want to leave the filtering option on, but with ability to see all items if user didn't enter any text.

 

Cheers

Mike

 

1
Martin Ivanov
Telerik team
answered on 17 Jan 2020, 02:02 PM

Hello Mike,

To achieve your requirement with RadAutoCompleteBox, you can implement a custom filtering behavior. This will allow you to bring all items if the searched text is empty. To execute the behavior, call the Populate() method of RadAutoCompleteBox with an empty string. You can find this approach shown in the attached project. Can you please give it a try and let me know how it goes?

Regards,
Martin Ivanov
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Michal
Top achievements
Rank 1
answered on 20 Jan 2020, 05:19 AM

Thank you Martin.

With your example I got it working with slight glitch.

I have modified the code to call the Populate() method on mouse down.

private void OnMouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    var autoCompleteBox = (RadAutoCompleteBox)sender;
 
    if (autoCompleteBox != null && string.IsNullOrEmpty(autoCompleteBox.SearchText))
    {
        autoCompleteBox.Focus();
        autoCompleteBox.Populate("");
    }
}

 

This works great, with small problem when you want to remove an object and click on the X. It will remove the item but the popup momentary will shows up.

Any way how to disable it?

 

Ohh and I have modified the filter to exclude selected items when you click.

Here is the code in case someone is interested:

public override IEnumerable<object> FindMatchingItems(string searchText, IList items, IEnumerable<object> escapedItems, string textSearchPath, TextSearchMode textSearchMode)
{
    if (string.IsNullOrEmpty(searchText))
    {
        foreach(var escapedItem in escapedItems)
        {
            items.Remove(escapedItem);
        }
        return items.OfType<object>();
    }
    return base.FindMatchingItems(searchText, items, escapedItems, textSearchPath, textSearchMode);
}

 

0
Accepted
Martin Ivanov
Telerik team
answered on 20 Jan 2020, 02:57 PM

Hello Michal,

I am glad to hear my suggestion worked.

To resolve the momentary showing of the popup, you can check also if the mouse click reached a TextBox (the input box of the control) In this situation run the code. Otherwise, don't.

private void OnMouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
	var autoCompleteBox = (RadAutoCompleteBox)sender;
	var source = (FrameworkElement)e.OriginalSource;
	var autoCompleteTextBox = source.ParentOfType<TextBox>();

	if (autoCompleteTextBox != null && autoCompleteBox != null && string.IsNullOrEmpty(autoCompleteBox.SearchText))
	{
		autoCompleteBox.Focus();
		autoCompleteBox.Populate("");
		e.Handled = true;
	}
}

Regards,
Martin Ivanov
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Michal
Top achievements
Rank 1
answered on 21 Jan 2020, 02:27 AM

This works great !

Thank you Martin :)

Tags
AutoCompleteBox
Asked by
Michal
Top achievements
Rank 1
Answers by
Dinko | Tech Support Engineer
Telerik team
Michal
Top achievements
Rank 1
Martin Ivanov
Telerik team
Share this question
or