Two way binding XamDataGrid field

Question

I have the following code inside a XamDataGrid:

 <igDp:Field Name="IsBlackChecked"  Label="Black Image" />

The problem is that its not two way binding. When I click the Checkbox in the UI the value is not being set.

I have tried the following solution:

 <igWPF:Field Name="IsBlackChecked" Label="Black Image" Width="Auto"  >
    <igWPF:Field.Settings>
      <igWPF:FieldSettings AllowEdit="True">
        <igWPF:FieldSettings.EditorStyle>
          <Style TargetType="{x:Type igWPF:XamCheckEditor}" 
            BasedOn="{StaticResource {x:Type igWPF:XamCheckEditor}}" >                                                <Setter Property="IsChecked"                                                        Value="{Binding DataItem.IsBlackChecked, Mode=TwoWay}"/>
           </Style>
         </igWPF:FieldSettings.EditorStyle>
        <igWPF:FieldSettings.CellValuePresenterStyle>
       <Style TargetType="{x:Type igWPF:CellValuePresenter}">
         <Setter Property="Template">
          <Setter.Value>
           <ControlTemplate TargetType="{x:Type igWPF:CellValuePresenter}">
            <CheckBox IsChecked="{Binding DataItem.IsBlackChecked, Mode=TwoWay}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
           </ControlTemplate>
          </Setter.Value>
         </Setter>
        </Style>
       </igWPF:FieldSettings.CellValuePresenterStyle>
      </igWPF:FieldSettings>
     </igWPF:Field.Settings>
   </igWPF:Field>

This does provides me with two way binding but it changes the style of the cell and the border lines are gone,

How can I specify two way binding in this field in the first options / restore the borderlines in the second?

Why are you overriding the style of the CellValuePresenter after setting the EditorStyle to XamCheckEditor? If you're doing that, you would need to add the border to your control template. Take a look at the default CellValuePresenter template to get an idea of what you'd need to do. — Sean Beanland, Jun 09 '15 at 16:04

Kylo Ren · Answer 1 · 2016-04-18T08:53:31.303

<igDp:Field Name="IsBlackChecked"  Label="Black Image" />

Above is two way binding by default(you can check for any datatype). The real problems in your scenario could be

when you'll try to check a checkbox the CellvaluePresenter will consume moues click event. so first you have to select a cell then if then you'll click on checkbox the checkbox will get checked. (this was happening in my case.)
You have not implemented the INotifyProertyChanged in you model class. so may be when you'll tab away(collection notification happens) from record the change will get reflected in the property(hopefully).

One Big Flaw:

you have created both editorstyle and cellvaluepresenterstyle. Only editorstyle is enough.(changing the cellvaluepresentrer style will change the look and feel & interaction behave of a cell. Thats why there is no border on your cell and probably selection indication would have gone wrong too.)

In editorstyle define the template/bindings as you need for checkbox. Then both functionally and aesthetically the solution will be complete.

 <Style x:Key="PrevPolLocIDStyle" TargetType="{x:Type igEditors:XamTextEditor}" BasedOn="{StaticResource {x:Type igEditors:XamTextEditor}}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                    <ContentControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                    Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type igDP:CellValuePresenter}}, Path=Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                 Background="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type igDP:CellValuePresenter}}, Path=Background, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                               BorderThickness="0,0" >

                    </ContentControl>
                    <Ellipse Height="10" Width="10" VerticalAlignment="Center" HorizontalAlignment="Right" ToolTip="Single Sublocation" Margin="10,0,0,0" >
                    <Ellipse.Style>
                        <Style  TargetType="{x:Type Ellipse}">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type igDP:DataRecordCellArea}}, Path=Record.DataItem.IsSingleInGroup}" Value="true">
                                    <Setter Property="Fill" Value="Blue"/>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type igDP:DataRecordCellArea}}, Path=Record.DataItem.IsSingleInGroup}" Value="false">
                                    <Setter Property="Fill" Value="Transparent"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Ellipse.Style>
                </Ellipse>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Above is a complex controltemplate for XamTextEditor. and use this style in your fieldsetting editorstyle property.

 <igDP:FieldSettings EditorStyle="{StaticResource PrevPolLocIDStyle}">

Note: Don't recreate CellValuePresenter Template unless there is an absolute necessity. Your case only requires to create an EditorStyle of a cell to bind a bool property to checkbox. In short you can move your CellValuePresenter Template code in EditorStyle with some adjustments to binding.

Two way binding XamDataGrid field

1 Answers1