How to bind select all , specific check to view model or model

Question

Hi,

1.I would like to get how to build the view model for this screenshot

especially to select all , specific check .

2.I want when select all all checkboxes will be checked and when i checked all the checkboxes the select all will be checked.

3.How to save the selected data.

Answer 1

Hello,

I want when select all all checkboxes will be checked

For this, you could bind the select_all checkbox to the ViewModel by traversing the list by running through the code below:

// in xaml.
<CheckBox x:Name="select_all" IsChecked="{Binding IsChecked}"> 
    <CheckBox.Behaviors>
        <toolkit:EventToCommandBehavior
                    EventName="CheckedChanged"
                    Command="{Binding MyCustomCommand}" />
    </CheckBox.Behaviors>
</CheckBox>

// in View Model.
private bool isChecked;
    public bool IsChecked
    {
        get
        {
            return isChecked;
        }
        set
        {
            if (isChecked != value)
            {
                isChecked = value;
                OnPropertyChanged(); // reports this property
            }
        }
    }
    private ObservableCollection<Item> items;

    public ObservableCollection<Item> Items
    {
        get
        {
            return items;
        }
        set
        {
            if (items != value)
            {
                items = value;
                OnPropertyChanged(); // reports this property
            }
        }
    }

    public Command MyCustomCommand => new Command(SelectAll);

    private void SelectAll()
    {
        foreach (var item in Items)
        {
            item.IsSelected = IsChecked;
        }
    }

Since the checkbox itself does not support the use of command, I used the EventToCommand feature in ToolKit in my example for binding. You could refer to EventToCommandBehavior for more details.

and when i checked all the checkboxes the select all will be checked.

You could refer to the following code to implement this function:

//in xaml
<ContentPage 
      x:Name="testPage" // Since in the collection class view, the checkbox is generated by the DataTemplate, you could give the page a name to look for the binding context in the DataTemplate.

<CheckBox IsChecked="{Binding IsSelected}" Margin="10"> 
            <CheckBox.Behaviors>
                   <toolkit:EventToCommandBehavior
                    EventName="CheckedChanged"
                    Command="{Binding Source={x:Reference testPage}, Path=BindingContext.CheckIfSelectAllCommand}" />
            </CheckBox.Behaviors>
</CheckBox>

// in viewmodel.
public Command CheckIfSelectAllCommand => new Command(CheckIfSelectAll); 
private void CheckIfSelectAll()
{
    var list = Items.Where(x => x.IsSelected == true).ToList(); //Linq query statement
    if (list.Count == 0)
    {
        IsChecked = false;
    }
    else if (list.Count == items.Count)
    {
        IsChecked = true;
    }
}

In the above code, I used a Linq query statement to avoid manually traversing the list. You could refer to Language Integrated Query for more details.

How to save the selected data.

You could refer to the following code to retrieve all selected items from the bound data list, and then you can save the data according to your needs.

// in viewmodel.
public Command SaveCommand => new Command(SaveSelected)
    private void SaveSelected()
    {
        var list = Items.Where(x => x.IsSelected == true).ToList();
	
    }

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.