Textwrap for radcombobox in wpf which has AllowMultipleSelection

[Bhoopathi]

Text wrap for radcombobox in WPF which has AllowMultipleSelection:

 

<telerik:RadComboBox Grid.Column="4" Width="300" MaxWidth="300" AllowMultipleSelection="True" SelectedItem="{Binding IngredientSourceSelectedItem}" ItemsSource="{Binding IngredientSource, Mode=TwoWay }" Text="{Binding Ingredients, Mode=TwoWay}"
 IsEnabled="{Binding IsReadOnlyIngredientSource, Converter={StaticResource ReadOnlyToEnabledConverter}}" VerticalAlignment="Stretch">
</telerik:RadComboBox>

 

need like this: if it overflows it should be shown in next line.

[Stenly]

Hello Bhoopathi,

Currently, the RadComboBox element does not support this out-of-the-box, because, in a multi-selection scenario, the selected items are represented by a single TextBlock element, which shows these items separated by a comma. However, a similar result to the desired one could be achieved, by creating a custom DataTemplate for the MultipleSelectionBoxTemplate property of the RadComboBox control. Inside the DataTemplate, create a new ItemsControl with its ItemsSource property bound to the SelectedItems collection of the RadComboBox instance. This ItemsControl instance could be placed inside a StackPanel layout with Orientation="Vertical". After that, create a new DataTemplate for the ItemTemplate property of the ItemsControl, with a TextBlock element, which could be bound to the desired property, used for displaying the selected item. In the scenario present on your end, this property could be IngredientSourceSelectedItem.

The following code snippet shows a sample implementation of this suggestion:

<telerik:RadComboBox.MultipleSelectionBoxTemplate>
    <DataTemplate>
        <StackPanel Orientation="Vertical" >
            <ItemsControl ItemsSource="{Binding ElementName=radComboBox, Path=SelectedItems}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding IngredientSourceSelectedItem}"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    </DataTemplate>
</telerik:RadComboBox.MultipleSelectionBoxTemplate>

Furthermore, the position of the dropdown should also be changed when the height of the RadComboBox changes. This could be done in the SelectionChanged event of the RadComboBox element:

private void radComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var comboBox = sender as RadComboBox;
    var popup = comboBox.ChildrenOfType<Popup>().FirstOrDefault();
    if (popup != null)
    {
        Dispatcher.BeginInvoke((Action)(() => {
            popup.VerticalOffset -= 1;
            popup.VerticalOffset += 1;
        }), DispatcherPriority.ApplicationIdle);
    }
}

With that said, I have prepared a sample project, so, could you give it a try?

Regards,
Stenly
Progress Telerik