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

    Hi, 

    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!

    thanks 
    wsw
  2.
  3. fitz
    fitz avatar
    2 posts
    Member since:
    Apr 2013

    Posted 09 Jul 2013 Link to this post

    hi, have you find a solution ?

    thanks.
  5. 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">
        <ContentControl>
            <ContentControl.Content>
                <MultiBinding Converter="{StaticResource highlightConverter}" Mode="OneTime">
                    <Binding Path="Label"/>
                    <Binding Path="Category"/>
                    <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=UserControl}" Path="DataContext.CurrentSearchText"/>
                </MultiBinding>
            </ContentControl.Content>
        </ContentControl>
    </DataTemplate>

    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=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" Style=\"{StaticResource autocompleteCategoryStyle}\">" + category + "</TextBlock>" :
                "<TextBlock xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" 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">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Converter={StaticResource ac2fConverter}}" Value="False">
                <Setter Property="IsHitTestVisible" Value="False"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
    but still can select using key up and down
    2) the converter is not "Case-sensitive"

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

    Posted 11 Jul 2013 Link to this post

    Hi, 

    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

    <telerik:RadComboBox.GroupStyle>
	<GroupStyle>
		<GroupStyle.HeaderTemplate>
		<DataTemplate>
			<Border BorderThickness = "0,0,0,1" BorderBrush="#CFCFCF" Margin="5, 2, 0, 15" >
				<TextBlock Text="{Binding Name}" Foreground="#B1A1A4" />
			</Border>
		</DataTemplate>
		</GroupStyle.HeaderTemplate>
	</GroupStyle>
</telerik:RadComboBox.GroupStyle>
  8.
Back to Top