This is a migrated thread and some comments may be shown as answers.

CellContentTemplate and checkbox

1 Answer 152 Views
DataGrid
This is a migrated thread and some comments may be shown as answers.
Hugo
Top achievements
Rank 1
Hugo asked on 22 May 2019, 11:59 PM

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));
        }

1 Answer, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 23 May 2019, 04:00 PM
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
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
Tags
DataGrid
Asked by
Hugo
Top achievements
Rank 1
Answers by
Lance | Manager Technical Support
Telerik team
Share this question
or