Select All check box issue in MVVM pattern

Question

I have problem implementing 'Select All' checkbox in SilverLight and MVVM design pattern.

<ListBox Name="PARENTLISTBox" ItemsSource="{Binding ParentList}">                        ------ Parent list box
<ListBox.ItemTemplate>
<DataTemplate>
<stackPanel orientation= "Vertical">
                            <TextBlock x:Name="txtblkParentName" Text="{Binding ParentName}" />

<CheckBox x:Name="SelectAllCheckBox" Content="Select All"
                                                      CommandParameter="{Binding ElementName= SelectAllCheckBox }"
                                                      Command="{Binding ElementName= PARENTLISTBox, Path=SelectAllCommand, Mode=TwoWay}"/>
                    </StackPanel>

<ListBox Name="CHILDLIST" ItemsSource="{Binding ChildProperty}" >   ------ child List box
                                 <ListBox.ItemTemplate>
                                                  <DataTemplate>
                                                       <StackPanel Orientation="Horizontal" Name="stkpanel">
                                                                <CheckBox Name="childCheckBox" Content="{Binding ChildName}"

                                                                          IsChecked="{Binding ElementName= SelectAllCheckBox, Path=IsChecked}"
                                                                          CommandParameter="{Binding ElementName= childCheckBox }"
                                                                          Command="{Binding ElementName=ParentList, Path=ChildCheckBoxCommand, Mode=TwoWay}" />
                                                        </StackPanel>
                                                  </DataTemplate>
                                 </ListBox.ItemTemplate>
                         </ListBox>
                               </DataTemplat>
        <ListBox.ItemTemplate>
   </ListBox>

The output is something like:

                                Father    [ ]Select all
                                 [ ] Child 1
                                 [ ] Child 2
                                 [ ] Child 3

                                Mother [ ]Select all
                                  [ ] Child 4
                                  [ ] Child 5
                                  [ ] Child 6

                                Grandfather     [ ]Select all
                                    [ ] Child 7
                                     ………..
                                    …………

If I check the Father checkbox, all the Childs should get selected under father. This is happening

But
Problem- 1 if I unselect any child, the 'select All' is still kept as selected --    this should not happen.
Problem 2- if I select/check on Father,……. child1,2,3 get selected, but if I un-select/un-check    any child say … child2 or child 1 then un-select Father(select All) and then again select/check Father, child 2 /child 1 remain un-selected/un-checked.

Problem 3 – on the select/check of 'select all' I want to add all the child in a arrayList/collection and if I unselect any child, that child should get removed from the childlist…

please suggest me how to proceed with this issue in MVVM pattern.

Amit C · Answer

Hi Mike I tried your provided sol. But instead of having 2 viewModels i had one View model in which i had a property IsSelectAllChecked. but the issue was when i am selecting the Parent(Mother) checkbox..... and hence setting the 'IsSelectAllChecked=true'. All the checkboxex on the page i.e. Fater Grandfather...... also used to get checked. (since selectAll check box itself is in a List/collection of ParentList.) Hence inorder to avoid above issue I didn't binded the SelectAll checkbox with any Property of ViewModel. My requirement is if Mohter (selectall) is checked only child 456 should get selected. and not Grandfather or Father (and child123). Hence binding childCheckBox to the Ischecked property of Select All work but just for UI prospective. and issue -2 still persists

Mike Gold · Answer

Okay First of all what you are doing has nothing to do with MVVM . In MVVM you are binding your checkboxes to a ViewModel. Here you are binding to other XAML elements. If you really wanted to handle the business logic in MVVM then you would bind IsChecked to something in your view model like a property named IsSelected. Since you are creating a list of checkboxes then you would probably have two view models a MainViewModel and a ViewModelItem to check track each listbox item (assuming each item in the listbox maps to some object in your ViewModel). so you would set the DataContext of your outer Listbox to something Like {Binding Parents) which would be a collection of ParentViewModel. The ParentViewModel would have a collection of Children. Both ParentViewModel and Children (which consists of ChildViewModel) would have an IsSelected Property which you could bind your checkbox too. If Mother is Selected your IsSelected property in your ParentViewModel would set all the IsSelected properties of all its children. If one child is unselected IsSelected in the child view would become false you would need to send a notify property changed to let the parent know. Then the parent could see which of its children were selected and if one wasn't it would set its own state to unselected. the checkboxes in your DataTemplate should look something like {Binding