c# WPF Telerik combobox multiselect custom display value

Question

I want to create multiselect combobox control with telerik. The sample I found is in next link: https://docs.telerik.com/devtools/wpf/controls/radcombobox/features/multiple-selection

So, I created it like this:

<telerik:RadComboBox x:Name="radComboBox" AllowMultipleSelection="True" Height="30" Width="300" MultipleSelectionBoxTemplate="{StaticResource EmptyTemplate}">
        <telerik:RadComboBoxItem Content="Alapattah" />
        <telerik:RadComboBoxItem Content="Brickell Avenue" />
        <telerik:RadComboBoxItem Content="Downtown Miami" />
        <telerik:RadComboBoxItem Content="El Portal" />
</telerik:RadComboBox>

And the results are like it should be. But I want to show shorter text in "result" part of combobox, when it is closed. Now if I select Alapattah and El Portal, combobox value will be Alapattah, El Portal, and I would like to make it look like AL, EP.

So I created new Model, with 2 properties ID and Name, set in combobox DisplayMemberPath="Name" SelectedValuePath="ID", but still the results are the same, it only takes the value from DisplayMemberPath.

There is a DataTemplate for this multiselect:

<DataTemplate x:Key="EmptyTemplate">
<TextBlock FontWeight="Bold" FontFamily="Comic Sans" FontStyle="Italic" Text="{Binding}" />
</DataTemplate>

This way I get in combobox results like WpfApp1.Item, WpfApp1.Item...

If I set Text="{Binding Name}" I get nothing.

Here is the full code preview:

<Window x:Class="WpfApp10.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:local="clr-namespace:WpfApp10"
        mc:Ignorable="d"
        Title="MainWindow" 
        Height="450" 
        Width="800">
    <Grid>
        <Grid.Resources>
            <DataTemplate x:Key="EmptyTemplate">
                <TextBlock FontWeight="Bold" FontFamily="Arial" FontStyle="Italic" Text="{Binding Name}" />
            </DataTemplate>
        </Grid.Resources>
        <telerik:RadComboBox x:Name="radComboBox"
                             AllowMultipleSelection="True" 
                             Height="30" 
                             Width="300"
                             MultipleSelectionBoxTemplate="{StaticResource EmptyTemplate}">
        </telerik:RadComboBox>
    </Grid>
</Window>

So, is there any way to achieve this, maybe some custom template?

Answer 1

The selected values displayed in the combobox in the multiple selection scenario are actually a single string representing the selected items concatenated . You can find this value in the SelectionBoxItem or Text properties of RadComboBox.

Based on the exact case, the string will contain different values. For example, if you populate the control with RadComboBoxItems directly as in your first code snippet, the Content property of each item will be used. If you use the ItemsSource, the strings will come from the property pointed by the DisplayMemberPath. If DisplayMemberPath is not defined, the.ToString() implementation of the corresponding class (from the ItemsSource) is used. This is why you get "WpfApp1.Item, WpfApp1.Item..." in the last case.

To achieve your requirement , you can use the MultipleSelectionBoxTemplate, SelectionBoxItem and an IValueConverter.

<FrameworkElement.Resources>
    <local:SelectionToCustomStringCoverter x:Key="SelectionToCustomStringCoverter" />
</FrameworkElement.Resources>

<!-- -->

<telerik:RadComboBox x:Name="radComboBox" AllowMultipleSelection="True">
    <telerik:RadComboBox.MultipleSelectionBoxTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding ElementName=radComboBox, Path=SelectionBoxItem, Converter={StaticResource SelectionToCustomStringCoverter}}" />
        </DataTemplate>
    </telerik:RadComboBox.MultipleSelectionBoxTemplate>
</telerik:RadComboBox>

The IValueConverter should look something like this:

public class SelectionToCustomStringCoverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        string originalData = (string)value;
        string newData = // modify the original string
        return newData;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}