CellContentTemplate and checkbox

[Hugo]

I have a datagrid in which I fill it from a web services, I'm using a CellContentTemplate to integrate a checkbox, only when I try to assign the check it does not make the change.

 

<telerikGrid:RadDataGrid x:Name="RDG_Detalle" 
                                                 AutoGenerateColumns="False" 
                                                 SelectionMode="None"
                                                 UserEditMode="Cell" 
                                                 ItemsSource="{Binding}"
                                                 HorizontalOptions="FillAndExpand" 
                                                 VerticalOptions="FillAndExpand" 
                                                 UserFilterMode="Disabled" 
                                                 SelectionChanged="RDG_Detalle_SelectionChanged"
                                                 UserGroupMode="Disabled">
                            <telerikGrid:RadDataGrid.AlternateRowBackgroundStyle>
                                <telerikGrid:DataGridBorderStyle BackgroundColor="#D9D9D9"/>
                            </telerikGrid:RadDataGrid.AlternateRowBackgroundStyle>
                            <telerikGrid:RadDataGrid.Columns >
                                <telerikGrid:DataGridTemplateColumn HeaderText="Template Column" x:Name="pr">
                                    <telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                                        <DataTemplate>
                                            <!-- Your content -->
                                            <telerikPrimitives:RadCheckBox x:Name="checkbox" IsChecked="{Binding Escaneado}">

                                            </telerikPrimitives:RadCheckBox>
                                        </DataTemplate>
                                    </telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                                </telerikGrid:DataGridTemplateColumn>

                                <telerikGrid:DataGridNumericalColumn PropertyName="Cantidad" 
                                                                             HeaderText="Cantidad"
                                                                             CellContentFormat="{}{0:N2}"
                                                                             CanUserEdit="True" 
                                                                             SizeMode="Fixed"/>


                                <telerikGrid:DataGridTextColumn PropertyName="ProductoDescripcion" 
                                                                        HeaderText="Descripcion" 
                                                                        CanUserEdit="False"
                                                                        SizeMode="Stretch"/>
                                <telerikGrid:DataGridTextColumn PropertyName="AlmacenDescripcion" 
                                                                        HeaderText="Almacen" 
                                                                        CanUserEdit="False"
                                                                        SizeMode="Stretch"/>

                                <telerikGrid:DataGridTextColumn PropertyName="UbicacionDescripcion" 
                                                                        HeaderText="Ubicacion" 
                                                                        CanUserEdit="False"
                                                                        SizeMode="Stretch"/>

                                <telerikGrid:DataGridNumericalColumn PropertyName="Precio" 
                                                                             HeaderText="Precio"
                                                                             CellContentFormat="{}{0:C2}"
                                                                             CanUserEdit="True" 
                                                                             SizeMode="Fixed"/>

                                <telerikGrid:DataGridNumericalColumn PropertyName="Importe" 
                                                                             HeaderText="Importe"
                                                                             CellContentFormat="{}{0:C2}"
                                                                             CanUserEdit="True" 
                                                                             SizeMode="Fixed"/>

                                <telerikGrid:DataGridNumericalColumn PropertyName="Total" 
                                                                             HeaderText="Total"
                                                                             CellContentFormat="{}{0:C2}"
                                                                             CanUserEdit="True" 
                                                                             SizeMode="Fixed"/>

                                <telerikGrid:DataGridBooleanColumn PropertyName="IsEscaneado"
                                                                   HeaderText="IsEscaneado"/>
                                
                            </telerikGrid:RadDataGrid.Columns>
                        </telerikGrid:RadDataGrid>

 

 public bool IsEscaneado
        {
            get => Escaneado;
            set { Escaneado = value; OnPropertyChanged(); }
         
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public ICommand IsCheckedChangedCommand { get; set; }

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

[Lance | Senior Manager Technical Support]

Hi Hugo,

There are several problems with that code:

1 - The Checkbox is bound to the wrong property
2 - The BindingMode is not set to TwoWay
3 - The backing field is incorrect and there's no equality check

Let's take care of the most important ones first.

The biggest problem is that the Checkbox should be bound to IsEscaneado (not Escaneado).

In XAML, you need to set the binding mode to TwoWay if you want the UI element to also update the bound property. You can learn more in the Microsoft tutorial documentation: Data Binding Basics - The Binding Mode.

Here's what the code will look like after fixing #1 and #2

<telerikPrimitives:RadCheckBox  IsChecked="{Binding IsEscaneado, Mode=TwoWay}"/>

Regarding #3, I have two more suggestions:

- I would also add an equality check in the setter, this will prevent a lot of unnecessary property changed events form firing
- Use a property named backing field

That way you'll never accidentally use the wrong property because it starts with a lower-case letter. Private backing fields are just for the public property to use to hold the value and should never be used for binding.

private bool isEscaneado;
public bool IsEscaneado
{
    get => isEscaneado;
    set
    {
        if(isEscaneado == value)
           return;

        isEscaneado= value;
        OnPropertyChanged();
    }
}

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik