Declined
Last Updated: 02 Mar 2019 06:46 by Alejandro Genovesi
Alejandro Genovesi
Created on: 26 Feb 2019 16:10
Category: Checkbox
Type: Bug Report
0
CheckBox into a ListView not enabled when CheckBoxUserCommand is implemented with MVVM

Hello!

When include a CheckBox inside a simple ListView (also with RadListView), and try implement the CheckBoxUserCommand Id="IsCheckedChanged" the control appears disabled.

I use MVVM and I need binding the checkedChanged Command to execute a custom operation related to specific row of the ListView; but, how can i know which element of the ListView affecting when checked  / unchecked the CheckBox. Here the code:

PD: Then prefix name of  <checkBoxComamnds:CheckBoxUserCommand>  is wrong, should be <checkBoxCommands: > (Error in word: Comamnds...)

XAML

<AbsoluteLayout BindingContext ="{Binding ViewModel}">      
        <ListView IsRefreshing="{Binding IsRefreshing, Mode=TwoWay}"
                ItemsSource="{Binding CalendarList}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                       <ViewCell>
                            <Grid>
                                <Grid.RowDefinitions >
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width = "Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions >
                                 < !--Calendar checkBox Selector -->
                                <telerikPrimitives:RadCheckBox
                                      x:Name="checkViewCalendar">
                                    <telerikPrimitives:RadCheckBox.Commands>
                                        <checkBoxComamnds:CheckBoxUserCommand
                                              Command = "{Binding IsCheckedChangedCommand}"
                                              Id="IsCheckedChanged" 
                                              SuppressDefaultCommand="True">
                                        </checkBoxComamnds:CheckBoxUserCommand>
                                    </telerikPrimitives:RadCheckBox.Commands>
                                </telerikPrimitives:RadCheckBox>
                                <!-- Name of Agenda -->
                                <Label
                                    Grid.Row="0"
                                    Grid.Column="1"
                                    HorizontalOptions="FillAndExpand"
                                    Text="{Binding Name}">
                                </Label>
                           </Grid >
                      </ViewCell >
                   </DataTemplate >
               </ListView.ItemTemplate >
           </ListView >
</AbsoluteLayout>

MVVM Code


namespace ViewModels
{
   //using ...
    using System.Windows.Input;
    using Xamarin.Forms;
    using Telerik.XamarinForms.Primitives.CheckBox.Commands;

    public class CalendarsViewModel : BaseViewModel
        
       public CalendarsViewModel()
        {
            this.IsCheckedChangedCommand = new Command<CheckBoxIsCheckChangedCommandContext>(this.CheckBoxChange);
            this.LoadCalendars();
        }

       private async void CheckBoxChange(CheckBoxIsCheckChangedCommandContext context)
        {
            await Application.Current.MainPage.DisplayAlert(
                    "MVVM Alert Start",
                    $"CheckBox User Command executed at {DateTime.Now.ToLocalTime()} in {context.ToString()}",
                    "Ok");
           //How identify the container row in the context?
        }
        public ICommand IsCheckedChangedCommand { get; set; }

        public ObservableCollection<Calendar> CalendarList
        {
            get { return this.calendars; }
            set { SetValue(ref this.calendars, value); }
        }
        private async void LoadCalendars()
        {
           // API Call to get List and create ObservableCollection Binding to ListView
        }
Thanks for your help!

2 comments
Alejandro Genovesi
Posted on: 02 Mar 2019 06:46

Thanks Yana!

I could solve it with a slightly different approach. Creating a viewmodel that inherits from Calendar Model, and implementing ICommand there.

ADMIN
Yana
Posted on: 01 Mar 2019 13:18
Hello Alejandro,

Thank you for sending the snippet.

The command of the CheckBox is not raised as the binding is nor correct.  When any controls are placed inside ListView ItemTemplate, their binding context is the ListView business item, which is of type Calendar in the concrete case. 

You would need to modify the binding like this in order to bind to the command defined in the ListView ViewModel:

<checkBoxCommands:CheckBoxUserCommand
        Command = "{Binding Source={x:Reference listView}, Path=BindingContext.IsCheckedChangedCommand}"
        Id="IsCheckedChanged"
        SuppressDefaultCommand="True">

I've updated the status of the bug report to "Declined".

As to the second question about accessing the ListView item for when the CheckBox is checked - currently there isn't a straightforward way to accomplish it. Still, I have researched various approaches and come up with a custom solution - through attached behavior you could add a command parameter to the CheckBoxUserCommand and bind that parameter to the ListView item. Please download the attached project for the exact implementation.

I hope I was of help.

Regards,
Yana
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Attached Files: