Binding Multiple Selections in RadListBox

2 posts, 0 answers
  1. Anthony
    Anthony avatar
    41 posts
    Member since:
    Apr 2012

    Posted 09 Mar 2015 Link to this post


    Telerik Product and Version

    Q1 2015 and up

    Supported Browsers and Platforms

    .NET 4.0/4.5

    Components/Widgets used (JS frameworks, etc.)

    Telerik quietly added a feature to their WPF RadListBox in their 1Q 2015 update that is coincidentally a feature I needed in a current project. The feature is the ability to bind the selected items in the RadListBox.

    The out of the box ListBox as well as Telerik’s RadListBox both have a SelectedItems property. Unfortunately, for whatever reason neither support binding to the property.

    My current project is a WPF Prism application with specialized module loading. The application will live on a Terminal Server with all modules installed, so the need is to load the modules based on the logged-on user. The objects in play are the user and module. The user contains a collection of the modules it is assigned.

    This use case can be approached in different ways. The approach I chose involves using two list boxes. The left list box contains a list of the users defined for the system. The right list contains a list of all the modules. The selections shown in the modules list box are changed as the currently selected user is changed.

    Example UI:

    The demo project addresses the problem in a simplified manner. There is no dependency on Prism or any other libraries other than the latest Telerik Devcraft tools for WPF; specifically, the RadListBox. Features in my solution have been scaled down to focus on the multiple selection binding.

    The implementation of the user and module objects are pretty straightforward with one exception. The modules contained in the user object need to be managed by an ObservableCollection<T>, or a collection that implements INotifyCollectionChanged and INotifyPropertyChanged.

    public sealed class AppUser
        public AppUser()
            Modules = new ObservableCollection<AppModule>();
        public string DisplayName { get; set; }
        public string UserName { get; set; }
        public ObservableCollection<AppModule> Modules { get; private set; }
        public override string ToString()
            return DisplayName ?? UserName ?? "(No Name)";

    You might think that you could simply bind to the SelectedItems and call it a day. Unfortunately, that doesn’t work. Telerik decided to keep the behavior of the out of the box list box for that property. Instead they implemented an attached behavior.

    <!-- cannot bind to the selected items this way -->
    <telerik:RadListBox Grid.Column="1" x:Name="ModulesListBox"
                        ItemsSource="{Binding Modules}"
                        SelectedItems="{Binding SelectedUser.Modules}"
                        SelectionMode="Multiple" />

    The behavior we want is available in the ListBoxSelectedItemsBehavior. Specifically, we use the SelectedItemsSource property. That will give us the selection behavior we want.

    <telerik:RadListBox Grid.Column="1" x:Name="ModulesListBox"
              ItemsSource="{Binding Modules}"
              telerik:ListBoxSelectedItemsBehavior.SelectedItemsSource="{Binding SelectedUser.Modules}"
              SelectionMode="Multiple" />

    The modules assigned to the user will follow in the module’s list box as we change the selection in the user’s list box with the ListBoxSelectedItemsBehavior in place.

    This new behavior fills a gap in functionality present in the RadListBox and it’s especially valuable in keeping implementation details from leaking into your view in an MVVM architecture. It seems like such a small thing, but features like this go a long way in making 3rd party tooling valuable within my organization.
  2. Kalin
    Kalin avatar
    1189 posts

    Posted 12 Mar 2015 Link to this post

    Hi Anthony,

    Thanks for preparing and sharing the project. I have updated your Telerik points as a gratitude for your effort.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top