Pull To Refresh Works on iOS and Not Android in UI for Xamarin

This is a migrated thread and some comments may be shown as answers.

Pull To Refresh Works on iOS and Not Android

8 Answers 26 Views

ListView

This is a migrated thread and some comments may be shown as answers.

8 Answers, 1 is accepted

answered on 21 Sep 2017, 07:52 AM

Hello Trevor,

Thank you for contacting us on that matter. We tested the reported behavior on our side but to no avail. We modified the SDK example ListView/Gestures/Pull To Refresh with the code you provided and the RadListView component is visualized as expected.

Could you please share more details about your setup? Is there anything special implemented in the event handlers? Is it possible for you to isolate the behavior in a small repro project and send it over?

Thank you for your cooperation.

Regards,
Pavel R. Pavlov
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

answered on 21 Sep 2017, 01:55 PM

<telerikDataControls:RadListView x:Name="listView" BackgroundColor="White" ItemTapped="listView_ItemTappedAsync" LoadOnDemandMode="Automatic" IsLoadOnDemandEnabled="True" LoadOnDemand="listView_LoadOnDemand" LoadOnDemandBufferItemsCount="5" IsPullToRefreshEnabled="True" RefreshRequested="listView_RefreshRequestedAsync">

<telerikDataControls:RadListView.LayoutDefinition>

<telerikListView:ListViewLinearLayout ItemLength="64"/>

</telerikDataControls:RadListView.LayoutDefinition>

<telerikDataControls:RadListView.ItemTemplate>

<DataTemplate>

<telerikListView:ListViewTemplateCell>

<telerikListView:ListViewTemplateCell.View>

<StackLayout Orientation="Horizontal" VerticalOptions="Center">

<StackLayout.Padding>

<OnPlatform x:TypeArguments="Thickness">

<On Platform="Android" Value="0, 0, 0, 0"/>

<On Platform="iOS" Value="10, 5, 0, 5"/>

</OnPlatform>

</StackLayout.Padding>

<ContentView>

<ContentView.Padding>

<OnPlatform x:TypeArguments="Thickness">

<On Platform="Android" Value="0, 0, 0, 0"/>

<On Platform="iOS" Value="0, 0, 0, 7"/>

</OnPlatform>

</ContentView.Padding>

<Image x:Name="assetImage" Source="{Binding AssetImage, Converter={StaticResource base64Converter}}" VerticalOptions="Center"/>

</ContentView>

<StackLayout Orientation="Vertical" Spacing="5" VerticalOptions="Center">

<Label x:Name="primarySecondaryId" Text="{Binding PrimarySecondaryId}"/>

<Label x:Name="siteName" Text="{Binding SiteName}"/>

</StackLayout>

</telerikListView:ListViewTemplateCell.View>

</telerikListView:ListViewTemplateCell>

</DataTemplate>

</telerikDataControls:RadListView.ItemTemplate>

</telerikDataControls:RadListView>

That is how my RadListView is defined. And these are my handlers:

/// <summary>

/// OnRefresh method

/// </summary>

private async void listView_RefreshRequestedAsync(object sender, Telerik.XamarinForms.DataControls.ListView.PullToRefreshRequestedEventArgs e)

{

await Task.Run(() => ReloadData());

listView.IsPullToRefreshActive = false;

listView.IsLoadOnDemandEnabled = App.ShouldInfiniteScroolBeEnabled(assetsViewModel.ListOfAssets.Count);

}

/// <summary>

/// Reloads the data back to the default, remaking the API call. This will fetch the newest data.

/// </summary>

private void ReloadData()

{

assetsViewModel.PageNumber = 1;

assetsViewModel.GetAssets();

listView.ItemsSource = assetsViewModel.ListOfAssets;

SearchCollection = listView.ItemsSource as ObservableCollection<AssetsListModel>;

}

answered on 26 Sep 2017, 08:09 AM

TelerikXamarinApp1.zip

Hi, Trevor,

Unfortunately, we are still not able to reproduce the undesired behavior. I have attached a sample project for your reference. Can you please test if the behavior is observed with it? If so, please record a short video from your end. Otherwise, modifying the sample so that the undesired effects are observed will be highly appreciated.

Have a great rest of the week.

Regards,
Stefan Nenchev
Progress Telerik

answered on 05 Oct 2017, 09:39 AM

TelerikXamarinApp1.zip

Hello, Trevor,

Thank you for modifying the sample.

Actually, the issue is caused due to positioning the ListView within a StackLayout which seems to break the functionality. We will consider adding notes in the documentation that would suggest to not put the control in such container as it causes such undesired behavior. In the meantime, you can achieve the desired behavior by placing it within a Grid:

<ContentView.Content>

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition />

</Grid.RowDefinitions>

<ContentView Padding="0,-6, 0, 0" Grid.Row="0">

<SearchBar .../>

</ContentView>

<Grid Padding="0, -6, 0, 0" Grid.Row="1">

<telerikDataControls:RadListView ... />

</Grid>

</ContentView.Content>

I have updated the sample for your reference.

Regards,
Stefan Nenchev
Progress Telerik

answered on 05 Oct 2017, 09:41 AM

<ContentView.Content>

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition />

</Grid.RowDefinitions>

<ContentView Padding="0,-6, 0, 0" Grid.Row="0">

<SearchBar .../>

</ContentView>

<Grid Padding="0, -6, 0, 0" Grid.Row="1">

<telerikDataControls:RadListView ... />

</Grid>

</ContentView.Content>

I have updated the sample for your reference.

Regards,
Stefan Nenchev
Progress Telerik