One line AutoCompleteBox

2 posts, 0 answers
  1. Игорь
    Игорь avatar
    1 posts
    Member since:
    Apr 2019

    Posted 22 Apr Link to this post

    Hi. I'm using Telerik.UI.for.Wpf.40 version 2015.1.0.1075.

    If there are selected too many items in RadAutoCompleteBox, it height begins to grow and selected items are displayed on amy lines.

    Is there some way to display all the selected items on one line?

    Is there some way to show text "Selected XXX objects" instead of the selected items, when too many items are being chosen?

  2. Martin Ivanov
    Admin
    Martin Ivanov avatar
    2240 posts

    Posted 25 Apr Link to this post

    Hello Игорь,

    To achieve your requirement you can change the ItemsPanel of the AutoCompleteBoxesItemsControl. The AutoCompleteBoxesItemsControl is placed inside the ControlTemplate of RadAutoCompleteBox. So, you can extract the ControlTemplate of RadAutoCompleteBox, then find the AutoCompleteBoxesItemsControl in it, and replace its ItemsPanel. By default it uses AutoCompleteBoxesWrapPanel, but in your case you can try if the native StackPanel will work for you. 

    Here is an example in code:
    <telerik:AutoCompleteBoxesItemsControl x:Name="PART_Boxes"
                                        DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
                                        BoxesItemTemplate="{TemplateBinding BoxesItemTemplate}"
                                        BoxesItemTemplateSelector="{TemplateBinding BoxesItemTemplateSelector}"
                                        BoxesItemStyle="{TemplateBinding BoxesItemStyle}"
                                        BoxesItemStyleSelector="{TemplateBinding BoxesItemStyleSelector}"
                                        IsTabStop="False"
                                        Foreground="{TemplateBinding Foreground}"
                                        Margin="{TemplateBinding Padding}">
        <telerik:AutoCompleteBoxesItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <!--<telerik:AutoCompleteBoxesWrapPanel/>-->
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </telerik:AutoCompleteBoxesItemsControl.ItemsPanel>
    </telerik:AutoCompleteBoxesItemsControl>
    This is part of the ControlTemplate of the RadAutoCompleteBox.

    You can also enable the ScrollViewer wrapping the AutoCompleteBoxesItemsControl by setting the ScrollViewer.HorizontalScrollBarVisibility property to Auto or Visible.
    <telerik:RadAutoCompleteBox ScrollViewer.HorizontalScrollBarVisibility="Visible"/>

    About the way to show text "Selected XXX objects", this is not supported out of the box. If you want to achieve such visualization you can introduce an additional element that will show this text in the ControlTemplate of RadAutoCompleteBox. Then when needed, you can set its Visibility to Visible, and the Visiblity of the AutoCompleteBoxesItemsControl Collapsed or Hidden.

    Regards,
    Martin Ivanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top