Customize drop down?

6 posts, 0 answers
  1. Alex
    Alex avatar
    141 posts
    Member since:
    Mar 2010

    Posted 31 Jul 2014 Link to this post

    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. 


  2. Kalin
    Admin
    Kalin avatar
    1209 posts

    Posted 04 Aug 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. DevCraft banner
  4. Alex
    Alex avatar
    141 posts
    Member since:
    Mar 2010

    Posted 04 Aug 2014 in reply to Kalin Link to this post

    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






  5. Kalin
    Admin
    Kalin avatar
    1209 posts

    Posted 07 Aug 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  6. Alex
    Alex avatar
    141 posts
    Member since:
    Mar 2010

    Posted 07 Aug 2014 in reply to Kalin Link to this post

    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
  7. Kalin
    Admin
    Kalin avatar
    1209 posts

    Posted 12 Aug 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
Back to Top
DevCraft banner