This is a migrated thread and some comments may be shown as answers.
Datagrid template column with image problem
1 Answer 42 Views
This is a migrated thread and some comments may be shown as answers.
Harald
Top achievements
Rank 1
Harald asked on 16 Oct 2019, 10:44 AM

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>

 

1 Answer, 1 is accepted

Sort by
0
Didi
Telerik team
answered on 18 Oct 2019, 08:16 AM

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

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
Asked by
Harald
Top achievements
Rank 1
Answers by
Didi
Telerik team
Share this question
or