AutocompleteBox dropdown template with grouping

4 posts, 0 answers
  1. Shengwei
    Shengwei avatar
    12 posts
    Member since:
    Sep 2012

    Posted 11 Mar 2013 Link to this post


    I have binded a collection of my custom objects which can be grouped according to one of its properties to the itemssource, i want to display the suggestion dropdown list as group in DropDownItemTemplate (as attached image can show) 

    1) Display a group title followed by the members belong to that group
    2) Group title is not selectable 
    3) highlight a text that typed in the search box 

    Any help or direction is much appreciated!

  2. fitz
    fitz avatar
    2 posts
    Member since:
    Apr 2013

    Posted 09 Jul 2013 Link to this post

    hi, have you find a solution ?

  3. Shengwei
    Shengwei avatar
    12 posts
    Member since:
    Sep 2012

    Posted 10 Jul 2013 Link to this post

    Partial Solution i am using 

    <DataTemplate x:Key="autoCompleteDropDownTemplate">
                <MultiBinding Converter="{StaticResource highlightConverter}" Mode="OneTime">
                    <Binding Path="Label"/>
                    <Binding Path="Category"/>
                    <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=UserControl}" Path="DataContext.CurrentSearchText"/>

    and converter is 

    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        string label = values[0] as string;
        string category = values[1] as string;
        string query = values[2] as string;
        if (!string.IsNullOrEmpty(label) && !string.IsNullOrEmpty(category))
            string replacementstring = string.Format("%%{0}%%", query);
            string escapedXml = SecurityElement.Escape(label.Replace(query, replacementstring, StringComparison.InvariantCultureIgnoreCase));
            string withTags = escapedXml.Replace(replacementstring, "<Run Style=\"{StaticResource highlightTextStyle}\">" + query + "</Run>", StringComparison.InvariantCultureIgnoreCase);
            string wrappedInput = label.Equals(category, StringComparison.InvariantCultureIgnoreCase)?
                "<TextBlock xmlns=\"\" Style=\"{StaticResource autocompleteCategoryStyle}\">" + category + "</TextBlock>" :
                "<TextBlock xmlns=\"\" Style=\"{StaticResource autocompleteSuggestionTextStyle}\">"+withTags+"</TextBlock>";
            using (StringReader stringReader = new StringReader(wrappedInput))
                using (XmlReader xmlReader = XmlReader.Create(stringReader))
                    return XamlReader.Load(xmlReader);
        return null;

    the problem is that 
    1) user can still select "Category" (tried the following)
    <Style TargetType="telerik:RadListBoxItem">
            <DataTrigger Binding="{Binding Converter={StaticResource ac2fConverter}}" Value="False">
                <Setter Property="IsHitTestVisible" Value="False"/>
    but still can select using key up and down
    2) the converter is not "Case-sensitive"

  4. fitz
    fitz avatar
    2 posts
    Member since:
    Apr 2013

    Posted 11 Jul 2013 Link to this post


    i have found a workaround with radcombobox wich have an autocomplete behaviour too.
    With radcombobox you can grouping items using ListCollectionView and GroupStyle.

    example : 

    in viewmodel
    you can create a class wich contains one item and group name.
    create your items collection with group name and add it in a ListCollectionView

    Items = new ListCollectionView(groupedItems.OrderBy(i => i.GroupName));
    Items.GroupDescriptions.Add(new PropertyGroupDescription("GroupName"));

    in xaml

    			<Border BorderThickness = "0,0,0,1" BorderBrush="#CFCFCF" Margin="5, 2, 0, 15" >
    				<TextBlock Text="{Binding Name}" Foreground="#B1A1A4" />
Back to Top