Sizing AutoComplete DropDownList

7 posts, 1 answers
  1. Equipe Info
    Equipe Info avatar
    17 posts
    Member since:
    Aug 2010

    Posted 10 Mar 2011 Link to this post

    Hi,

    We are using the RadComboBox with AutoComplete mode.
    It works fine but we would like to fix the size of the DropDownList so that it doesn't change when scrolling (it seems to fit to the max size of the visible items...).
    If we modify the ItemTemplate or the SelectionBoxTemplate, it doesn't behave correctly with the filter.

    Could you provide us an example to do that ?

    Thank you.
  2. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 14 Mar 2011 Link to this post

    Hello Equipe,

    Thank you for contacting us.

    To achieve that you will have to set a panel for ItemsPanelTemplate of the RadComboBox and set its Width property, for example:

    <telerik:RadComboBox Width="200"Height="50">
                <telerik:RadComboBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Width="200"/>
                    </ItemsPanelTemplate>
                </telerik:RadComboBox.ItemsPanel>
            </telerik:RadComboBox>

    Hope this helps. Please let us know if you have further questions.

    Regards,
    Konstantina
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. DevCraft banner
  4. Equipe Info
    Equipe Info avatar
    17 posts
    Member since:
    Aug 2010

    Posted 15 Mar 2011 Link to this post

    Hello,

    Thanks for your answer but sorry I forgot to say that we were using the VirtualizingStackPanel property for the ComboBox...
    So we can't use your solution...

    Any idea on how to do that with the VirtualizingStackPanel ?
  5. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 16 Mar 2011 Link to this post

    Hello Equipe,

    In that case I can suggest you to use the ItemContainerStyle property of the ComboBox and set the Width property in the style to fit your requirements. Please refer to this help article for more information.

    Please let us know if you have further questions.

    Best wishes,
    Konstantina
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  6. Equipe Info
    Equipe Info avatar
    17 posts
    Member since:
    Aug 2010

    Posted 16 Mar 2011 Link to this post

    Hi,

    We tried your solution with the ItemContainerStyle but the style seems not to be working.
    Here is what we did :

    <UserControl.Resources>
            <Style x:Key="ItemContainerStyle"
                   TargetType="telerikInputControls:RadComboBoxItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <DataTemplate>
                            <TextBlock Width="300" />
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    </UserControl.Resources>
     
    <telerikInputControls:RadComboBox ItemsSource="{Binding Source={StaticResource BoatsCollectionViewSource}}"
    IsMouseWheelEnabled="False"
    DisplayMemberPath="Label"
    SelectedItem="{Binding Boat, Mode=TwoWay}"
    HorizontalAlignment="Stretch"
    MaxDropDownHeight="150"
    Width="200"
    IsReadOnly="True"
    IsEditable="True"
    SelectAllTextEvent="None"
    IsTextSearchEnabled="True"
    IsFilteringEnabled="True"
    FilteringMode="StartsWith"
    StaysOpenOnEdit="True"
    OpenDropDownOnFocus="True"
    ItemContainerStyle="{StaticResource ItemContainerStyle}"
    ClearSelectionButtonVisibility="Visible"
    ClearSelectionButtonContent="Clear">
    <telerikInputControls:RadComboBox.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel />
        </ItemsPanelTemplate>
    </telerikInputControls:RadComboBox.ItemsPanel>
    </telerikInputControls:RadComboBox>

    Have we done something wrong ?
  7. Answer
    Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 21 Mar 2011 Link to this post

    Hi Equipe,

    Thank you for the code snippet.

    To make it work please edit the Style as follows:

    <Style x:Key="ItemContainerStyle" TargetType="telerik:RadComboBoxItem">
                  <Setter Property="Width" Value="200">
                  </Setter>
              </Style>

    Hope this helps. I will be happy to assist you further if you still experience difficulties.

    Best wishes,
    Konstantina
    the Telerik team
  8. Equipe Info
    Equipe Info avatar
    17 posts
    Member since:
    Aug 2010

    Posted 21 Mar 2011 Link to this post

    Hello,

    Thank you, it works fine now with the style on the Width property.

    Regards
Back to Top
DevCraft banner