Display all items on focus

7 posts, 1 answers
  1. Michal
    Michal avatar
    6 posts
    Member since:
    Apr 2014

    Posted 08 Jan Link to this post

    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

  2. Dinko
    Admin
    Dinko avatar
    1002 posts

    Posted 13 Jan Link to this post

    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.
  3. Michal
    Michal avatar
    6 posts
    Member since:
    Apr 2014

    Posted 14 Jan in reply to Dinko Link to this post

    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

     

  4. Martin Ivanov
    Admin
    Martin Ivanov avatar
    2298 posts

    Posted 17 Jan Link to this post

    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.
  5. Michal
    Michal avatar
    6 posts
    Member since:
    Apr 2014

    Posted 19 Jan in reply to Martin Ivanov Link to this post

    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);
    }

     

  6. Answer
    Martin Ivanov
    Admin
    Martin Ivanov avatar
    2298 posts

    Posted 20 Jan Link to this post

    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.
  7. Michal
    Michal avatar
    6 posts
    Member since:
    Apr 2014

    Posted 20 Jan in reply to Martin Ivanov Link to this post

    This works great !

    Thank you Martin :)

Back to Top