Sizing AutoComplete DropDownList

[Equipe Info]

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.

[Konstantina]

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

[Equipe Info]

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 ?

[Konstantina]

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

[Equipe Info]

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 ?

[Konstantina]

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

[Equipe Info]

Hello,

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

Regards