locked
Combobox and checkbox with "Select All" Checkbox with binding in wpf RRS feed

  • Question

  • Hi Everybody,

            I want combobox with checkbox which is bind from list in mvvm pattern.

    And in head of the combobox list i want a checkbox as "Select All"

    When i'm selecting that select all i want to select all the chechboxes

    Please help me how to do this...

    Monday, December 16, 2013 7:00 AM

Answers

  • Hi,

    Your code should work fine if you the Collection Property binding in CollectionContainer to a CollectionViewSource.

    <Window.Resources> <CollectionViewSource x:Key="comboBoxSource" Source="{Binding Path=PlanNo}" /> </Window.Resources> <Grid> <ComboBox Height="30"> <ComboBox.ItemsSource> <CompositeCollection> <ComboBoxItem> <CheckBox x:Name="all">All</CheckBox> </ComboBoxItem> <CollectionContainer

    Collection="{Binding Source={StaticResource comboBoxSource}}"/> </CompositeCollection> </ComboBox.ItemsSource> <ComboBox.ItemTemplate> <DataTemplate> <CheckBox Name="chkTask" Content="{Binding}" IsChecked="{Binding ElementName=all, Path=IsChecked, Mode=OneWay}"></CheckBox> </DataTemplate> </ComboBox.ItemTemplate> </ComboBox> </Grid>

    I am assuming that PlanNo is a List.


    srithar

    • Marked as answer by Shaafs Monday, December 16, 2013 12:08 PM
    Monday, December 16, 2013 11:18 AM

All replies

  •  <StackPanel Height="100" HorizontalAlignment="Left" Margin="252,106,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="200">
                <CheckBox Content="Select All" Height="16" Name="checkBox1" IsChecked="True" />
                <CheckBox Content="CB1" IsChecked="{Binding Path=IsChecked, ElementName=checkBox1}" Height="16" Name="checkBox2" />
                <CheckBox Content="CB2" IsChecked="{Binding Path=IsChecked, ElementName=checkBox1}" Height="16" Name="checkBox3" />
                <CheckBox Content="CB3" IsChecked="{Binding Path=IsChecked, ElementName=checkBox1}" Height="16" Name="checkBox4" />
            </StackPanel>

    The IsChecked property of the first check box is bound to the corresponding values in the other checkboxes . Hope I answered :) .

    • Proposed as answer by HariHaran A Monday, December 16, 2013 7:30 AM
    • Unproposed as answer by Shaafs Monday, December 16, 2013 9:45 AM
    Monday, December 16, 2013 7:30 AM
  • Thanks for Response your HariHaranmsp

    I want  to bind the another checkbox values from view model

    That is dynamic.


    • Edited by Shaafs Monday, December 16, 2013 7:33 AM
    Monday, December 16, 2013 7:33 AM
  • Thank you AyyappanSubramanian

    I cant understand that  <x:Array> 

    How can i bind my values in the checkbox dynamically

    Where i want to bind it

    Monday, December 16, 2013 9:51 AM
  • Hi,

    Please refer the below code. Created a dynamic collection using Viewmodel.

    XAML:

    <Window x:Class="Combobox_SelectAll.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        
            Title="MainWindow" Height="350" Width="525">
        <Grid>
            <Grid>
                <Grid.Resources>
                    <CollectionViewSource x:Key="coll" Source="{Binding ComboItems}"/>               
                </Grid.Resources>
                <ComboBox Name="cboTask" Width="100" Height="30">
                    <ComboBox.ItemsSource>
                        <CompositeCollection>
                            <ComboBoxItem>
                                <CheckBox x:Name="all">All</CheckBox>
                            </ComboBoxItem>
                            <CollectionContainer Collection="{Binding Source={StaticResource coll}}"/>
                        </CompositeCollection>
                    </ComboBox.ItemsSource>
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <CheckBox Name="chkTask" Content="{Binding}" IsChecked="{Binding ElementName=all, Path=IsChecked, Mode=OneWay}"></CheckBox>
                        </DataTemplate>
                    </ComboBox.ItemTemplate>
                </ComboBox>
            </Grid>
        </Grid>
    </Window>
    

    public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
                this.DataContext = new MainViewModel();
            }
        }
    
        public class MainViewModel 
        {      
            public MainViewModel()
            {
                ComboItems = new ObservableCollection<string>();
                ComboItems.Add("Item1");
                ComboItems.Add("Item2");
            }
    
            public ObservableCollection<string> ComboItems { get; set; }
        } 

    Monday, December 16, 2013 10:07 AM
  • Hi Shaaf,

    You need Data trigger combined with a bool property.

    Refer the Code below,

     public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();      
                this.DataContext = new MainWindowViewModel();
            }
        }
    
        public class MainWindowViewModel : INotifyPropertyChanged
        {
            private bool isSelectAll;
            public bool IsSelectAll
            {
                get { return isSelectAll; }
                set
                {
                    isSelectAll = value;
                    OnPropertyChanged("IsSelectAll");
                }
            }
    
            private List<string> names;
            public List<string> Names
            {
                get { return names; }
                set
                {
                    names = value;
                    OnPropertyChanged("Names");
                }
            }
    
            public RelayCommand SetSelectAllCommand
            {
                get;
                set;
            }
    
            public MainWindowViewModel()
            {
                Names = new List<string> { "Select All", "Rohit", "Smith", "Richard", "William", "James", "powell", "Creig" };
                OnPropertyChanged("Names");
                SetSelectAllCommand = new RelayCommand(SetSelectAll);
            }
    
            public void SetSelectAll(object parameter)
            {
                if (parameter.Equals("Select All"))
                {
                    if (IsSelectAll) 
                        IsSelectAll = false;
                    else 
                        IsSelectAll = true;
                }
            }
    
            public event PropertyChangedEventHandler PropertyChanged;
            public void OnPropertyChanged(string propertyName)
            {
                var handler = this.PropertyChanged;
                if (handler != null) this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

    XAML:

    <Window.Resources> <Style x:Key="CheckBoxStyle" TargetType="CheckBox"> <Style.Triggers> <DataTrigger Binding="{Binding ElementName=MyWindow, Path=DataContext.IsSelectAll}" Value="True"> <Setter Property="IsChecked" Value="True"/> </DataTrigger> <DataTrigger Binding="{Binding ElementName=MyWindow, Path=DataContext.IsSelectAll}" Value="False"> <Setter Property="IsChecked" Value="False"/> </DataTrigger> </Style.Triggers> </Style> </Window.Resources> <Grid> <ComboBox ItemsSource="{Binding Names}" Height="30"> <ComboBox.ItemTemplate> <DataTemplate> <CheckBox

    Style="{StaticResource CheckBoxStyle}"

    Content="{Binding}" CommandParameter="{Binding}"

    Command="{Binding ElementName=MyWindow, Path=DataContext.SetSelectAllCommand}"/> </DataTemplate> </ComboBox.ItemTemplate> </ComboBox> </Grid> </Window>

    RelayCommand.cs

    public class RelayCommand : ICommand
        {
            private Action<object> _action;
    
            public RelayCommand(Action<object> action)
            {
                _action = action;
            }
    
            public bool CanExecute(object parameter)
            {
                return true;
            }
    
            public event EventHandler CanExecuteChanged;
            public void Execute(object parameter)
            {
                _action(parameter);
            }
        }

    Output


    srithar

    Monday, December 16, 2013 10:13 AM
  • this is my code
      <ComboBox Grid.Row="5" Grid.Column="3" 
                      Visibility="{Binding VisibilePlan,UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, NotifyOnSourceUpdated=True}"> 
                
                 <ComboBox.ItemsSource>
                    <CompositeCollection>
                        <ComboBoxItem>
                            <CheckBox x:Name="all">All</CheckBox>
                        </ComboBoxItem>
                        <CollectionContainer Collection="{Binding PlanNo}"/>
                    </CompositeCollection>
                </ComboBox.ItemsSource>
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <CheckBox Name="chkTask" IsChecked="{Binding ElementName=all, Path=IsChecked, Mode=OneWay}"></CheckBox>
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>
    Please can you tel wt mistake i did
    Monday, December 16, 2013 10:49 AM
  • Hi,

    Your code should work fine if you the Collection Property binding in CollectionContainer to a CollectionViewSource.

    <Window.Resources> <CollectionViewSource x:Key="comboBoxSource" Source="{Binding Path=PlanNo}" /> </Window.Resources> <Grid> <ComboBox Height="30"> <ComboBox.ItemsSource> <CompositeCollection> <ComboBoxItem> <CheckBox x:Name="all">All</CheckBox> </ComboBoxItem> <CollectionContainer

    Collection="{Binding Source={StaticResource comboBoxSource}}"/> </CompositeCollection> </ComboBox.ItemsSource> <ComboBox.ItemTemplate> <DataTemplate> <CheckBox Name="chkTask" Content="{Binding}" IsChecked="{Binding ElementName=all, Path=IsChecked, Mode=OneWay}"></CheckBox> </DataTemplate> </ComboBox.ItemTemplate> </ComboBox> </Grid>

    I am assuming that PlanNo is a List.


    srithar

    • Marked as answer by Shaafs Monday, December 16, 2013 12:08 PM
    Monday, December 16, 2013 11:18 AM
  • Thank you so much Srithar

    And I have one more doubt

    Can i give this

    <Window.Resources>
       <CollectionViewSource x:Key="comboBoxSource" Source="{Binding Path=PlanNo}" />   
    </Window.Resources>
    inside the comobobox resource...
    Monday, December 16, 2013 12:13 PM
  • Yes, you can give CollecetionViewSource inside ComboBox resources. 

    srithar

    Monday, December 16, 2013 12:39 PM
  • And once I finish checking the items,

    I want to show the how many items selected

    And checked Items in the comobox display

    Monday, December 16, 2013 12:46 PM