Multiselect yet?

[IPV]

I've been reading a bunch of forum posts from 2011 about Multi Select in the ComboBox being on the dev track.

Is it here yet? How can I do multiselect in a RadComboBox (WPF) and read back the selected items in codebehind?

Here is what I have so far (from those old posts)

       <DataTemplate x:Key="RadComboBoxItemTemplate">
            <CheckBox Content="{Binding}"
                              IsChecked="{Binding Path=IsSelected,Mode=TwoWay}"
                              Height="16" HorizontalAlignment="Left" Margin="2"
                              VerticalAlignment="Top" />
        </DataTemplate>
        <DataTemplate x:Key="SelectionBoxTemplate">
            <TextBlock Text="{Binding SelectedItemsText,Mode=TwoWay}" />
        </DataTemplate>


<telerik:RadComboBox Name="cb_Others"
        ItemTemplate="{StaticResource RadComboBoxItemTemplate}"
        SelectionBoxTemplate="{StaticResource SelectionBoxTemplate}"
        Grid.Column="1" Grid.Row="3" HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch" Margin="3,3,6,3"/>

I load the control in codebehind like this:

cb_Others.ItemsSource = AvailableOthers;  // where AvailablesOthers is a List<string>

This almost works, it displays my items and lets me check the boxes, but I can't figure out how to read the selected items from codebehind.

Help?

[IPV]

Never mind...  I figured it out.  For others looking for a solution, here it is.

First, you can't just use a List<string> as the ItemSource. I used an ObservableCollection<SelectableString> where SelectableString is a real simple class:

public class SelectableString
{
    public string Text { get; set; }
    public bool IsSelected { get; set; }
}

Here are the DataTemplates:

<DataTemplate x:Key="RadComboBoxItemTemplate">
    <CheckBox Content="{Binding Path=Text}"
      IsChecked="{Binding Path=IsSelected,Mode=TwoWay}"
      Height="16" HorizontalAlignment="Left" Margin="2"
      VerticalAlignment="Top" />
</DataTemplate>
<DataTemplate x:Key="SelectionBoxTemplate">
    <TextBlock Text="{Binding SelectedItemsText,Mode=TwoWay}" />
</DataTemplate>

And the RadComboBox itself

<telerik:RadComboBox Name="cb_Others"
    ItemTemplate="{StaticResource RadComboBoxItemTemplate}"
    SelectionBoxTemplate="{StaticResource SelectionBoxTemplate}"
    Grid.Column="1" Grid.Row="3" HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch" Margin="3,3,6,3"
/>

To use from code-behind:

// assuming you have put some SelectableString instances in AvailableOthers
cb_Others.ItemsSource = AvailableOthers;

// Thanks to the Mode=TwoWay attribute in the DataTemplates
// you can look at any element of AvailableOthers at any time
// and see if it has been checked
var x = AvailableOthers[0].IsSelected;

[Nasko]

Hi Morgan,

We are glad that you've managed to achieve the desired functionality for RadComboBox. However, please notice that the control does not support multiple selection by design. Instead you could use RadAutoCompleteBox that supports it out of the box and provides many other helpful features.

You could check RadAutoCompleteBox in action in our Silverlight demos and this sample project from our SDK Repository that demonstrates how to add DropDowm button - thus the control will be much closer to RadComboBox.

We hope this will help you.

Regards,
Nasko
Telerik

 

 

[IPV]

Yes, very close... nice...

When using multiselect it is easy to have more selections than will fit in the AutoCompleteBox. For instance, lets say you have 20 items to choose from, but the AutoCompleteBox itself is only 2 items in height. The dropdown can show 20 items, but if you pick 3 items, when the dropdown collapses, only two of your three selections will be visible in the AutoCompleteBox.

Is there a way to add a vert scrollbar to the AutoCompleteBox so that all 3 items can be seen via scrolling?

[Nasko]

Hello Morgan,

You could visualize the VerticalScrollBar of RadAutoCompleteBox setting the VerticalScrollBarVisibility property of the ScrollViewer class to Visible:

<telerik:RadAutoCompleteBox x:Name="RadAutoCompleteBox"  ScrollViewer.VerticalScrollBarVisibility="Visible" />

Hopes this helps.

Regards,
Nasko
Telerik