This is a migrated thread and some comments may be shown as answers.
Layout issue when using pull to refresh
4 Answers 53 Views
This is a migrated thread and some comments may be shown as answers.
Valentin
Top achievements
Rank 1
Valentin asked on 06 Jul 2018, 09:03 PM

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; }
    }
}

4 Answers, 1 is accepted

Sort by
0
Accepted
Didi
Telerik team
answered on 09 Jul 2018, 02:25 PM
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
0
Valentin
Top achievements
Rank 1
answered on 09 Jul 2018, 04:53 PM

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

0
IanV
Top achievements
Rank 1
Veteran
answered on 08 Jan 2019, 08:40 PM

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

0
Lance | Manager Technical Support
Telerik team
answered on 08 Jan 2019, 09:54 PM
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
Asked by
Valentin
Top achievements
Rank 1
Answers by
Didi
Telerik team
Valentin
Top achievements
Rank 1
IanV
Top achievements
Rank 1
Veteran
Lance | Manager Technical Support
Telerik team
Share this question
or