Datagrid template column with image problem

2 posts, 0 answers
  1. Harald
    Harald avatar
    1 posts
    Member since:
    Oct 2019

    Posted 16 Oct 2019 Link to this post

    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>

     

  2. Didi
    Admin
    Didi avatar
    382 posts

    Posted 18 Oct 2019 Link to this post

    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
Back to Top