Layout issue when using pull to refresh

5 posts, 1 answers
  1. Valentin
    Valentin avatar
    25 posts
    Member since:
    Jun 2018

    Posted 06 Jul 2018 Link to this post

    I have a RadListView which uses a ListViewTemplateCell to specify the list item layout.
    When the list is displayed initially, the layout looks OK. After using pull to refresh a few times, the layout looks weird. With the example I'm attaching below, the layout is affected typically on the fourth pull to refresh. Just watch the rightmost text how it shifts to the left and right as you pull to refresh. Keep pulling for even more movement.

    Telerik_UI_for_Xamarin_2018_2_516_2_Dev
    Shared code project targets .NET Standard 1.4
    Xamarin Forms 2.5.1.527436
    Android
    Android 8.1 (API Level 27 - Oreo) - on emulator

    Here's the page:
    <?xml version="1.0" encoding="utf-8" ?>
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:local="clr-namespace:ListBug"
                 xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
                 xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
                 x:Class="ListBug.MainPage"
                 x:Name="Self">
     
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
     
            <telerikDataControls:RadListView x:Name="listView"
                            ItemsSource="{Binding Path=Items, Source={x:Reference Name='Self'}}"
                            IsPullToRefreshEnabled="True"
                            RefreshRequested="listView_RefreshRequested">
                <telerikDataControls:RadListView.ItemTemplate>
                            <DataTemplate>
                                <telerikListView:ListViewTemplateCell>
                                    <telerikListView:ListViewTemplateCell.View>
                                        <Grid RowSpacing="2" Padding="5, 0, 5, 0">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="4*"/>
                                                <ColumnDefinition Width="1*"/>
                                            </Grid.ColumnDefinitions>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                            </Grid.RowDefinitions>
                                            <Label Text="{Binding Overview}" />
                                            <Label Grid.Row="1" Text="{Binding Details}" />
                                            <Label Grid.Column="1" Grid.RowSpan="2" Text="{Binding Other}" HorizontalTextAlignment="End" VerticalTextAlignment="Center" />
                                        </Grid>
                                    </telerikListView:ListViewTemplateCell.View>
                                </telerikListView:ListViewTemplateCell>
                            </DataTemplate>
                </telerikDataControls:RadListView.ItemTemplate>
            </telerikDataControls:RadListView>
     
        </Grid>
    </ContentPage>

     

    Here's the code behind:

    using System.Collections.Generic;
    using Xamarin.Forms;
     
    namespace ListBug
    {
        public partial class MainPage : ContentPage
        {
     
            public static readonly BindableProperty ItemsProperty =
                BindableProperty.Create(nameof(Items), typeof(List<Item>), typeof(MainPage), default(List<Item>), BindingMode.Default, null);
     
            public List<Item> Items
            {
                get { return (List<Item>)GetValue(ItemsProperty); }
                set { SetValue(ItemsProperty, value); }
            }
     
            public MainPage()
            {
                InitializeComponent();
                InitializeItems();
            }
     
            private void InitializeItems()
            {
                Items?.Clear();
                var items = new List<Item>();
     
                items.Add(new Item()
                {
                    Overview = "First item overview",
                    Details = "First item details",
                    Other = "Item1"
                });
                items.Add(new Item()
                {
                    Overview = "Second item overview",
                    Details = "Second item details",
                    Other = "Item2"
                });
                items.Add(new Item()
                {
                    Overview = "Third item overview",
                    Details = "Third item details",
                    Other = "Item3"
                });
                items.Add(new Item()
                {
                    Overview = "Fourth item overview",
                    Details = "Fourth item details",
                    Other = "Item4"
                });
                items.Add(new Item()
                {
                    Overview = "Fifth item overview",
                    Details = "Fifth item details",
                    Other = "Item5"
                });
     
                Items = items;
            }
     
            private void listView_RefreshRequested(object sender, Telerik.XamarinForms.DataControls.ListView.PullToRefreshRequestedEventArgs e)
            {
                InitializeItems();
                listView.EndRefresh(true);
            }
        }
    }

     

    and here's the Item class

    namespace ListBug
    {
        public class Item
        {
            public string Overview { get; set; }
            public string Details { get; set; }
            public string Other { get; set; }
        }
    }

  2. Answer
    Didi
    Admin
    Didi avatar
    356 posts

    Posted 09 Jul 2018 Link to this post

    Hi Valentin,

    Thank you for the provided code.

    I tested it and I reproduced the issue you described. I have logged this in our Feedback portal as a bug and you could follow the item on the provided link below:
    https://feedback.telerik.com/Project/168/Feedback/Details/251950-listviewandroid-inaccurate-measure-when-pull-to-refresh-is-enabled

    As a workaround you could add the DataTemplate as a resource in the Resource page of the app and set the ItemTemplate as a static resource from type DataTemplate. 
    Please take a look at the provided example and let me know if you have any other questions on this.

    You can also find your Telerik points updated for reporting this to us.

    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
  3. Valentin
    Valentin avatar
    25 posts
    Member since:
    Jun 2018

    Posted 09 Jul 2018 in reply to Didi Link to this post

    Thank you for confirming and logging the bug, Didi. I implemented the workaround and it indeed resolves the issue for now. Look forward to the bug fix.

    Valentin

  4. IanV
    IanV avatar
    39 posts
    Member since:
    Dec 2008

    Posted 08 Jan 2019 Link to this post

    I'm having a similar problem where the layout of a very complex cell isn't correct. Pull to Refresh often fixes it though.

     

    I tried putting the Template into a resource but no change.

     

    Is there an update to the bug?

     

    Android only

  5. Lance | Manager Technical Support
    Admin
    Lance | Manager Technical Support avatar
    1168 posts

    Posted 08 Jan 2019 Link to this post

    Hello Ian,

    You can check the status of a bug report (or feature request) by opening the Feedback Hub link link and checking the status. If you'd like to be notified immediately when the status changes, click the "Follow" button at the top of the issue,

    Here's a screenshot of the Feedback Item you're asking about





    When development team is currently working on the item, that will be changed to "In Development". Additionally, if it's been released, it will show "Completed". 

    Note: If this is a showstopper for you, take a look at Didi's workaround to see if that's a solution for you.

    Regards,
    Lance | Tech Support Engineer, Sr.
    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