Pull To Refresh Works on iOS and Not Android

[Trevor]

I have a pull to refresh defined, and it renders and works properly on iOS, but when I run on Android, the ListView doesn't render at all. If I remove the "RefreshRequested" and "IsPullToRefreshEnabled", it starts rendering again. Any idea why?? I am using the newest release of UI for Xamarin.Forms. This is how I defined the list:

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

[Pavel R. Pavlov]

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

[Trevor]

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

 

[Trevor]

I am using Android support library versions 25.4.0.2 and the current release of Telerik.UI.for.Xamarin (2017.2.818.1)

[Stefan Nenchev]

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

[Trevor]

Hi,

I was able to reproduce the issue in the sample project you attached. I attached the project with the issue.

Project Files

[Trevor]

Thanks for looking into this Stefan!

[Stefan Nenchev]

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>
    </Grid>
</ContentView.Content>

I have updated the sample for your reference.

Regards,
Stefan Nenchev
Progress Telerik

[Stefan Nenchev]

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>
    </Grid>
</ContentView.Content>

I have updated the sample for your reference.

Regards,
Stefan Nenchev
Progress Telerik