Textwrap for radcombobox in wpf which has AllowMultipleSelection

1 Answer 30 Views
ComboBox
Bhoopathi
Top achievements
Rank 1
Bhoopathi asked on 17 Mar 2022, 02:20 PM

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.

1 Answer, 1 is accepted

Sort by
0
Stenly
Telerik team
answered on 22 Mar 2022, 09:20 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
ComboBox
Asked by
Bhoopathi
Top achievements
Rank 1
Answers by
Stenly
Telerik team
Share this question
or