Multiselect yet?

5 posts, 0 answers
  1. Morgan
    Morgan avatar
    15 posts
    Member since:
    Nov 2014

    Posted 28 Mar 2015 Link to this post

    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?


  2. Morgan
    Morgan avatar
    15 posts
    Member since:
    Nov 2014

    Posted 28 Mar 2015 in reply to Morgan Link to this post

    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;
  3. UI for WPF is Visual Studio 2017 Ready
  4. Nasko
    Admin
    Nasko avatar
    588 posts

    Posted 30 Mar 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  5. Morgan
    Morgan avatar
    15 posts
    Member since:
    Nov 2014

    Posted 30 Mar 2015 in reply to Nasko Link to this post

    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?
  6. Nasko
    Admin
    Nasko avatar
    588 posts

    Posted 31 Mar 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for WPF is Visual Studio 2017 Ready