Category / Section
How can I select or unselect all the items in ComboBoxAdv?
1 min read
You can select or unselect all the items by using the SelectedItems property of the ComboBoxAdv.
The following example illustrates how you can select or unselect the items in Button-click command using the SelectedItems property.
XAML
<syncfusion:ChromelessWindow x:Class="ComboBoxAdv_136469.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ComboBoxAdv_136469"
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
syncfusion:SkinStorage.VisualStyle="Metro"
Title="MainWindow" Height="350" Width="525">
<syncfusion:ChromelessWindow.DataContext>
<local:ViewModel/>
</syncfusion:ChromelessWindow.DataContext>
<syncfusion:ChromelessWindow.Resources>
<DataTemplate x:Key="ComboTemplate">
<Grid>
<TextBlock Text="{Binding Path=Key}"/>
</Grid>
</DataTemplate>
</syncfusion:ChromelessWindow.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<syncfusion:ComboBoxAdv ItemsSource="{Binding ControlsList}" ItemTemplate="{StaticResource ComboTemplate}"
HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="ControlsCombo"
SelectedItems="{Binding SelectionList}"
Height="50" Width="220" AllowMultiSelect="True" Grid.RowSpan="2"/>
<StackPanel Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button Height="40" Width="150" Margin="10 5"
Content="Click to Select all items" Command="{Binding SelectAllCommand}"/>
<Button Height="40" Width="150" Margin="10 5"
Content="Click to Unselect all items" Command="{Binding UnselectAllCommand}"/>
</StackPanel>
</Grid>
</syncfusion:ChromelessWindow>
Model
public class Model : NotificationObject
{
public Model(string name, bool isSelected)
{
ControlName = name;
ControlIsSelected = isSelected;
}
private string _control;
public string ControlName
{
get { return _control; }
set
{
_control = value;
RaisePropertyChanged("ControlName");
}
}
private bool _selected;
public bool ControlIsSelected
{
get { return _selected; }
set
{
_selected = value;
RaisePropertyChanged("ControlIsSelected");
}
}
}
ViewModel
public class ViewModel : NotificationObject
{
public ViewModel()
{
ModelList = new ObservableCollection<Model>();
ModelList.Add(new Model("Autocomplete", false));
ModelList.Add(new Model("Busyindicator", false));
ModelList.Add(new Model("ComboBoxAdv", false));
ModelList.Add(new Model("CalendarEdit", false));
ModelList.Add(new Model("CardView", false));
ModelList.Add(new Model("GroupBar", false));
ModelList.Add(new Model("MenuItemAdv", false));
ModelList.Add(new Model("NotifyIcon", false));
ModelList.Add(new Model("Overview", false));
ModelList.Add(new Model("Ribbon", false));
ModelList.Add(new Model("DockingManager", false));
ControlsList = new ObservableCollection<KeyValuePair<string, Model>>();
foreach(Model mitem in ModelList)
{
ControlsList.Add(new KeyValuePair<string, Model>(mitem.ControlName, mitem));
}
SelectionList = new ObservableCollection<KeyValuePair<string, Model>>();
}
public ICommand SelectAllCommand
{
get { return new DelegateCommand<object>(SelectAll, CanExecuteSelection); }
}
private void SelectAll(object context)
{
foreach (KeyValuePair<string, Model> keyobject in ControlsList)
{
SelectionList.Add(keyobject);
}
}
private bool CanExecuteSelection(object context)
{
return true;
}
public ICommand UnselectAllCommand
{
get { return new DelegateCommand<object>(UnselectAll, CanExecuteSelection); }
}
private void UnselectAll(object context)
{
foreach (KeyValuePair<string, Model> keyobject in ControlsList)
{
SelectionList.Clear();
}
}
private ObservableCollection<Model> mlist;
public ObservableCollection<Model> ModelList
{
get { return mlist; }
set
{
mlist = value;
RaisePropertyChanged("ModelList");
}
}
private ObservableCollection<KeyValuePair<string, Model>> list;
public ObservableCollection<KeyValuePair<string, Model>> ControlsList
{
get { return list; }
set
{
list = value;
RaisePropertyChanged("ControlsList");
}
}
private ObservableCollection<KeyValuePair<string, Model>> slist;
public ObservableCollection<KeyValuePair<string, Model>> SelectionList
{
get { return slist; }
set
{
slist = value;
RaisePropertyChanged("SelectionList");
}
}
}
The following screenshot displays the items when the “Click to select all items” button is clicked.
Figure 1: “Click to select all items” button is clicked
The following screenshot clears all the items when the “Click to unselect all items” button is clicked.
Figure 2: “Click to unselect all items” button is clicked
