Datagrid template column with image problem

[Harald]

I was evaluating the Xamarin.Forms controls and tried to build a testgrid with a template column.

The column contains an imagebutton with bound IsVisible property.

The grid renders correct but as soon as you start scrolling the grid the invisible imagebuttons go wild and start to get visible.

Image 1 is before scrolling up and down a few times.

Image 2 is after scrolling.

This happens on all platforms (ios,android,uwp)

XAML:

<telerikGrid:RadDataGrid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" UserEditMode="None" UserFilterMode="Disabled" UserGroupMode="Disabled" UserSortMode="None" ItemsSource="{Binding Contract.ContractEntries}" AutoGenerateColumns="False" GridLinesThickness="1" GridLinesColor="Black">
                    <telerikGrid:RadDataGrid.Columns>
                        <telerikGrid:DataGridTemplateColumn SizeMode="Fixed" Width="60" CanUserSort="False" CanUserFilter="False" CanUserGroup="False">
                            <telerikGrid:DataGridTemplateColumn.HeaderStyle>
                                <telerikGrid:DataGridColumnHeaderStyle
                                    OptionsButtonTextColor="Transparent"
                                    BorderColor="#D9D9D9"
                                    BorderThickness="1" />
                            </telerikGrid:DataGridTemplateColumn.HeaderStyle>
                            <telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                                <DataTemplate>
                                    <ImageButton HeightRequest="15" WidthRequest="15" Source="edit.png" IsVisible="{Binding Editable}" Command="{Binding EntryOnClick}" />
                                </DataTemplate>
                            </telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                        </telerikGrid:DataGridTemplateColumn>
                        <telerikGrid:DataGridNumericalColumn PropertyName="Count" SizeMode="Auto">
                            <telerikGrid:DataGridNumericalColumn.HeaderStyle>
                                <telerikGrid:DataGridColumnHeaderStyle
                                    OptionsButtonTextColor="Transparent"
                                    BorderColor="#D9D9D9"
                                    BorderThickness="1" />
                            </telerikGrid:DataGridNumericalColumn.HeaderStyle>
                        </telerikGrid:DataGridNumericalColumn>
                        <telerikGrid:DataGridTextColumn PropertyName="Title" SizeMode="Stretch">
                            <telerikGrid:DataGridTextColumn.HeaderStyle>
                                <telerikGrid:DataGridColumnHeaderStyle
                                    OptionsButtonTextColor="Transparent"
                                    BorderColor="#D9D9D9"
                                    BorderThickness="1" />
                            </telerikGrid:DataGridTextColumn.HeaderStyle>
                        </telerikGrid:DataGridTextColumn>
                        <telerikGrid:DataGridNumericalColumn SizeMode="Auto" PropertyName="Price" CellContentFormat="{}{0:C2}">
                            <telerikGrid:DataGridNumericalColumn.HeaderStyle>
                                <telerikGrid:DataGridColumnHeaderStyle
                                    OptionsButtonTextColor="Transparent"
                                    BorderColor="#D9D9D9"
                                    BorderThickness="1" />
                            </telerikGrid:DataGridNumericalColumn.HeaderStyle>
                        </telerikGrid:DataGridNumericalColumn>
                    </telerikGrid:RadDataGrid.Columns>
                </telerikGrid:RadDataGrid>

[Didi]

Hello Harald,

Thank you for your interest in Telerik UI for Xamarin suite.

I have created a sample based on the provided code and I reproduced the behavior on my side. The behavior observes because each time the datagrid is scrolled the TemplateColumn updates its content and the images are shown. In order to solve this you should set two way binding to the ImageButton IsVisible property: 

<telerikGrid:DataGridTemplateColumn.CellContentTemplate>
     <DataTemplate>
           <ImageButton HeightRequest="15" WidthRequest="15" Source="edit.png" IsVisible="{Binding Editable, Mode=TwoWay}" Command="{Binding EntryOnClick}" />
     </DataTemplate>
</telerikGrid:DataGridTemplateColumn.CellContentTemplate>

In this way the TemplateColumn CellContentTemplate will be updated with the correct value. 

I hope the provided information was helpful.

Regards,
Didi
Progress Telerik