Share on twitter
Share on facebook
Share on linkedin
Introducing Multiselection Support in WPF Multi Column Dropdown

Introducing Multiselection Support in WPF Multi Column Dropdown

We are happy to announce that we have added multiple selection support for the Multi Column Dropdown (multi column combobox) control in our 2019 Volume 4 release. This feature allows users to select more than one item at a time from the drop-down.

This blog provides a walk-through of how to use the multiselection support in the Multi Column Dropdown control and its associated features.

Getting started

The Multi Column Dropdown provides built-in check boxes that allow users to select more than one item in the drop-down with complete keyboard support. You can confirm the selection using OK and Cancel buttons, similar to Excel.

Multiselection for the Multi Column Dropdown can be enabled by setting the SelectionMode property as Multiple like in the following code example. Also, you can easily get the selected items through the SelectedItems property.

<syncfusion:SfMultiColumnDropDownControl x:Name="MultiColumnDropDown"
                         ItemsSource="{Binding Orders}"
                         SelectionMode="Multiple">
</syncfusion:SfMultiColumnDropDownControl>
Multiselection Support
Multiselection Support

Select all option

You can easily select all items in the drop-down with one click on the check box in the header.

Selecting All Items
Selecting All Items

Custom separator string

You can change the string used to separate the selected values in the editor by setting the SeparatorString property.

<syncfusion:SfMultiColumnDropDownControl x:Name="MultiColumnDropDown"
                         ItemsSource="{Binding Orders}"
                         SelectionMode="Multiple"
                         SeparatorString="-">
</syncfusion:SfMultiColumnDropDownControl>
Hyphen Used as Separator String
Hyphen Used as Separator String

Header

The Multi Column Dropdown control provides support to load a custom view as a header using the HeaderTemplate property. This provides options to freeze the header at the top of the drop-down and helps users perform custom operations like search and filter in the drop-down itself.

<Window.Resources>
    <local:MultiConverter x:Key="multiConverter"/>
    <DataTemplate x:Key="headerTemplate">
        <Border BorderThickness="0,0,0,1" BorderBrush="#FFABADB3">
            <TextBox x:Name="searchTextBox" Margin="3" >
                <interactivity:Interaction.Triggers>
                    <interactivity:EventTrigger EventName="TextChanged">
                        <interactivity:InvokeCommandAction Command="{Binding Path=DataContext.TextChanged, Source={x:Reference Name= MultiColumnDropDown}}" >
                            <interactivity:InvokeCommandAction.CommandParameter>
                                <MultiBinding Converter="{StaticResource multiConverter}">
                                    <Binding Source="{x:Reference Name=MultiColumnControl5}"/>
                                    <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=TextBox}"/>
                                </MultiBinding>
                            </interactivity:InvokeCommandAction.CommandParameter>
                        </interactivity:InvokeCommandAction>
                    </interactivity:EventTrigger>
                </interactivity:Interaction.Triggers>
            </TextBox>
        </Border>
    </DataTemplate>
</Window.Resources>
<Grid>
   <syncfusion:SfMultiColumnDropDownControl x:Name="MultiColumnDropDown"
                            ItemsSource="{Binding Orders}"
                            HeaderTemplate="{StaticResource headerTemplate}"
                            SelectionMode="Multiple">
   </syncfusion:SfMultiColumnDropDownControl>
</Grid>
Custom Header in Multi Column Dropdown
Custom Header in Multi Column Dropdown

Conclusion

We hope you now have a clear idea about these features and how to get started with multiple row selection in the Multi Column Dropdown. To learn more about the Syncfusion Multi Column Dropdown control, please refer to our documentation. You can also download our 2019 Volume 4 release setup to check out these controls.

If you have any questions or require clarifications about these features, please let us know in the comments below. You can also contact us through our support forumDirect-Trac, or Feedback Portal. We are happy to assist you!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top