Autocomplete lists matching items in first group only

4 posts, 0 answers
  1. Craig
    Craig avatar
    112 posts
    Member since:
    Nov 2011

    Posted 31 Jan 2014 Link to this post

    I have an autocomplete box associated with a tree view that displays a hierarchy. I'm trying to provide a search on a property of the child items (the Description). In my case it is showing only the items for the first parent item in the list.
    >>> Child1 apple
    >>> Child2 pear
    >>> Child3 peach
    >>> Child4 pea

    When typing p in the autocomplete box only apple and pear are displayed. I'm guessing it's a binding issue. Here's my XAML:-

    <StackPanel Orientation="Horizontal">
       <telerik:RadAutoCompleteBox Name="radAutoCompleteBox1" VerticalAlignment="Top"
          WatermarkContent="Enter part of description ..."
          ItemsSource="{Binding Path=ParentCollection/ChildItems}"
          DropDownItemTemplate="{StaticResource SearchAutoComplete}"
          ToolTip="{Binding RelativeSource={RelativeSource Self}, Path=SelectedItem.Description}" />
    <telerik:RadTreeView Name="radTreeView" VerticalAlignment="Stretch"
        ItemsSource="{Binding Path=ParentCollection}"
        SelectedItem="{Binding SelectedTreeItem, Mode=TwoWay}"
        IsTextSearchEnabled="True" telerik:TextSearch.TextPath="Description"
        ItemTemplateSelector="{StaticResource ItemDataTemplateSelector}" >

    Any suggestions?
  2. Kalin
    Kalin avatar
    1190 posts

    Posted 05 Feb 2014 Link to this post

    Hello Craig,

    In order to achieve the desired functionality you would need to implement a custom Filtering Behavior which will return the matching items. In this case you would need use the ParentCollection as an ItemsSource of the AutoCompleteBox. For your convenience I have prepared a sample project which demonstrates the exact approach.

    Hope this helps.

    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. DevCraft R3 2016 release webinar banner
  4. Craig
    Craig avatar
    112 posts
    Member since:
    Nov 2011

    Posted 07 Feb 2014 Link to this post

    Hello Kalin,
    Thanks for the sample. It has helped me get it to work to some extent but I have a couple of issues. Firstly, in my updated version of the sample, when I select the one of the items presented by the autocomplete box, the complete item's name is displayed with a close button beside it after which I can continue to type text which does nothing. I'd rather it not display a close button but just the name and if more text is typed for the search to resume. I've attached a screenshot that shows this.

    What would you suggest?
  5. Kalin
    Kalin avatar
    1190 posts

    Posted 11 Feb 2014 Link to this post

    Hi Craig,

    If I understand you correctly you need to able to select just a single item? If so you could set the SelectionMode property of the AutoCompleteBox to Single. However if you need multiple items without the delete button, you should extract and modify the default RadAutoCompleteBoxItem ControlTemplate. You will need to find the button named RemoveItemButton and remove it.

    Hope this is helping you.


    Check out the new Telerik Platform - the only modular platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native apps. Register for the free online keynote and webinar to learn more about the Platform on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT).

Back to Top